Android में बटन का राज। भाग 2: लेआउट को फिर से दिखाना

अभिवादन, विशिष्ट समुदाय।

पिछले लेख में, केवल लेआउट का उपयोग करके, हमने "चालू / बंद" बटन बनाया, और यहाँ हमें क्या मिला:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="6dp" android:background="#dddddd" > <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/button_background" android:drawableLeft="@drawable/icon_phone" android:drawableRight="@drawable/icon_on_off" android:gravity="left|center_vertical" android:textOn="" android:textOff="" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" android:onClick="onToggleButtonClick" /> </RelativeLayout> 

XML कोड बहुत वजनदार निकला। इस लेख में मैं दिखाऊंगा कि इसे वास्तव में सुंदर कैसे बनाया जाए। हम अपने आवेदन के रखरखाव को जटिल कर सकते हैं या टीम के नेतृत्व के साथ असंतोष का कारण हो सकता है कि सब कुछ हटाकर कोड को हल करेंगे। इस लेख में, हम स्ट्रिंग संसाधनों ( strings.xml ), आयाम संसाधनों ( dimens.xml ), शैलियों और विषयों ( styles.xml ) का उपयोग करेंगे। यदि आप लेख के पहले भाग से परिचित नहीं हैं, तो मैं कम से कम उसकी आँखों से दौड़ने की सलाह देता हूँ।

आप पिछले लेख से एंड्रॉइड एप्लिकेशन प्रोजेक्ट भी डाउनलोड कर सकते हैं , जिसे हम इस भाग में परिशोधित करेंगे ।

हमारा बटन इस तरह दिखता है:



दबाए गए बटन को दाईं ओर दिखाया गया है, जबकि हम उन्हें अपनी उंगली से पकड़ते हैं। बाईं ओर - दबाया नहीं गया, चालू और बंद मोड में।

पाठ संसाधन strings.xml

कोड रीफैक्टरिंग करते हैं। वहाँ निश्चित रूप से खामियां हैं, उदाहरण के लिए शब्द। आवेदन को कई भाषाओं में अनुवादित करने के लिए, सभी पाठ स्थिरांक को strings.xml . strings.xml फ़ाइल में एकत्र किया जाना चाहिए। यह पहले से ही बनाया गया है और res/values निर्देशिका में स्थित है। इसे खोलें और इसकी सामग्री को निम्नलिखित के साथ बदलें:

 <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">MysteriesOfButtons</string> <string name="action_settings"></string> <string name="act_main_telephony"></string> </resources> 

इसलिए हमने पाठ को निरंतर act_main_telephony घोषित किया। अब बटन टेक्स्ट को प्रतिस्थापित करें android:textOn और android:textOff लिंक के साथ @string/act_main_telephony :

  <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/button_background" android:drawableLeft="@drawable/icon_phone" android:drawableRight="@drawable/icon_on_off" android:gravity="left|center_vertical" android:textOn="@string/act_main_telephony" android:textOff="@string/act_main_telephony" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" /> 

थोड़ा बेहतर, हालांकि इससे कोड की मात्रा में केवल वृद्धि हुई है, लेकिन यह एप्लिकेशन को आसानी से स्थानीय बनाने की क्षमता के लिए एक शुल्क है। यह वास्तव में स्थानीय कैसे हो सकता है? हमारी strings.xml फ़ाइल res/values निर्देशिका में स्थित है। अब हम इसमें एक रूसी-भाषा का पाठ लिख रहे हैं। मान लीजिए हम अंग्रेजी का भी समर्थन करना चाहते हैं। ऐसा करने के लिए, हम res/values-en निर्देशिका बनाते हैं, और इसमें हम एक और strings.xml बनाते हैं। strings.xml फ़ाइल। इसमें पहली फ़ाइल के रूप में सभी समान स्थिरांक होने चाहिए, लेकिन पहले से ही अंग्रेजी में। एप्लिकेशन लॉन्च करते समय, एंड्रॉइड एप्लिकेशन में मुख्य रूप से उस लोकेल के लिए खोज करता है जिसे उपयोगकर्ता ने डिफ़ॉल्ट रूप से सिस्टम में इंस्टॉल किया है। यदि इस लोकेल के लिए एप्लिकेशन के पास संसाधन नहीं हैं, तो एंड्रॉइड डिफ़ॉल्ट लोकेल से res/values निर्देशिका से बिना प्रत्ययों के संसाधन लेता है। किसी भी भाषा में पाठ हो सकता है, जरूरी नहीं कि रूसी या अंग्रेजी। यदि उपयोगकर्ता अनुप्रयोग में उपलब्ध किसी अन्य संसाधन के लिए उपयुक्त नहीं है, तो इस संसाधन का उपयोग किया जाएगा। न केवल values के संसाधनों को स्थानीय बनाना संभव है, बल्कि किसी भी अन्य, उदाहरण के लिए, अक्सर ड्रा करने drawable स्थानीयकरण अगर कुछ पाठ एक तस्वीर द्वारा निर्दिष्ट किया जाता है। यदि आप विवरणों में रुचि रखते हैं, तो मैं Google से एप्लिकेशन के स्थानीयकरण पर एक दिलचस्प लेख पढ़ने की सलाह देता हूं और एंड्रॉइड सबसे उपयुक्त संसाधन कैसे चुनता है । यदि समय है, तो मैं उदाहरणों के साथ स्थानीयकरण पर एक अलग लेख तैयार करने की कोशिश करूंगा, क्योंकि यह प्रश्न काफी व्यापक है।

शैलियाँ और विषय-वस्तु: style.xml

क्या होगा अगर हमें इनमें से दस बटन चाहिए जो केवल शिलालेख और बाएं आइकन में भिन्न हों? सभी को कॉपी करें? फिर लेआउट फ़ाइल का आकार निषेधात्मक होगा और इसमें दोहराव कोड का 80% होगा। यहाँ शैलियाँ हमारी सहायता के लिए आती हैं। आइए सब कुछ डालें जो शैलियों में दोहराया जा सकता है। सौभाग्य से, ग्रहण के लिए ADT प्लगइन प्रक्रिया को थोड़ा आसान बनाता है यदि आप Android शैली फ़ाइल विकास से बहुत परिचित नहीं हैं।

शैली निकालने के लिए, Graphical Layout मोड में हमारे activity_main.xml लेआउट को खोलें और बटन का चयन करें। उस पर राइट-क्लिक करें और Extract Style चुनें:


शैली का नाम styleOnOffButton : styleOnOffButton और android:drawableLeft को छोड़कर सभी विशेषताओं को छोड़ें android:drawableLeft , android:textOn और android:textOff , जो हमारे आवेदन में प्रत्येक बटन के लिए अलग होगा। शेष विशेषताओं को शैली में प्रस्तुत किया जाएगा:


ओके पर क्लिक करें। परिणामी शैली को res/values/styles.xml में देखा जा सकता है:

  <style name="styleOnOffButton"> <item name="android:background">@drawable/button_background</item> <item name="android:drawableRight">@drawable/icon_on_off</item> <item name="android:gravity">left|center_vertical</item> <item name="android:onClick">onToggleButtonClick</item> <item name="android:textColor">@color/text_color</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">bold|italic</item> </style> 

लेकिन बटन पाठ में बहुत कमी आई है:

  <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/icon_phone" android:textOn="@string/act_main_telephony" android:textOff="@string/act_main_telephony" /> 

अब, दस बटन बनाने के लिए, आपको बहुत कम पाठ, और कम से कम कोड दोहराव लिखना होगा। कृपया ध्यान दें: विशेषताएँ android:layout_height और android:layout_height स्टाइल नहीं हैं। वे लेआउट फ़ाइल में प्रत्येक तत्व के लिए मौजूद होना चाहिए। android:id विशेषता, निश्चित रूप से, प्रत्येक ऑब्जेक्ट के लिए अपनी विशेषता है, यही वजह है कि यह शैली में भी प्रकट नहीं होता है। फिर भी, परिणामस्वरूप कोड आसानी से पुन: उपयोग किए जाने के लिए पर्याप्त कॉम्पैक्ट है।

यदि आप अभी एप्लिकेशन चलाते हैं, तो आप देखेंगे कि सब कुछ "फ़्लोट" हो गया है, और परिणाम बिल्कुल भी नहीं है जो हम उम्मीद करते थे। क्यों? क्योंकि शैली, हालांकि इसे बनाया गया था, बटन पर लागू नहीं हुआ।

आप विशेषता style="@style/styleOnOffButton" निर्दिष्ट करके एक बटन को एक शैली में लागू कर सकते हैं। यह स्वचालित रूप से किया जाएगा यदि हम Set style attribute on extracted elements विकल्प Set style attribute on extracted elements सक्षम करते हैं। दोनों तरीके काम करेंगे, लेकिन ये सबसे अच्छा विकल्प नहीं हैं, क्योंकि इस पंक्ति को प्रत्येक विंडो में प्रत्येक बटन उदाहरण के लिए लिखना होगा। मैं इससे बचना चाहूंगा। एक नियम के रूप में, एप्लिकेशन समान नियंत्रण के लिए एक ही शैली का उपयोग करते हैं, यह मूल डिजाइन नियमों में से एक है। यही है, सभी चालू / बंद बटन समान दिखते हैं, केवल आइकन और पाठ में भिन्न होते हैं। शायद ही कोई एक आयताकार बनाता है, दूसरा गोल होता है, और तीसरा एक लयबद्ध होता है।

यह हमें विषय में शैली को निर्धारित करने का अवसर देता है। वहां styles.xml खोलें। styles.xml और वहाँ निम्न पाठ खोजें:

  <!-- Application theme. --> <style name="AppTheme" parent="AppBaseTheme"> <!-- All customizations that are NOT specific to a particular API-level can go here. --> </style> 

यह हमारे आवेदन का विषय है। आइए बताते हैं कि सभी ToggleButton बटन में एक ही शैली, हमारी शैली होनी चाहिए:

  <!-- Application theme. --> <style name="AppTheme" parent="AppBaseTheme"> <!-- All customizations that are NOT specific to a particular API-level can go here. --> <item name="android:buttonStyleToggle">@style/styleOnOffButton</item> </style> 

android:buttonStyleToggle क्या है android:buttonStyleToggle , और क्या स्टाइल किया जा सकता है, और इसके बारे में कहां पढ़ना है? मुझे अभी भी शैलियों पर पूर्ण प्रलेखन नहीं मिला। अगर किसी ने उसे देखा, तो कृपया टिप्पणियों में लिखें। इसलिए, मैं सीधे एंड्रॉइड स्रोत की ओर मुड़ता हूं, सौभाग्य से वे सभी के लिए खुले हैं। मैं ADT के साथ काम करता हूं, और मेरे पास यहां Android शैलियों के लिए स्रोत कोड है: adt-bundle-windows\sdk\platforms\android-< API>\data\res\values\themes.xml । एंड्रॉइड एसडीके प्रबंधक उपयोगिता का उपयोग करके Window->Android SDK Manager , जो सीधे ग्रहण से चलता है, मेनू Window->Android SDK Manager ।

और एक और सुधार हमें करना चाहिए। हमारे द्वारा बनाई गई शैली बटन शैली से विरासत में नहीं मिली है, जिसका अर्थ है कि हमारे नियंत्रण ने दबाए जाने की क्षमता खो दी है। यह जांचना आसान है कि क्या आप अभी आवेदन शुरू कर रहे हैं और एक बटन दबाने की कोशिश कर रहे हैं। इसे कैसे ठीक किया जाए? हमें अपनी शैली android:style/Widget.Button.Toggle शैली से प्राप्त करने की आवश्यकता है android:style/Widget.Button.Toggle - यह सभी ToggleButton की डिफ़ॉल्ट शैली है:

  <style name="styleOnOffButton" parent="android:style/Widget.Button.Toggle"> <item name="android:background">@drawable/button_background</item> <item name="android:drawableRight">@drawable/icon_on_off</item> <item name="android:gravity">left|center_vertical</item> <item name="android:onClick">onToggleButtonClick</item> <item name="android:textColor">@color/text_color</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">bold|italic</item> </style> 

मुझे android:style/Widget.Button.Toggle कहां मिला android:style/Widget.Button.Toggle । android:style/Widget.Button.Toggle । android:style/Widget.Button.Toggle उसी Android स्रोतों से, styles.xml ।

आयाम संसाधन: dens.xml

अब सब कुछ उसी तरह काम करता है जैसा उसे करना चाहिए। लेकिन हमें कुछ और छोटे सुधार करने की जरूरत है। जैसा कि आपने देखा, styleOnOffButton शैली में एक android:textSize , जो 24sp स्थिरांक द्वारा निर्दिष्ट है। यदि बटन के अलावा हमारे एप्लिकेशन में कोई पाठ है, तो हम संभवतः इसे समग्र शैली को संरक्षित करने के लिए समान आकार बनाना चाहेंगे। और इसका मतलब है कि हम अलग-अलग स्थानों में एक से अधिक बार 24sp स्थिर का उपयोग करेंगे। और अगर हम बाद में पाठ के आकार के साथ प्रयोग करना चाहते हैं, तो हमें पूरे एप्लिकेशन में इन स्थिरांक को बदलना होगा। इससे बचने के लिए, आइए एक नामित आकार स्थिर घोषित करें। res/values/dimens.xml खोलें और निम्न के साथ इसकी सभी सामग्री को बदलें:

 <resources> <dimen name="text_size">24sp</dimen> <dimen name="activity_padding">6dp</dimen> </resources> 

जैसा कि आप देख सकते हैं, text_size अलावा text_size यहाँ एक और स्थिरांक है - activity_padding । यदि हम अपने लेआउट के कोड को याद करते हैं, तो वहां हम RelativeLayout टैग में निरंतर android:padding="6dp" । और चूंकि सभी एप्लिकेशन विंडो में स्क्रीन की सीमाओं से इंडेंटेशन भी समान बनाने के लिए तर्कसंगत है, इसलिए यह मूल्य स्थिरांक के लिए भीख माँगता है।

अब नए संसाधन @dimen/text_size साथ 24sp स्थिरांक को @dimen/text_size :

  <style name="styleOnOffButton" parent="android:style/Widget.Button.Toggle"> <item name="android:background">@drawable/button_background</item> <item name="android:drawableRight">@drawable/icon_on_off</item> <item name="android:gravity">left|center_vertical</item> <item name="android:onClick">onToggleButtonClick</item> <item name="android:textColor">@color/text_color</item> <item name="android:textSize">@dimen/text_size</item> <item name="android:textStyle">bold|italic</item> </style> 

और संसाधनों में एक निरंतरता के साथ activity_main.xml फ़ाइल में RelativeLayout टैग का पाठ:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/activity_padding" android:background="#dddddd" > 

और शैलियों के बारे में थोड़ा और

चलो फिर से शैलियों के बारे में सोचते हैं। हमने सभी ToggleButton लिए एक ही शैली बनाई है, तो सभी खिड़कियों के लिए एक शैली क्यों नहीं बनाई गई है? इसके अलावा, सीमाओं से इंडेंटेशन के अलावा, सभी खिड़कियों में एक सामान्य पृष्ठभूमि का रंग होगा। यह शैली सरल होगी, हमें इसे किसी भी चीज़ से विरासत में लेने की आवश्यकता नहीं है, आइए इसे मैन्युअल रूप से लिखें। styles.xml खोलें और समापन टैग से पहले अंत में निम्नलिखित कोड जोड़ें:

  <color name="activity_background_color">#dddddd</color> <style name="styleActivity"> <item name="android:background">@color/activity_background_color</item> <item name="android:padding">@dimen/activity_padding</item> </style> 

यहाँ रंग सेट करने का एक और तरीका है - रंग फ़ाइल का उपयोग करके संसाधन फ़ाइल में।

प्रत्येक RelativeLayout एक गतिविधि का मुख्य तत्व नहीं है, इसलिए हम सभी RelativeLayout स्टाइल नहीं कर सकते हैं, जैसा कि हमने ToggleButton साथ किया था। इस मामले में, शैली को उन तत्वों में स्पष्ट रूप से निर्दिष्ट किया जाना चाहिए, जहां style विशेषता का उपयोग करके इसकी आवश्यकता होती है। आइए शैली को अपने लेआउट में लिखें और देखें कि हमें टोगा में क्या मिला:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" style="@style/styleActivity" > <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/icon_phone" android:textOn="@string/act_main_telephony" android:textOff="@string/act_main_telephony" /> </RelativeLayout> 

हमारी शैलियों में खिड़कियों के सभी गुण। प्रत्येक नई गतिविधि के लिए, यह शैली style="@style/styleActivity" को निर्दिष्ट करने के लिए पर्याप्त है style="@style/styleActivity" अपने मूल तत्व के लिए, और विंडो अन्य एप्लिकेशन विंडो के समान दिखाई देगी।

निष्कर्ष

अनुकूलित एक के साथ मूल लेआउट की तुलना करें। यहाँ हमारे पास है:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="6dp" android:background="#dddddd" > <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/button_background" android:drawableLeft="@drawable/icon_phone" android:drawableRight="@drawable/icon_on_off" android:gravity="left|center_vertical" android:textOn="" android:textOff="" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" android:onClick="onToggleButtonClick" /> </RelativeLayout> 

और इसलिए, क्या हुआ:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" style="@style/styleActivity" > <ToggleButton android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/icon_phone" android:textOn="@string/act_main_telephony" android:textOff="@string/act_main_telephony" /> </RelativeLayout> 

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

सभी संख्यात्मक स्थिरांक dimens.xml में फ़ाइल में छिपे हुए हैं। dimens.xml , हम एक ही स्थिरांक का कोई कॉपी पेस्ट नहीं करेंगे। सभी स्ट्रिंग स्थिरांक strings.xml फ़ाइल में हैं। अन्य भाषाओं में एप्लिकेशन को स्थानीय बनाने के लिए, केवल इस फ़ाइल का अनुवाद करना पर्याप्त है।

मूल और अनुकूलित संस्करण के बीच का अंतर एक खिड़की तत्व पर भी ध्यान देने योग्य है। वास्तविक अनुप्रयोगों में, उनमें से दर्जनों विंडो में हैं, और इसलिए अनुकूलित कोड पढ़ने और बनाए रखने में बहुत आसान होगा। मेरे सबसे बड़े iPUMB आवेदन - FUIB ऑनलाइन में लगभग 40 गतिविधि शामिल हैं। यदि यह शैलियों के लिए नहीं है, तो मुझे खिड़की के डिजाइन को 40 बार कॉपी करना होगा, और यदि डिजाइनर कुछ नया लेकर आए, तो मुझे इस कोड को 40 बार बदलना होगा।

शैलियों का एक और आकर्षण टीम विकास में कोड का एकीकरण है। एक बार एक लिखित शैली की फाइल ने हमारी विकास टीम के सभी सदस्यों को विंडोज़ टाइप करने के लिए तैयार टूल दिया, और हमारी सभी विंडो एक ही यूनिट की तरह दिखती थीं, और बिना किसी रिफैक्टरिंग और “एडजस्टमेंट” के।

मुझे खुशी होगी अगर यह लेख आपके लिए उपयोगी था। निम्नलिखित लेखों में मैं निश्चित रूप से एंड्रॉइड में लेआउट की अन्य सूक्ष्मताओं को साझा करूंगा।

उपयोगी लिंक

इस लेख से तैयार एंड्रॉइड एप्लिकेशन प्रोजेक्ट
पिछले लेख से Android एप्लिकेशन प्रोजेक्ट, जिसे हम इस भाग में अंतिम रूप दे रहे हैं
Android में बटन का राज। भाग 1: लेआउट मूल बातें
अनुप्रयोग स्थानीयकरण
एंड्रॉइड सबसे उपयुक्त संसाधन का चयन कैसे करता है