كان على كل مطور يعمل بنظام Android التعامل مع الأنماط على أي حال. شخص ما يشعر بالثقة معهم ، شخص ما لديه المعرفة السطحية فقط ، والتي في كثير من الأحيان لا تسمح لهم بحل المشكلة من تلقاء أنفسهم.
تحسبا لإصدار السمة المظلمة ، تقرر تحديث جميع المعلومات المتعلقة بالسمات والأساليب في تطبيقات Android في الذاكرة.
ما سيتم مناقشته:
- ضع في اعتبارك المفاهيم الأساسية للسمات والأساليب في تطبيقات Android ، ومعرفة الفرص التي توفرها لنا ؛
- لنقم بإنشاء سمة بسيطة باستخدام مكونات المواد ولعب مع إعادة تحديد الأنماط ؛
- دعونا نرى كيف يعمل موضوع الظلام.
- صياغة توصيات للعمل مع الأنماط.
لنبدأ بالأساسيات
في هيكلها ، يكون للسمات والأساليب بنية مشتركة:
<style name="MyStyleOrTheme"> <item name="key">value</item> </style>
لإنشاء ، استخدم علامة style . كل نمط له اسم ويقوم بتخزين معلمات key-value .
كل شيء بسيط جدا. ولكن ما هو الفرق بين الموضوع والأناقة؟
الفرق الوحيد هو كيف نستخدمها.
موضوع
السمة هي مجموعة من المعلمات التي تنطبق على التطبيق أو مكون النشاط أو العرض بأكمله. أنه يحتوي على الألوان الأساسية للتطبيق ، وأنماط لتقديم جميع مكونات التطبيق والإعدادات المختلفة.
موضوع المثال:
<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryVariant">@color/color_primary_variant</item> <item name="colorSecondary">@color/color_secondary</item> <item name="colorOnPrimary">@color/color_on_primary</item> <item name="colorOnError">@color/color_on_error</item> <item name="textAppearanceHeadline1">@style/TextAppearance.MyTheme.Headline1</item> <item name="bottomSheetDialogTheme">@style/ThemeOverlay.MyTheme.BottomSheetDialog</item> <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item> <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item> <item name="android:windowTranslucentStatus">true</item> </style>
أعاد السمة تعريف الألوان الرئيسية للتطبيق ( colorPrimary ، colorSecondary ) ، ونمط النص ( textAppearanceHeadline1 ) وبعض مكونات التطبيق القياسية ، بالإضافة إلى خيار شريط الحالة الشفاف.
لكي يصبح النمط موضوعًا حقيقيًا ، من الضروري أن يرث (سنتحدث عن الميراث لاحقًا) من التطبيق الافتراضي للموضوع.
أسلوب
النمط هو مجموعة من المعلمات لتصميم مكون عرض واحد.
نمط نموذج لـ TextInputLayout :
<style name="Widget.MyApp.CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="boxBackgroundMode">outline</item> <item name="boxStrokeColor">@color/color_primary</item> <item name="shapeAppearanceOverlay">@style/MyShapeAppearanceOverlay</item> </style>
السمة
السمة هي مفتاح النمط أو السمة. هذه طوب صغيرة مبنية عليها كل شيء:
colorPrimary colorSecondary colorOnError boxBackgroundMod boxStrokeColor shapeAppearanceOverlay ...
كل هذه المفاتيح هي سمات قياسية.
يمكننا إنشاء السمات الخاصة بنا:
<attr name="myFavoriteColor" format="color|reference" />
myFavoriteColor سمة myFavoriteColor إلى لون أو رابط إلى مورد ألوان.
في التنسيق ، يمكننا تحديد القيم القياسية تمامًا:
- اللون
- إشارة
- سلسلة
- التعداد
- جزء
- بعد
- منطقية
- الأعلام
- عوامة
- عدد صحيح
بطبيعتها ، السمة هي واجهة . يجب أن يتم تنفيذه في الموضوع:
<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="myFavoriteColor">@color/color_favorite</item> </style>
الآن يمكننا الرجوع إليها. يبدو الهيكل العام للنداء كما يلي:
1 — , ; 2 — namespace ( Material Components Library); 3 — , (); 4 — .
حسنًا ، أخيرًا ، لنغير ، على سبيل المثال ، لون نص الحقل:
<androidx.appcompat.widget.AppCompatTextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="?attr/myFavoriteColor"/>
بفضل السمات ، يمكننا إضافة أي نوع من التجريد سيتغير داخل الموضوع.
وراثة المواضيع والأساليب
كما هو الحال في OOP ، يمكننا اعتماد وظيفة التنفيذ الحالي. هناك طريقتان للقيام بذلك:
بالنسبة للميراث الصريح ، نحدد الأصل باستخدام الكلمة الرئيسية parent :
<style name="SnackbarStyle" parent="Widget.MaterialComponents.Snackbar"> </style>
بالنسبة إلى الميراث الضمني ، نستخدم dot-notation للإشارة إلى الأصل:
<style name="SnackbarStyle.Green"> </style>
لا يوجد فرق في عمل هذه الأساليب.
في كثير من الأحيان يمكننا تلبية أنماط مماثلة:
<style name="Widget.MyApp.Snackbar" parent="Widget.MaterialComponents.Snackbar"> </style>
قد يبدو أن النمط يتم إنشاؤه عن طريق الميراث المزدوج. هذا في الواقع ليس هو الحال. الميراث المتعدد محظور. في هذا التعريف ، يفوز الميراث الصريح دائمًا .
وهذا يعني أنه سيتم إنشاء نمط باسم Widget.MyApp.Snackbar ، وهو سليل Widget.MaterialComponents.Snackbar .
ThemeOverlay
ThemeOverlay - هذه سمات خاصة "خفيفة" تسمح لك بتجاوز سمات السمة الرئيسية لمكون العرض.
لن نذهب بعيدًا على سبيل المثال ، ولكن نأخذ قضية من طلبنا. قرر المصممون أننا بحاجة إلى إنشاء حقل تسجيل دخول قياسي ، والذي سيكون له لون مختلف عن النمط الرئيسي.
مع الموضوع الرئيسي ، يبدو حقل الإدخال كما يلي:
يبدو رائعا ، لكن المصممين يصرون على أن يكون الحقل بأسلوب بنية.
حسنًا ، كيف يمكننا حل هذه المشكلة؟
الحل الصحيح هو استخدام ThemeOverlay .
إنشاء ThemeOverlay وإعادة تعريف اللون الرئيسي للموضوع :
<style name="ThemeOverlay.MyApp.Login" parent="ThemeOverlay.MaterialComponents.TextInputEditText"> <item name="colorPrimary">@color/colorBrown</item> </style>
بعد ذلك ، TextInputLayout باستخدام العلامة المميزة android:theme في TextInputLayout :
<com.google.android.material.textfield.TextInputLayout android:theme="@style/ThemeOverlay.MyApp.Login" android:hint="Login" ... > <com.google.android.material.textfield.TextInputEditText ... /> </com.google.android.material.textfield.TextInputLayout>
كل شيء يعمل كما نحتاج.
بالطبع ، السؤال الذي يطرح نفسه - كيف يعمل تحت غطاء محرك السيارة؟
هذا السحر يسمح لك ContextThemeWrapper . عند إنشاء طريقة عرض في LayoutInflater ، سيتم إنشاء سياق يتم فيه أخذ السمة الحالية كأساس وسيتم إعادة تعريف المعلمات التي حددناها في سمة التراكب لدينا.
../LayoutInflater.java final TypedArray ta = context.obtainStyledAttributes(attrs, ATTRS_THEME); final int themeResId = ta.getResourceId(0, 0); if (themeResId != 0) { context = new ContextThemeWrapper(context, themeResId); } ta.recycle();
وبالمثل ، يمكننا تجاوز أي معلمة سمة في التطبيق بشكل مستقل.
تسلسل تطبيق السمات والأنماط على المكون View
الأولوية الرئيسية هي ملف العلامات. إذا تم تعريف المعلمة فيه ، فسيتم تجاهل جميع المعلمات المشابهة.
<Button android:textColor="@color/colorRed" ... />
الأولوية التالية هي أسلوب العرض:
<Button style=“@Widget.MyApp.ButtonStyle" ... />
فيما يلي أنماط محددة مسبقًا للمكون:
<style name="Theme.MyApp.Main" parent="Theme..."> <item name=“materialButtonStyle”>@Widget.MyApp.ButtonStyle</item> </style>
إذا لم يتم العثور على معلمات ، فسيتم استخدام سمات السمة:
<style name="Theme.MyApp.Main" parent="Theme..."> <item name=“colorPrimary”>@colorPrimary</item> </style>
بشكل عام ، هذا هو كل ما تحتاج إلى معرفته لبدء العمل مع الموضوعات. الآن دعونا نلقي نظرة سريعة على مكتبة تصميم Material Components المحدثة.
قد تأتي مكونات المواد معنا
تم تقديم مكونات المواد في Google I / O 2018 وهي بديل لمكتبة دعم التصميم.
تتيح لنا المكتبة الفرصة لاستخدام المكونات المحدثة من Material Design 2.0. بالإضافة إلى ذلك ، ظهر الكثير من خيارات التخصيص المثيرة للاهتمام فيه. كل هذا يسمح لك بكتابة تطبيقات مشرقة وفريدة من نوعها.
فيما يلي بعض أمثلة التطبيقات في النمط الجديد: Owl ، Reply ، Crane .
دعنا ننتقل إلى الممارسة
لإنشاء موضوع ، يجب أن ترث من الموضوع الأساسي:
Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.DayNight Theme.MaterialComponents.DayNight.NoActionBar Theme.MaterialComponents.DayNight.DarkActionBar
جميعها متشابهة جدًا مع سمات AppCompat ، لكن لها سمات وإعدادات إضافية.
يمكنك معرفة المزيد حول السمات الجديدة في material.io .
إذا لم تتمكن من التبديل إلى موضوع جديد في الوقت الحالي ، Bridge . أنها ترث من سمات AppCompat ولها جميع سمات مكونات المواد الجديدة. تحتاج فقط إلى إضافة postfix Bridge واستخدام جميع الميزات دون خوف:
Theme.MaterialComponents.Light.Bridge
وهنا موضوعنا:
<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryVariant">@color/color_primary_variant</item> <item name="colorSecondary">@color/color_secondary</item> <item name="colorSecondaryVariant">@color/color_secondary_variant</item> <style>
تغيرت أسماء الألوان الأساسية (ألوان العلامة التجارية):
colorPrimary — ( AppCompat); colorPrimaryVariant — ( colorPrimaryDark AppCompat); colorSecondary — ( colorAccent AppCompat); colorSecondaryVariant — .
يمكن العثور على مزيد من المعلومات حول الألوان على material.io .
لقد ذكرت بالفعل أن السمة تحتوي على أنماط قياسية لكل مكون عرض. على سبيل المثال ، بالنسبة إلى Snackbar سيتم Snackbar النمط Snackbar ، Snackbar checkbox - checkboxStyle وبعد ذلك سيكون كل شيء مشابه. مثال سيضع كل شيء في مكانه:
قم بإنشاء طريقتك الخاصة وقم بتطبيقه على السمة:
<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="snackbarStyle">@style/Widget.MyApp.SnackbarStyle</item> </style> <style name="Widget.MyApp.SnackbarStyle" parent="Widget.MaterialComponents.Snackbar"> </style>
من المهم أن نفهم أنه عند إعادة تعريف نمط في سمة ما ، فسيتم تطبيقه على كل طريقة العرض من هذا النوع في التطبيق (النشاط).
إذا كنت ترغب في تطبيق النمط على عرض واحد محدد فقط ، فأنت بحاجة إلى استخدام علامة style في الملف مع الترميز:
<com.google.android.material.button.MaterialButton style="@style/Widget.MyApp.SnackbarStyle" ... />
أحد الابتكارات التي أثارت إعجابي حقًا كانت ShapeAppearance . انها تسمح لك بتغيير شكل المكونات الحق في الموضوع!
ينتمي كل عنصر عرض إلى مجموعة معينة:
كما يمكننا أن نفهم من الاسم ، في مجموعات من وجهات النظر من مختلف الأحجام.
تحقق في الممارسة:
<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="shapeAppearanceSmallComponent">@style/Widget.MyApp.SmallShapeAppearance</item> </style> <style name="Widget.MyApp.SmallShapeAppearance" parent=“ShapeAppearance.MaterialComponents.SmallComponent”> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSizeTopLeft">20dp</item> <item name="cornerSizeBottomRight">15dp</item> </style>
أنشأنا Widget.MyApp.SmallShapeAppearance "الصغيرة". لقد قمنا 20dp الزاوية العلوية اليسرى بمقدار 20 20dp حين تم قطع الزاوية اليمنى السفلية بمقدار 15dp .
حصلت على هذه النتيجة:
تبدو مثيرة للاهتمام. هل ستعمل في الحياة الحقيقية؟ الوقت سوف اقول.
كما هو الحال مع الأنماط ، يمكننا فقط تطبيق ShapeAppearance على مكون عرض واحد.
ما هو هناك في موضوع مظلم؟
سيحدث إصدار Android Q قريبًا جدًا ، وسيأتي إلينا السمة الرسمية المظلمة.
ربما يكون أحد الميزات الأكثر إثارة للاهتمام والمذهلة للنسخة الجديدة من Android هو التطبيق التلقائي للسمة المظلمة للتطبيق بأكمله مع سطر واحد من التعليمات البرمجية.
أصوات رائعة ، دعونا نحاول. أقترح أخذ عميل gitlab المفضل من terrakok .
السماح بإعادة طلاء التطبيق (تم تعطيله افتراضيًا):
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:forceDarkAllowed">true</item> </style>
android:forceDarkAllowed مع API 29 (Android Q).
نبدأ ، انظروا الى ما حدث:
توافق على أن سطرًا واحدًا من التعليمات البرمجية يبدو رائعًا للغاية.
بالطبع ، هناك مشاكل - يندمج BottomNavigationBar مع الخلفية ، ويبقى المحمل أبيضًا ، ويعاني اختيار الكود ، ويبدو أن كل شيء ، على الأقل ، لم BottomNavigationBar أي شيء جدي.
أنا متأكد من أن إنفاق الكثير من الوقت يمكن أن يحل المشاكل الرئيسية. على سبيل المثال ، يتم إيقاف تشغيل الوضع المظلم التلقائي للعرض الفردي (نعم ، من الممكن أيضًا - android:forceDarkAllowed للعرض في ملف ترميز).
يجب أن نتذكر أن هذا الوضع متاح فقط للسمات الضوئية ، إذا كنت تستخدم وضع مظلم ، فلن تعمل السمة الداكنة المظلمة.
يمكن العثور على توصيات العمل في الوثائق وعلى material.io .
وإذا كنا نريد أن نفعل كل شيء بمفردنا؟
بغض النظر عن مدى سهولة استخدام مظهر مظلم قسري ، فإن هذا الوضع يخلو من المرونة. في الواقع ، كل شيء يعمل وفقًا لقواعد محددة مسبقًا قد لا تناسبنا ، والأهم من ذلك العميل. أعتقد أن مثل هذا القرار يمكن اعتباره مؤقتًا ، حتى نجعل تطبيقنا لموضوع مظلم.
في API 8 (Froyo) ، تمت إضافة تصفيات -night ، والتي تستخدم حتى يومنا هذا لتطبيق سمة داكنة. يتيح لك تطبيق السمة المطلوبة تلقائيًا وفقًا للوقت من اليوم.
في موضوعات DayNight ، يتم استخدام هذا التطبيق بالفعل ، يكفي أن نرثها.
دعنا نحاول كتابة منطقتنا:
../values/themes.xml <style name="Theme.DayNight.Base" parent="Theme.MaterialComponents.Light"/> <style name="Theme.MyApp.Main" parent="Theme.DayNight.Base> <!-- ... --> </style> ../values-night/themes.xml <style name="Theme.DayNight.Base" parent="Theme.MaterialComponents"/>
في المورد المعتاد values/themes.xml ( values/themes.xml ) values/themes.xml من السمة light ، في "night" ( values-night/themes.xml ) values-night/themes.xml من السمة dark.
هذا كل شيء. لقد حصلنا على تطبيق لمكتبة موضوع مظلم. الآن يجب علينا دعم الموارد لموضوعين.
للتبديل بين السمات أثناء تشغيل التطبيق ، يمكنك استخدام AppCompatDelegate.setDefaultNightMode ، والذي يأخذ المعلمات التالية:
MODE_NIGHT_NO - موضوع خفيف ؛MODE_NIGHT_YES - MODE_NIGHT_YES الظلام ؛MODE_NIGHT_AUTO_BATTERY - الوضع التلقائي. يتم تشغيل السمة الداكنة إذا كان وضع توفير الطاقة نشطًا ؛MODE_NIGHT_FOLLOW_SYSTEM - الوضع القائم على إعدادات النظام.
ما الذي يجب مراعاته عند التعامل مع السمات والأساليب؟
كما أشرت ، بدأت Google رسميًا في فرض موضوع مظلم. أنا متأكد من أن العديد من العملاء بدأوا في تلقي الأسئلة - "هل يمكننا إضافة سمة مظلمة؟". من الجيد أن تفعل كل شيء بشكل صحيح من البداية ويسهل عليك تغيير الألوان الفاتحة إلى الداكنة ، أثناء تلقي تطبيق تم طلاؤه بالكامل.
لسوء الحظ ، هذا ليس هو الحال دائما. هناك تطبيقات قديمة تتطلب جهدا كبيرا من أجل إجراء التغييرات اللازمة.
دعنا نحاول صياغة توصيات للعمل مع الأنماط معًا:
1. منتقي الألوان
أعتقد أن كل مطور يواجه موقفًا عندما يظهر لون غريب في التخطيط الجديد الذي لم يتم تعريفه بعد في لوحة التطبيق. ماذا تفعل في هذه الحالة؟
الإجابة الصحيحة هي التحدث إلى المصمم ومحاولة تطوير لوحة ألوان. يوجد الآن العديد من البرامج (Zeplin ، Sketch ، وما إلى ذلك) التي تتيح لك تقديم ألوان أساسية ثم إعادة استخدامها.
كلما قمت بذلك عاجلاً ، قلت الصداع في المستقبل.
2. تهجئة الألوان بأسمائها الصحيحة
في كل تطبيق ، هناك لون له العديد من خيارات السطوع. يمكنك البدء في اختراع أسماء لهم:
<color name="green_tiny">...</color> <color name="green_light">...</color> <color name="green_dark">...</color>
موافق ، لا تبدو جيدة جدا. السؤال الذي يطرح نفسه على الفور - ما هو لون أفتح من tiny أو light ؟ وإذا كان لدينا عشرات الخيارات؟
من الأفضل الالتزام بمفهوم Google وإضافة السطوع المناسب إلى أسماء الألوان (تستدعي Google خيار اللون هذا - colorVariant ):
<color name="material_green_300">...</color> <color name="material_green_700">...</color> <color name="material_green_900">...</color>
من خلال هذا النهج ، يمكن أن يتوفر لدينا أي عدد من خيارات السطوع بلون واحد ولا يتعين علينا تقديم أسماء محددة ، وهو أمر صعب حقًا.
3. للملخص من لون معين إذا تغير في مواضيع مختلفة
نظرًا لأننا نكتب تطبيقًا سيكون فيه موضوعان على الأقل ، فلا يمكننا أن نتحمل الإشارة إلى لون معين إذا تم تطبيقه في المظاهر بطرق مختلفة.
لنلقِ نظرة على مثال:
نرى أنه في سمة فاتحة ، على سبيل المثال ، يكون شريط الأدوات ملونًا باللون الأرجواني ، وفي الظلام يكون اللون رمادي داكن. كيف ننفذ هذا السلوك باستخدام إمكانات السمات فقط؟
كل شيء بسيط للغاية - سننشئ سمة وننفذها في مظاهر فاتحة ومظلمة باللون المناسب ، كما هو موضح سابقًا.
توصي Google بربط أسماء السمات مع دلالات الاستخدام.
4. لا تخافوا لإنشاء ملفات الموارد
عند كتابة الكثير من الأنماط والسمات والسمات المختلفة في styles.xml ، يصبح من الصعب الحفاظ عليها.
من الأفضل تجميع كل شيء في ملفات منفصلة:
themes.xml — Theme & ThemeOverlay styles.xml — Widget styles type.xml — TextAppearance, text size etc shape.xml — ShapeAppearance motion.xml — Animations styles system_ui.xml — Booleans, colors for UI control //may be other files
هذه القاعدة البسيطة ستتجنب ملفات الله ، وبالتالي ، سيكون من الأسهل الحفاظ على الأنماط.
5. إعادة الاستخدام إلى الحد الأقصى
ماذا سنفعل إذا أردنا إعادة تعريف سمة متوفرة فقط من إصدار محدد من API؟
يمكننا إنشاء موضوعين منفصلين:
../values/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> </style> ../values-v27/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> <name="android:windowLightNavigationBar">...</item> </style>
هل لدينا الآن سمة مع جميع المعلمات لكل إصدار من API؟ بالطبع لا! سنجعل موضوعًا أساسيًا يتم فيه تحديد السمات الأساسية المتاحة لجميع إصدارات واجهة برمجة التطبيقات ووراثتها في الإصدار المطلوب من واجهة برمجة التطبيقات:
../values/themes.xml <style name="Theme.MyApp.Base" parent=”Theme.MaterialComponents.DayNight.NoActionBar”> </style> <style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base”/> ../values-v27/themes.xml <style name="Theme.MyApp.Base.V27" parent="Theme.MyApp.Base"> <name="android:windowLightNavigationBar">...</item> </style> <style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base.V27”/>
وفقًا لهذا المبدأ ، يتم إنشاء كافة المواضيع في المكتبة القياسية.
6. استخدام ناقلات الموارد وصبغة
أعتقد أنه لا يجدر ذكر سبب جودة الموارد المتجهة. يعلم الجميع بالفعل (فقط في حالة وجود رابط للوثائق ). حسنًا ، سوف يساعدنا التلوين في تلوينها بألوان السمة.
يمكنك أن ترى ما هو الصبغة وكيفية التعامل معها في هذا المثال .
7.؟ Android: attr / ... vs؟ Attr / ...
عند الوصول إلى الموارد ، لدينا الفرصة لاستخدام كل من سمات النظام والسمات من مكتبة Material Components. من المهم أن نفهم أن بعض السمات موجودة فقط مع إصدار محدد من API. كما نعلم جيدًا ، فإن الوصول إلى مورد غير موجود يؤدي إلى تعطل (الوبر ، بالطبع ، سيخبرنا إذا كان هناك خطأ ما ، لكن يجب ألا تعتمد عليه دائمًا)
android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?attr/selectableItemBackgroundBorderless"
في الحالة الأولى ، نصل إلى مورد النظام ، كما هو موضح بواسطة android . في الحالة الثانية ، إلى سمة من المكتبة حيث يتم تطبيق التوافق مع الإصدارات السابقة.
من الأفضل دائمًا استخدام الخيار الثاني.
8. تحديد الوالد دائما للأناقة
يمكن أن تكون هناك معلمات في النمط الأصل ، والتي بدونها سيتم تقديم المكون بشكل غير صحيح ، لذلك يجب عليك تحديد الأصل دائمًا.
<style name="Widget.MyApp.LoginInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="errorTextColor">@color/colorError</item> </style>
9. موضوع ، أسلوب أو ...؟
عند إنشاء السمات والأساليب الخاصة بك ، سيكون أمرًا رائعًا إذا حددت بادئة توضح نوع النمط وما هو معرّف به. مثل هذه التسمية ستجعل من السهل جدا تنظيم وتوسيع الأنماط.
<style name="Theme.MyApp.Main" parent=”...”/> <style name="Widget.MyApp.LoginInputLayout" parent="..."/> <style name="Widget.MyApp.LoginInputLayout.Brown"/> <style name="ThemeOverlay.MyApp.Login" parent=”...”/>
10. استخدام TextAppearance
ستكون نغمة جيدة لتوسيع الأنماط الأساسية للنص واستخدامها في كل مكان.
يمكن العثور على الكثير من المعلومات المفيدة عن تصميم المواد: الطباعة ، الطباعة حسب الموضوع .
استنتاج
, — , . - . Material Components. . Sketch — Material Theme Editor . . , .
Material Components GitHub — Modular and customizable Material Design UI components for Android . . , — sample, .
روابط مفيدة: