طریقه ویرایش قالبها و استایلهای متریال دیزاین
در این درس نحوه کنترل رنگها در پروژه اندروید استودیو با ویرایش رنگهای موجود در فایل colors.xml مورد بحث و بررسی قرار گرفته است و نحوه اعمال این تغییرات بصورت عملی انجام شده است.
فهرست مطالب آموزش
زبان طراحی Material Design
در اندروید 5 یا آبنبات چوبی، گوگل یک زبان طراحی جدید ارائه کرده با نام Material Design. این همان زبانی است که در اکثر ورژنهای اخیر اندروید استفاده میشود، اندروید 6 یا مارشمالو که قابل اجرا روی دستگاه‌های اندرویدی و برنامه‌های وب است. من چگونگی تنظیم آنرا در برنامه شما در قالبهایی از اندروید استودیو نشان میدهم، و بعد چند تا نکته درمورد نحوه تغییر دادن و ویرایش آنهم به شما میگویم.
تنظیم رنگهای پروژه اندرویدی از تم موجود در فایل styles.xml
من روی پروژه‌ای با نام Material Design کار میکنم، و حالا به فایل Android Manifest میروم. Manifest یک ویژگی تم هم برای تگ application و هم برای تگ اکتیویتی بصورت پیشفرض دارد.
تم مربوط به application چیزی در فایل استایل با نام App Theme.
این resource ID آن است، که بعد از کاراکتر @ آمده.
در واقع یکی از موارد موجود در فایل و مجموعه استایل است. در فایلهای xml به این روش داده‌های مختلف را از فایلها فراخوانی میکنیم. به طوری که اول نام فایل و مینویسیم بعد علامت اتساین و بعد آن موردی که میخواهیم.
با فشار دادن کلید کنترل یا کامند میتوانید به تعریف این فایل مراجعه کنید.
و میبینید که با این کار وارد فایلی به نام styles.xml شدم.
این فایل به عنوان بخشی از برنامه به درستی ایجاد شده، و میتوانید این فایل را با کلیک روی آیکن Scroll from Source در پروژه خود پیدا کنید.
در واقع ما در فایل styles.xml پیشفرض هستیم نه استایل مربوط به ورژن 21.
تم برنامه من از تم دیگری مشتق میشود، به طوری که عملکردهای آنرا به ارث میبرد.
و این تم اسم آن Theme .AppCompat. Light.DarkActionBar است.
و دوباره، میتوانم با فشردن کنترل یا کامند و کلیک به فایل اصلی بروم.
این فایل از SDK کپی شده و نباید آنرا تغییر بدهید.
ولی میتوانید هر تنظیماتی که خواستید در فایل styles.xml اعمال کنید.
این تم Material Design است و این تنظیمات فراخوانی رنگها از آن تم هستند. اینجا مقادیر color Primary، colorPrimaryDark و colorAccent فراخوانی شدند.
و از اینجا به مجموعه‌ای از تعاریف رنگها متصل میشویم.
مشاهده رنگهای پروژه اندروید استودیو برگرفته از فایل colors.xml
دوباره یکسری resource ID هایی است و میتوانیم آنها را ببینیم که فایل colors.xml را برای شما باز میکند.
که در همان فولدر values در فولدر منابع من قرار گرفته.
اینها مقادیر هگزا دسیمال رنگها هستند.
حالا به لایوت برمیگردم و میبینید که آن رنگ برای اکشن بار اینجا نمایان میشود ولی برای اینکه بطور ملموستری متوجه این رنگها شوید یک اجرا روی دستگاه میگیرم.
primary color برای تعریف پسزمینه اکشن بار استفاده میشود، آن بالا جایی که متن Hello World نمایش داده میشود. و dark primary color برای تعریف پسزمینه نوار سیستم یا system bar در بالاترین قسمت صفحه نمایش استفاده میشود. جایی که آیکنهای سیستم نمایش داده میشوند.
تغییر کد رنگهای برنامه اندرویدی در فایل colors.xml
خب حالا میتوانید این رنگها را در فایل colors.xml تغییر بدهید.
من میخواهم الان رنگها را تغییر بدهم، primary color را با C0C52A عوض میکنم.
و رنگ dark primary به شش تا صفر که نماینده رنگ مشکی است تغییر میدهم.
اینجا بد نیست بدانید در اندروید استودیو برای استفاده از رنگها باید از کد هگزا دسیمال آنها استفاده شود. و برای اینکه برای هر رنگ دلخواهی که میخواهیم به کار ببریم این کدها را به دست بیاوریم میتوانیم از نرم‌افزارهایی مثل فتوشاپ استفاده کنیم.
خب برمیگردیم سر بحث خود، وقتی این رنگها را اینجا وارد میکنید اندروید استودیو در ابتدا خط آن رنگ را به شما نشان میدهد، اینجا. برنامه را اجرا میکنم تا رنگهای جدید را روی صفحه نمایش ببینید. خب دیدید که به راحتی میشود Material Design را سفارشی کنید و رنگهای دلخواه خود را برای صفحه نمایش بکار ببرید.
کنترل خصوصیات رنگها در Material Design
اینجا یکسری نکاتی پیرامون اینکه چطور میشود با Material Design برنامه را بهتر کنیم وجود دارد که اولین آنها کنترل خصوصیات رنگها در Material Design است. نکته ای که است این میباشد که میتوانید برای تنظیم رنگ از پالت سایتهایی که تمهایی با رنگهای متناسب در اختیار ما میگذارند، مثل سایت با ارزش http://www.materialpalette.com؛ برای شکیلتر شدن صفحه نمایش خود استفاده کنید. اینجا تعدادی رنگهای رایجتر برای انتخاب برای Material Design وجود دارد. برای تنظیم یک پلت میتوانید روی دو تا رنگ کلیک کنید.
من روی رنگ نیلی کلیک میکنم و بعد کنترل یا کامند را نگه میدارم و روی Blue کلیک میکنم و به من یک نمایش از پلت نشان میدهد.
به علاوه همه رنگهای مختلف و نام استایل مرتبط آنها را نمایش میدهد.
اینها Dark Primary Color، the Primary Color، the Accent هستند.
و میتوانید مقادیر قابل دسترس دیگر را هم ببینید.
اگر خواستید موارد دیگری ببینید، روی رنگ اولیه کلیک کنید و بعد روی رنگ تیره کلیک کنید.
و یکبار دیگر نمایش آنرا ببینید.
جمع بندی
روشهای دیگری نیز برای سفارشی کردن رنگها در Material Design وجود دارد که باید نکات مربوط به منابع آنها گفته شود و قطعاً شما میخواهید ظاهر برنامه‌های را سفارشی کنید، اما در واقع همه آنها مربوط به مشخصات Material Design میشوند و در نتیجه برای سفارشی کردن ظاهر برنامه‌ها باید تمامی خصیصه‌های مربوط به Material Design را فرا بگیرید.