|
|
متریال دیزاین در زامارین
متریال دیزاین دارای سه قالب اصلی می باشد.
Theme.Material تم با رنگ های تیره
Theme.Material.Light: تم با رنگ های روشن
Theme.Material.Light.DarkActionBar: تم با رنگ های روشن و اکشن بار با رنگ تیره
همچنین ما میتوانیم تم متریال دیزاین را با رنگ های دلخواهمان تغییر دهیم ، به طور مثال می توانیم Theme.Material.Light که تم با رنگ های روشن است استفاده کنیم و رنگ اکشن بار را به رنگ سازمانی شرکت خود تغییر دهیم.
در نظر داشته باشید ما میتوانیم از یک تم در کل برنامه استفاده کنیم و یا به هر activity تم متفاوتی اختصاص بدهیم.
اختصاص تم متریال دیزاین به اپلیکیشن
داخل AndroidManifest.xml
|
1 2 3 4 5 6 |
<application android:label="MyApp" android:theme="@android:style/Theme.Material.Light"> </application> |
و یا داخل AssemblyInfo.cs
|
1 2 3 |
[assembly: Application(Theme="@android:style/Theme.Material.Light")] |
اختصاص تم متریال دیزاین به Activity
|
1 2 3 4 5 |
[Activity(Theme = "@android:style/Theme.Material.Light", Label = "MyApp", MainLauncher = true, Icon ="@drawable/icon")] |
حالا میخواهیم تم متریال دیزاین را با رنگ های دلخواهمان تغییر دهیم.
بخش های layout متریال :
colorPrimary و colorPrimaryDark و colorAccent و windowBackground و textColorPrimary و statusBarColorو navigationBarColor می باشد که به شرح تصویر کاملا متوجه بخش های آن شویم.
شخصی سازی متریال دیزاین
حالا میخواهیم رنگ های دلخواه خودمان را در تم متریال دیزاین پیاده کنیم.
1. در فولدر Resources/values یک فایل xml با نام color.xml ایجاد میکنیم و داخل آن رنگ ها و کد هگزا آن مشخص میکنیم:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8" ?> <resources> <color name="my_blue">#3498DB</color> <color name="my_green">#77D065</color> <color name="my_purple">#B455B6</color> <color name="my_gray">#738182</color> </resources> |
2.فولدری با نام values-v21 داخل resources اضافه میکنیم .فایلxml را با نام styles.xml را به آن اضافه میکنیم.( فولدر values-v21 برای android 5 تعریف شده است.)
در اینجا رنگ آبی یا همان my_blue که در color.xml تعریف کرده بودیم را به colorprimary و رنگ بنفش یا همان my_purple را به color accent اختصاص میدهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="UTF-8" ?> <resources> <!-- Inherit from the light Material Theme --> <style name="MyCustomTheme" parent="android:Theme.Material.Light"> <!-- Override the app bar color --> <item name="android:colorPrimary">@color/my_blue</item> <!-- Override the color of UI controls --> <item name="android:colorAccent">@color/my_purple</item> </style> </resources> |
نام تم خود را MyCustomTheme و قید کردیم که از android:Theme.Material.Light میخواهیم استفاده کنیم و 2 مورد از خصوصیات آن را میخواهیم تغییر دهیم.
تم متریال دیزاین قبل از شخصی سازی
تم متریال دیزاین بعد از شخصی سازی
لازم است بدانیم که تم متریال دیزاین از android 5 و api 21 به بعد پشتیبانی میشود اما ما میتوانیم به راحتی ورژن های قبل از 5 را نیز با استایل ها کنترل کنیم، که این موضوع را در آموزش بعد بررسی خواهیم کرد.
