چگونه در اندروید تم متریال بسازیم؟ بخش ۲
در مبحث قبلی ( چگونه در اندروید تم متریال بسازیم؟ ) دیدیم که برای کار با تم های متریال در اندروید باید چه کار هایی انجام دهیم و سازگاری برنامه با ورژن های مختلف را از روش xml حفظ کنیم.
امروز میخواهیم دربارهی رنگ ها و حفظ سازگاری با کد جاوا بیشتر صحبت کنیم. ( برای یادگیری تعریف تم در برنامه به بخش ۱ این آموزش مراجعه کنید )
در این آموزش اول از همه میخواهیم حفظ سازگاری با کد جاوا را یاد بگیریم.
میدانیم که برخی ویژگی های متریال فقط در اندروید ۵ به بعد قابل نمایش است پس در کد جاوا باید ورژن اندروید دستگاه کاربر را بررسی کنیم و طبق آن کد های خود را بنویسیم.
با استفاده از این قسمت کد در متد onCreate در Activity خود اضافه میکنیم.
//بررسی میکنیم که اندروید دستگاه کاربر از ۵ بیشتر باشد if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ){ //عملیاتی که میخواهیم برای اندروید ۵ به بعد انجام دهیم }else{ //دستگاه هایی با اندروید پایین تر از ۵ //عملیاتی که میخواهیم برای اندروید پایینتر از ۵ انجام دهیم }
شاید کمی برایتان نامفهوم باشد! خب با یک مثال میتوان این قضیه را واضح تر کرد.
فرض کنید شما برای برنامه ی خود یک toolbar نوشته ایم و میخواهیم به آن سایه بدهیم تا برجسته بودن در آن حس شود.اما سایه فقط در اندروید ۵ به بعد قابل نمایش است.
ما میتوانیم از ۲ راه این کار را انجام دهیم.
روش اول این است که در پوشه ی layout-v21 (به آموزش قبلی مراجعه شود) یک فایل xml برای toolbar ایجاد کنیم و صفت elevation را برای آن اعمال کنیم و فایل خود را در layout اصلی خود include کنیم.
روش دوم در کد جاوا میباشد که میتوانیم Toolbar خود را به صورت زیر سایه بدهیم.
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ){ toolbar.setElevation(elevation); }
با استفاده از این کد میتوان مقدار سایه ی خود را در برنامه set کرد.
اما مبحث اصلی در متریال رنگ ها میباشند که قبلا (در بخش ۱ این مقاله) به آن اشاره کردیم ، اما امروز میخواهیم جدی تر به آن بپردازیم.
در این تصویر میبینیم که چه رنگ هایی برنامه ی ما را تشکیل میدهند. colorPrimary رنگ اصلی برنامه ی ماست که اینجا آبی رنگ است.
textColorPrimary برای رنگ نوشته های اصلی بکار میروند و colorPrimaryDark برای رنگ نوار وضعیت (status bar) و … که در تصویر بالا میتوانید ببینید.
یک رنگ دیگر که در این تصویر نیست colorAccent میباشد که میتوانید در تصویر زیر کاربرد آن را ببینید.
این رنگ ها را در پوشه ی values در فایل colors.xml قرار میدهیم. مانند کد زیر :
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>
در انتخاب رنگ ها و استفاده از آنها باید به یک سری مسائل توجه کرد.
۱- باید رنگ اصلی (colorPrimary) با رنگ فرعی (colorAccent) متفاوت باشد.
۲- نباید برای نوشته هایمان از رنگ فرعی استفاده کرد.استفاده از رنگ فرعی برای یک لینک در متن موردی ندارد.
۳-عناصر از قبیل floatingActionButton , switch ,checkBox , … از رنگ فرعی استفاده میکنند.
برای تست و انتخاب رنگ ها میتوان از این سایت استفاده کنیم و رنگ های متریال را برای برنامه های خود بررسی و انتخاب کنیم.
امیدوارم از این آموزش لذت برده باشید و در برنامه هایتان به صورت کاربردی استفاده کنید.
تا آموزشی دیگر در ZeroToHero شما را به خدا میسپارم.
با ما همراه باشید.
مطالب زیر را حتما مطالعه کنید
آموزش Gradle – اهمیت Project Automation
درک مفهوم کدنویسی تمیز در اندروید
5 هک ساده برای کاهش سایز فایل APK
آشنایی با RecyclerView در اندروید
Open/Closed Principle در قوانین Solid
توابع در زبان برنامه نویسی Kotlin
چگونه در اندروید تم متریال بسازیم؟ بخش ۱
در سال های اخیر دستورالعمل ها در مورد رابط کاربری اندروید دچار تغییرات بزرگی بوده که اولین تغییر بزرگ را گوگل در اندروید نسخه ۳ (Honycomb) با آوردن سبک هولو (holo) ایجاد کرد.
اما در سال ۲۰۱۴ شرکت گوگل تغییر اساسی و سبک جدید طراحی را معرفی کرد و در اندروید نسخه ی ۵.۰ به بعد ما سبک طراحی اصولی (material design) را در طراحی های خود داشتیم.
این هفته در کارگاه اندروید zeroToHero به مبحث جذاب تم متریال (material theme) میپردازیم و بعدا از ویژگی ها و عناصر این سبک در برنامه های خود استفاده میکنیم.
شاید الان این سوال در ذهن شما باشد که اگر طراحی متریال از اندروید ۵ به بعد معرفی شده پس تکلیف برنامه هایی که میخواهند متریال باشند ولی کاربرانشان ممکن است از دستگاه هایی با اندروید های پایین تر (نسخه های ۴ و ۳) از آن استفاده کنند چیست؟!
پاسخ در این است که طراحی متریال شامل دو بخش عناصر متریال (toolbar , navigationView , recyclerView, …) و ویژگی هایی از قبیل انیمیشن ها و سایه ها (shadow) است. ما در استفاده از عناصر محدودیتی نداریم اما انیمیشن ها و سایه های متریال فقط در نسخه های ۵ به بعد قابل نمایش هستند.
تم اصلی برای این کار Theme.Material است.اما این تم نیاز به +API 21 (اندروید ۵ به بالاتر) دارد و این خبر خوبی نیست!(چون حدود ۶۵ درصد دستگاه های اندرویدی از نسخه ی کمتر از ۵ استفاده میکنند )اما نگران نباشید!
گوگل یک تم متریال برای +API 7 (از اندروید عهد بوق تا الان رو ساپورت میکنه! :D) تحت عنوان Theme.AppCompat معرفی کرده است که ما از آن استفاده خواهیم کرد.
این تم از کتابخانهی زیر است.
compile 'com.android.support:appcompat-v7:25.0.1'
در android studio این کتابخانه به صورت پیش فرض وارد شده است.
در قدم اول باید سازگاری برنامه را با ورژن های مختلف حفظ کنیم. در شاخه ی فایل منابع (res) مسیر هایی تحت عنوان drawable , layout , values داریم.
ما این ۳ پوشه ی جدید را به منابع خود اضافه میکنیم. ( drawable-v21 , layout-v21 , values-v21 )
مانند شکل زیر
مسیر هایی که کادر قرمز رنگ دارند را به پروژه اضافه کرده ایم.
از این پس هر لایه (layout) یا تصویر یا هر فایل منبعی را بخواهیم در برنامه اعمال کنیم به این گونه است که فایل های درون پوشه هایی با پسوند v21 در دستگاه هایی با اندروید API 21 (نسخه ی ۵) به بعد اجرا میشود (یعنی برنامه در دستگاهی که اندروید ۵ به بالا دارد برای اجرا از منابع موجود در این پوشه ها استفاده میکند).
دستگاه هایی که از اندروید با نسخه ی پایین تر از ۵ استفاده میکنند هنگام اجرای برنامه از پوشه های معمولی فایل های خود را اجرا میکنند.
در مسیر res پوشه ی values فایل styles.xml کد های زیر را وارد میکنیم.
<resources> <style name="MaterialTheme" parent="ParentMaterialTheme"> <!-- --> </style> <!-- Base application theme. --> <style name="ParentMaterialTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
داخل فایل AndroidManifest.xml ویژگی theme در تگ application را برابر مقدار زیر میگذرایم
android:theme="@style/MaterialTheme"
داخل پوشه ی values-v21 یک فایل با اسم styles.xml ایجاد میکنیم و کد زیر را به آن اضافه میکنیم.
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="MaterialTheme" parent="ParentMaterialTheme" > </style> </resources>
تا اینجا تم متریال را در برنامه ی خود وارد کردیم. حال نوبت به رنگ های برنامه میرسد.
۳ رنگ اصلی برنامه شامل نام های colorPrimary و colorPrimaryDark و colorAccent میباشند که colorPrimary رنگ اصلی برنامه است و رنگ toolbar و navigationView و … از این رنگ است.
colorAccent رنگ های جزئی شامل رنگ switch و checkBox و… را در بر میگیرد و colorPrimaryDark رنگ نوار وضعیت (status bar) را تشکیل میدهد.
این آموزش تموم نشده! منتظر قسمت بعدی باشید تا در مورد رنگ ها و قسمت سازگارکردن برنامه با کد جاوا را مورد بررسی قرار دهیم.
امیدوارم از این دوره لذت برده باشید. تا کارگاهی دیگه شما رو به خدا میسپارم.
موفق باشید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.