एंड्रॉइड ऐप में थीम और स्टाइल

हर Android डेवलपर को वैसे भी शैलियों के साथ काम करना था। कोई उनके साथ आत्मविश्वास महसूस करता है, किसी को केवल सतही ज्ञान है, जो अक्सर उन्हें अपने दम पर समस्या को हल करने की अनुमति नहीं देता है।

डार्क थीम के रिलीज़ होने की प्रत्याशा में, एंड्रॉइड एप्लिकेशन में थीम और शैलियों से संबंधित सभी जानकारी को स्मृति में ताज़ा करने का निर्णय लिया गया था।

क्या चर्चा की जाएगी:

• एंड्रॉइड अनुप्रयोगों में विषयों और शैलियों की मूल अवधारणाओं पर विचार करें, देखें कि वे हमें क्या अवसर प्रदान करते हैं;
• चलो सामग्री घटकों का उपयोग करके एक सरल विषय बनाते हैं और शैलियों को पुनर्परिभाषित करते हैं;
• आइए देखें कि अंधेरे विषय कैसे काम करता है;
• शैलियों के साथ काम करने के लिए सिफारिशें तैयार करें।

आइए बुनियादी बातों से शुरू करें

उनकी संरचना में, विषयों और शैलियों में एक आम संरचना है:

<style name="MyStyleOrTheme"> <item name="key">value</item> </style> 

बनाने के लिए, style टैग का उपयोग करें। प्रत्येक शैली का एक नाम है और यह key-value मापदंडों को संग्रहीत करता है।

सब कुछ काफी सरल है। लेकिन विषय और शैली में क्या अंतर है?

फर्क सिर्फ इतना है कि हम उनका उपयोग कैसे करते हैं।

विषय

एक थीम मापदंडों का एक समूह है जो संपूर्ण अनुप्रयोग, गतिविधि या दृश्य घटक पर लागू होता है। इसमें एप्लिकेशन के मूल रंग शामिल हैं, एप्लिकेशन के सभी घटकों और विभिन्न सेटिंग्स को प्रस्तुत करने के लिए शैलियों।

उदाहरण विषय:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <!--Base colors--> <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> <!--Style attributes--> <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> <!--Params--> <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 विशेषता एक रंग या रंग संसाधन से लिंक करने के लिए इंगित करेगी।

प्रारूप में, हम काफी मानक मान निर्दिष्ट कर सकते हैं:

• रंग
• संदर्भ
• तार
• enum
• अंश
• आयाम
• बूलियन
• झंडे
• नाव
• पूर्णांक

इसकी प्रकृति से, एक विशेषता एक इंटरफ़ेस है । इसे विषय में लागू किया जाना चाहिए:

 <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.MyApp.Snackbar का वंशज है।

ThemeOverlay

ThemeOverlay - ये विशेष "हल्के" थीम हैं जो आपको व्यू-घटक के लिए मुख्य विषय की विशेषताओं को ओवरराइड करने की अनुमति देते हैं।

हम एक उदाहरण के लिए दूर नहीं जाएंगे, लेकिन हमारे आवेदन से एक मामला लेंगे। डिजाइनरों ने फैसला किया कि हमें एक मानक लॉगिन फ़ील्ड बनाने की आवश्यकता है, जिसका रंग मुख्य शैली से अलग होगा।

मुख्य विषय के साथ, इनपुट फ़ील्ड इस तरह दिखता है:

यह बहुत अच्छा लग रहा है, लेकिन डिजाइनर इस बात पर जोर देते हैं कि मैदान भूरे रंग की शैली में है।

ठीक है, हम इस समस्या को कैसे हल कर सकते हैं?

• शैली को ओवरराइड करें?

  
  

  हां, हम शैली को फिर से परिभाषित कर सकते हैं और मैन्युअल रूप से दृश्य के मुख्य रंग बदल सकते हैं, लेकिन इसके लिए आपको बहुत सारे कोड लिखने होंगे, और एक मौका है कि हम कुछ के बारे में भूल जाएंगे।

  
  

• दिशानिर्देशों पर और कस्टम मापदंडों के साथ अपना दृष्टिकोण लिखें?

  
  

  एक अच्छा विकल्प, इसलिए हम डिजाइनरों के किसी भी विशलिस्ट को संतुष्ट कर सकते हैं और एक ही समय में पंप कौशल, लेकिन यह सब श्रमसाध्य है और अवांछित कीड़े पैदा कर सकता है।

  
  

• विषय में मुख्य रंग को ओवरराइड करें?

  
  

  हमें पता चला कि हमें जिस प्रकार की आवश्यकता है, उसके लिए बस विषय में colorPrimary को बदलें। एक कामकाजी विकल्प, लेकिन इस तरह से हम शेष घटकों की उपस्थिति को प्रभावित करेंगे, लेकिन हमें इसकी आवश्यकता नहीं है।

  
  

सही समाधान ThemeOverlay का उपयोग करना है ।

ThemeOverlay बनाएं और थीम के मुख्य रंग को फिर से परिभाषित करें:

 <style name="ThemeOverlay.MyApp.Login" parent="ThemeOverlay.MaterialComponents.TextInputEditText"> <item name="colorPrimary">@color/colorBrown</item> </style> 

इसके बाद, हम इसे अपने TextInputLayout में विशेष android:theme टैग का उपयोग करके निर्दिष्ट करते हैं:

 <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 , एक संदर्भ बनाया जाएगा जहां वर्तमान विषय को आधार के रूप में लिया जाएगा और हमारे ओवरले थीम में निर्दिष्ट पैरामीटर को इसमें फिर से परिभाषित किया जाएगा।

 ../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(); 

इसी तरह, हम स्वतंत्र रूप से आवेदन में किसी भी विषय पैरामीटर को ओवरराइड कर सकते हैं।

दृश्य घटक पर थीम और शैलियों को लागू करने का क्रम

1. मुख्य प्राथमिकता मार्कअप फाइल है। यदि इसमें एक पैरामीटर परिभाषित किया गया है, तो सभी समान मापदंडों को अनदेखा किया जाएगा।

   
   

    <Button android:textColor="@color/colorRed" ... /> 

   
   

2. अगली प्राथमिकता दृश्य शैली है:

   
   

    <Button style=“@Widget.MyApp.ButtonStyle" ... /> 

   
   

3. निम्नलिखित घटक के लिए पूर्वनिर्धारित शैलियों का उपयोग करता है:

   
   

    <style name="Theme.MyApp.Main" parent="Theme..."> <item name=“materialButtonStyle”>@Widget.MyApp.ButtonStyle</item> <!-- ... --> </style> 

   
   

4. यदि कोई पैरामीटर नहीं मिला, तो थीम विशेषताओं का उपयोग किया जाता है:

   
   

    <style name="Theme.MyApp.Main" parent="Theme..."> <item name=“colorPrimary”>@colorPrimary</item> <!-- ... --> </style> 

   
   

सामान्य तौर पर, विषयों के साथ काम करना शुरू करने के लिए आपको यह जानना होगा। अब अपडेटेड मैटेरियल कंपोनेंट्स डिज़ाइन लाइब्रेरी पर एक नज़र डालते हैं।

सामग्री घटक हमारे साथ आ सकते हैं

सामग्री घटकों को Google I / O 2018 में पेश किया गया था और यह डिज़ाइन सपोर्ट लाइब्रेरी के लिए एक प्रतिस्थापन है।

लाइब्रेरी हमें मटीरियल डिज़ाइन 2.0 से अपडेट किए गए घटकों का उपयोग करने का अवसर देती है। इसके अलावा, इसमें कई दिलचस्प अनुकूलन विकल्प दिखाई दिए। यह सब आपको उज्ज्वल और अद्वितीय एप्लिकेशन लिखने की अनुमति देता है।

नई शैली में एप्लिकेशन के कुछ उदाहरण यहां दिए गए हैं: उल्लू , उत्तर , क्रेन ।

अभ्यास के लिए आगे बढ़ते हैं

विषय बनाने के लिए, आपको आधार विषय से वारिस होना चाहिए:

 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 विषयों से विरासत में मिले हैं और उनके पास सभी नई सामग्री घटक विशेषताएँ हैं। आपको बस 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 पर प्राप्त की जा सकती है।

मैंने पहले ही उल्लेख किया है कि विषय में प्रत्येक दृश्य घटक के लिए मानक शैलियाँ हैं। उदाहरण के लिए, snackbarStyle Snackbar शैली को snackbarStyle स्टाइल कहा snackbarStyle , 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> <!--<item name="cornerFamily">cut</item>--> <!--<item name="cornerSize">8dp</item>--> </style> 

हमने "छोटे" घटकों के लिए Widget.MyApp.SmallShapeAppearance बनाया। हमने ऊपरी बाएं कोने को 20dp और निचले दाएं कोने को 15dp से काट दिया।

इस परिणाम मिला:

यह दिलचस्प लग रहा है। क्या यह वास्तविक जीवन में काम करेगा? समय बताएगा।

शैलियों के साथ, हम केवल एक दृश्य घटक के लिए ShapeAppearance लागू कर सकते हैं।

एक अंधेरे विषय पर क्या है?

एंड्रॉइड क्यू की रिलीज बहुत जल्द होगी, और इसके साथ आधिकारिक डार्क थीम हमारे पास आएगी।

शायद एंड्रॉइड के नए संस्करण की सबसे दिलचस्प और शानदार विशेषताएं कोड की एक पंक्ति के साथ पूरे आवेदन के लिए एक अंधेरे विषय का स्वचालित अनुप्रयोग है।

बहुत अच्छा लगता है, चलो कोशिश करते हैं। मेरा सुझाव है कि टेराकोक से एक पसंदीदा गिटलैब क्लाइंट लेना ।

एप्लिकेशन को पुन: प्राप्त करने दें (डिफ़ॉल्ट रूप से अक्षम):

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- ... --> <item name="android:forceDarkAllowed">true</item> </style> 

android:forceDarkAllowed API 29 (Android Q) के साथ उपलब्ध है।

हम शुरू करते हैं, देखो क्या हुआ:

सहमत हूँ कि कोड की एक पंक्ति के लिए यह बहुत अच्छा लग रहा है।

बेशक, समस्याएं हैं - BottomNavigationBar पृष्ठभूमि के साथ विलीन हो जाती है, लोडर सफेद रहता है, कोड का चयन होता है और, ऐसा लगता है, सब कुछ, कम से कम कुछ भी गंभीर मुझे नहीं मारा है।

मुझे यकीन है कि इतना समय खर्च करने से मुख्य समस्याएं हल नहीं हो सकती हैं। उदाहरण के लिए, अलग-अलग विचारों के लिए स्वचालित डार्क मोड को बंद करना (हाँ, यह भी संभव है - android:forceDarkAllowed व्यू मार्कअप में उपलब्ध है)।

यह याद रखना चाहिए कि यह मोड केवल हल्के विषयों के लिए उपलब्ध है, यदि आप एक अंधेरे का उपयोग करते हैं, तो एक मजबूर अंधेरे विषय काम नहीं करेगा।

कार्य सिफारिशें प्रलेखन में और सामग्री पर पाई जा सकती हैं।

और अगर हम सब कुछ अपने दम पर करना चाहते हैं?

कोई फर्क नहीं पड़ता कि मजबूर अंधेरे विषय का उपयोग करना कितना आसान है, यह मोड लचीलेपन से रहित है। वास्तव में, सब कुछ पूर्वनिर्धारित नियमों के अनुसार काम करता है जो हमारे अनुरूप नहीं हो सकता है और इससे भी महत्वपूर्ण बात यह है कि ग्राहक। मुझे लगता है कि इस तरह के निर्णय को अस्थायी माना जा सकता है, जब तक कि हम एक अंधेरे विषय को लागू नहीं करते।

एपीआई 8 (फ्रायो) में, -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-night/themes.xml थीम्स। values-night/themes.xml ) में हम डार्क थीम से विरासत में प्राप्त करते हैं।

वह सब है। हमें एक अंधेरे विषय का एक पुस्तकालय कार्यान्वयन मिला। अब हमें दो विषयों के लिए संसाधनों का समर्थन करना चाहिए।

एप्लिकेशन चालू होने के दौरान थीम के बीच स्विच करने के लिए, आप AppCompatDelegate.setDefaultNightMode उपयोग कर सकते हैं, जो निम्न पैरामीटर लेता है:

• MODE_NIGHT_NO - लाइट थीम;
• MODE_NIGHT_YES - डार्क थीम;
• MODE_NIGHT_AUTO_BATTERY - स्वचालित मोड। यदि पावर सेविंग मोड सक्रिय है तो डार्क थीम चालू हो जाती है;
• MODE_NIGHT_FOLLOW_SYSTEM - सिस्टम सेटिंग के आधार पर मोड।

विषयों और शैलियों के साथ काम करते समय हमें क्या विचार करना चाहिए?

जैसा कि मैंने उल्लेख किया है, Google ने आधिकारिक रूप से एक अंधेरे विषय पर बल देना शुरू कर दिया है। मुझे यकीन है कि कई ग्राहकों को प्रश्न मिलने शुरू हुए - "क्या हम एक डार्क थीम जोड़ सकते हैं?"। यह बहुत अच्छा है अगर आप शुरू से ही सब कुछ ठीक करते हैं और आपके लिए पूरी तरह से पुन: प्राप्त आवेदन प्राप्त करते हुए हल्के रंगों को अंधेरे में बदलना आसान है।

दुर्भाग्य से, यह हमेशा मामला नहीं होता है। पुराने अनुप्रयोग हैं जिन्हें आवश्यक परिवर्तन करने के लिए काफी प्रयास की आवश्यकता होती है।

आइए एक साथ शैलियों के साथ काम करने के लिए सिफारिशें तैयार करने की कोशिश करें:

1. रंग बीनने वाला

मुझे लगता है कि हर डेवलपर एक ऐसी स्थिति का सामना करता है जब नए लेआउट में कुछ अजीब रंग दिखाई देता है जिसे अभी तक एप्लिकेशन पैलेट में परिभाषित नहीं किया गया है। इस मामले में क्या करना है?

सही उत्तर डिजाइनर से बात करना और रंग पैलेट विकसित करने का प्रयास करना है। अब कई कार्यक्रम (ज़ेपलिन, स्केच, आदि) हैं जो आपको प्राथमिक रंगों को प्रस्तुत करने और फिर उनका पुन: उपयोग करने की अनुमति देते हैं।

आप जितनी जल्दी ऐसा करेंगे, भविष्य में आपको उतने ही कम सिरदर्द होंगे।

2. उनके उचित नामों से रंग बिखेरें

प्रत्येक एप्लिकेशन में, एक रंग होता है जिसमें कई चमक विकल्प होते हैं। आप उनके लिए नामों का आविष्कार शुरू कर सकते हैं:

 <color name="green_tiny">...</color> <color name="green_light">...</color> <color name="green_dark">...</color> 

सहमत हूं, यह बहुत अच्छा नहीं लगता है। प्रश्न तुरंत उठता है - कौन सा रंग हल्का या light ? और अगर हमारे पास एक दर्जन विकल्प हैं?

Google अवधारणा के साथ colorVariant और रंग नामों के लिए उपयुक्त चमक जोड़ना सबसे अच्छा है (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. अधिकतम का पुन: उपयोग

अगर हम केवल एपीआई के एक विशिष्ट संस्करण से उपलब्ध एक विशेषता को फिर से परिभाषित करना चाहते हैं तो हम क्या करेंगे?

हम दो अलग-अलग विषय बना सकते हैं:

 ../values/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> <!--Many definition--> </style> ../values-v27/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> <!--Many definition--> <name="android:windowLightNavigationBar">...</item> </style> 

क्या अब हमारे पास एपीआई के प्रत्येक संस्करण के लिए सभी मापदंडों के साथ एक थीम है? बिल्कुल नहीं! हम एक मूल विषय बनाएंगे, जहां एपीआई के सभी संस्करणों के लिए उपलब्ध बुनियादी विशेषताओं को निर्धारित किया जाएगा और इसे एपीआई के वांछित संस्करण में विरासत में दिया जाएगा:

 ../values/themes.xml <style name="Theme.MyApp.Base" parent=”Theme.MaterialComponents.DayNight.NoActionBar”> <!--Many definition--> </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 / ... बनाम? Attr / ...

संसाधनों तक पहुंचने के दौरान, हमारे पास सामग्री घटक लाइब्रेरी से सिस्टम विशेषताओं और विशेषताओं दोनों का उपयोग करने का अवसर है। यह समझना महत्वपूर्ण है कि कुछ विशेषताएं केवल एपीआई के एक विशिष्ट संस्करण के साथ मौजूद हैं। जैसा कि हम सभी अच्छी तरह से जानते हैं, एक गैर-मौजूद संसाधन तक पहुंचने से दुर्घटना होती है (लिंट, निश्चित रूप से, हमें बताएगा कि कुछ गलत है, लेकिन आपको हमेशा इस पर भरोसा नहीं करना चाहिए)

 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 Design: Typography , Typography Theming .

निष्कर्ष

, — , . - . Material Components. . Sketch — Material Theme Editor . . , .

Material Components GitHub — Modular and customizable Material Design UI components for Android . . , — sample, .

उपयोगी लिंक:

• Getting started with Material Components for Android
• Theming Guide
• Android themes & styles demystified — Google I/O 2016
• Best Practices for Themes and Styles (Android Dev Summit '18)
• The Components of Material Design (Android Dev Summit '18)
• Masking Bitmaps Android