بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)
السلام عليكم ورحمة الله وبركاته
باذن الله سنخصص هذا الدرس للتكلم حول الـ Material Design عن طريق تطبيقها على واجهة تسجيل الدخول أو بالاحرى على التطبيق بأكمله.
Material Design or Theme: عبارة عن واجهة رسومية جديدة بدأت في الاصدار Android 5.0 (Lollipop) API 21 والاصدارات الحديثة، بمعنى لا تعمل مع الاصدارات الادنى من API 21. لكن هنالك مكتبات توفر هذا الDesign للاصدارات الأدنى سنتطرق لها لاحقا.
حيث يتوفر على ثلاث اصناف من الـ Themes:
1- Theme.Material:
Dark version of Material Theme; this is the default flavor in Android 5.0.
2- Theme.Material.Light:
Light version of Material Theme.
3- Theme.Material.Light.DarkActionBar:
Light version of Material Theme, but with a dark action bar.
كل ما سبق أعلاه مقتبسة من موقع Xamarin حيث تمثل الاشكال الافتراضية، بمعنى آخر من الممكن تغيير الالوان المستخدمة.
الصور أدناه تمثل نموذجا من الانواع الثلاثة للـ Themes الافتراضية:
1- الشك الافتراضي:
- تطبيق Theme معين على Activity (القصد من Activity هي لواجهة واحدة فقط أو أية واجهة تريدها):
PHP كود :
[Activity(Theme = "@android:style/Theme.Material.Light",
Label = "TestAndroidApp", MainLauncher = true, Icon = "@drawable/icon")]
- تطبيق Theme على كامل التطبيق: كتابة كود الـ Theme داخل ملف Manifest داخل application tag:
PHP كود :
android:theme="@android:style/Theme.Material.Light"
فعند تطبيق هذا الـTheme على تطبيقنا سوف نحصل بالتنفيذ على الشكل التالي:
2- شكل مخصص:
الان لننتقل الى الجزء الثاني من الـ Theme ألا وهي عمل تخصيص أو تعديل على الـThemes الافتراضي:
إن أي Theme يتكون من الاقسام التالية كما موضح في هذه الصورة:
فأنت بدورك تستطيع تغيير هذه الالوان الافتراضية لكل قسم ترغب بتغيير لونه.
-خطوات انشاء شكل مخصص:
أولا: قم بانشاء ملف xml في المجلد values الموجود داخل المجلد resources باسم Styles وضع بداخله هذا الكود:
PHP كود :
<resources>
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="android:Theme.Material.Light">
<!-- Customizations go here -->
<!-- Override the status bar color -->
<item name="android:colorPrimaryDark">#4c4cdb</item>
<!-- Override the app bar color -->
<item name="android:colorPrimary">#6495ed</item>
<!-- Override the color of UI controls -->
<item name="android:colorAccent">#991c1c</item>
</style>
</resources>
طيب لنشرح ما قمنا به:
يتم تعريف وسم باسم resources وبداخلة سيتم تعريف اسم الـTheme المخصص والذي نجعله يرث من احدى الاصناف الثلاثة للـThemes الافتراضية ومن ثم يتم عمل Override لأقسام الـTheme ويتم اسناد كل قسم لون مخصص من قبل المطوّر.
ويتم تطبيق الـTheme على الـActivity بالشكل التالي:
PHP كود :
[Activity(Label = "TestAndroidApp",Theme = "@style/MyCustomTheme", MainLauncher = true)]
وعند التنفيذ نحصل على الشكل التالي:
مع الملاحظة أننا قمنا بتغيير ثلاث اقسام فقط، فبامكانك تغيير كل اقسام الـTheme.
ملاحظة/ هذه الطريقة تعمل فقط من الاصدار Android 5.0 API 21 فأعلى.
ان شاءالله سنستكمل بقية الاضافات والتحسينات في دروس قادمة.
والحمد لله رب العالمين
