Android में बटन का राज। भाग 1: लेआउट मूल बातें

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

एंड्रॉइड एप्लिकेशन के विकास पर लेखों की मेरी श्रृंखला में, मैं आपके साथ जटिल नियंत्रणों को टाइप करने के लिए दिलचस्प और उपयोगी तकनीकों को साझा करना चाहता हूं। हम इसे टाइप करने के लिए बुनियादी टाइपिंग तकनीकों और उन्नत तरीकों दोनों पर विचार करेंगे, जो एंड्रॉइड एप्लिकेशन के विकास और रखरखाव को बहुत सुविधाजनक बनाते हैं, समय और पैसा बचाते हैं।

पहला भाग शुरुआती डेवलपर्स के लिए है। मैं दिखाऊंगा कि कैसे जावा कोड का उपयोग किए बिना एक विशेष रूप से जटिल बटन को विशेष रूप से लेआउट बनाना है, और इसके घटकों के साथ और भी बहुत कुछ। इन लेआउट तकनीकों का ज्ञान अन्य Android घटकों के साथ काम करते समय काम आएगा। लेख के पाठ्यक्रम में, मैं विस्तार से बताऊंगा कि ये या अन्य स्थिरांक, गुण, कमांड और जैसे मतलब क्या हैं। लेकिन मैं आधिकारिक Google दस्तावेज़ीकरण के लिंक भी प्रदान करूंगा, जहां आप प्रत्येक विषय का विस्तार से अध्ययन कर सकते हैं। यह लेख एक समीक्षा है, मैंने रूसी में अनुवादित सभी दस्तावेज़ों को यहां लाने के लिए एक लक्ष्य निर्धारित नहीं किया है। इसलिए, मेरा सुझाव है कि आप आधिकारिक स्रोतों का अध्ययन करें, विशेष रूप से उन लेखों का, जिनके लिंक मैं यहां प्रदान करता हूं।

हम इस लेख में क्या करना चाहते हैं? मान लें कि हम एक ऐसा एप्लिकेशन बनाते हैं जो आपको अपने स्मार्टफ़ोन पर टेलीफोनी फ़ंक्शन को सक्षम / अक्षम करने की अनुमति देता है, तो एप्लिकेशन में एक "चालू /" बटन होगा। हम गोल कोनों के साथ अपनी पृष्ठभूमि और फ्रेम के साथ एक बटन बनाएंगे। बटन फोकस होने या प्रेस हो जाने पर बैकग्राउंड और फ्रेम बदल जाएगा। बटन में एक टेक्स्ट नाम और एक आइकन होगा जो बटन के उद्देश्य को स्पष्ट रूप से समझाएगा। दबाने पर टेक्स्ट और आइकन का रंग भी बदल जाएगा। और क्या? चूंकि अनुप्रयोगों में ऑन / ऑफ बटन काफी सामान्य हैं, इसलिए एंड्रॉइड में पहले से ही स्टोरिंग / बदलते राज्य के लिए तैयार कार्यक्षमता है। हम अपनी बाइक का आविष्कार करने के बजाय इसका उपयोग करेंगे। लेकिन इस राज्य का प्रतिबिंब, हम अपना काम करेंगे, ताकि यह हमें शैली में सूट करे।

यह कुछ इस तरह दिखेगा:



बटन के बाएं किनारे पर हम आइकन रखते हैं। बटन का पाठ केंद्र में लंबवत और क्षैतिज रूप से बाईं ओर संरेखित है। लेकिन एक ही समय में, पाठ आइकन के शीर्ष पर नहीं होना चाहिए। बटन के दाहिने किनारे के साथ, फोन के संकेतक को चालू या बंद करें। यदि आवश्यक हो तो बटन पर पाठ और संकेतक के दाहिने आइकन के बीच की जगह "स्ट्रेच"। जब बटन दबाया जाता है, तो पृष्ठभूमि ग्रे हो जाती है, और फ़्रेम और बटन पर सभी तत्व सफेद हो जाते हैं।

हम यह सब केवल लेआउट द्वारा करेंगे। क्यों लेआउट, कोड नहीं? एक सही ढंग से डिज़ाइन किए गए पृष्ठ को आसानी से स्टाइल किया जा सकता है, अर्थात, इसे स्टाइल के सरल प्रतिस्थापन द्वारा मान्यता से लगभग बदला जा सकता है। आप उपयोगकर्ता को उस शैली को चुनने का सुझाव भी दे सकते हैं जिसे वह अधिक पसंद करता है। एंड्रॉइड में स्टाइल्स HTML में सीएसएस टेबल्स को कैस्केडिंग करने का एक एनालॉग है।

लेआउट समाधान आमतौर पर कोड द्वारा निष्पादित समान समाधानों की तुलना में अधिक कॉम्पैक्ट होते हैं, और गलती करने की संभावना कम होती है। और कोड के उपयोग के बिना अधिकांश पृष्ठों को डिज़ाइन मोड में देखा जा सकता है और डिबग किया जा सकता है (जो सीधे आईडीई में है), इसके लिए आपको एप्लिकेशन चलाने की आवश्यकता नहीं है, एक तैनाती की प्रतीक्षा करें, आदि।

एप्लिकेशन फ्रेमवर्क बनाएं

आइए क्रियान्वयन के लिए नीचे उतरें। प्रदर्शन के लिए, मैं ग्रहण पर निर्मित Android डेवलपर टूल (ADT) का उपयोग करूंगा।
एक नया प्रोजेक्ट बनाएं। फ़ाइल-> नया-> Android एप्लिकेशन प्रोजेक्ट।
आवेदन का नाम: MysteriesOfButtonsPart1
प्रोजेक्ट का नाम: MysteriesOfButtonsPart1
पैकेज का नाम: com.mysteriesofbuttons.part1
अन्य मापदंडों को डिफ़ॉल्ट रूप से छोड़ दिया जाएगा:


अगला। अगले पृष्ठ पर, समय बचाने के लिए, ADT हमारे लिए एक परीक्षण गतिविधि बनाएँ:


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


अगला। गतिविधि नाम अपरिवर्तित है:


समाप्त करें। अंत में हम व्यापार में उतर सकते हैं।

सबसे सरल बटन

लेआउट कोड के साथ शुरू करते हैं। फ़ाइल खोलें /res/layout/activity_main.xml और इसकी सभी सामग्रियों को निम्न कोड से बदलें:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" /> </RelativeLayout> 

RelativeLayout - एक लेआउट जिसमें बच्चों को एक दूसरे के सापेक्ष रखा जाता है, उदाहरण के लिए, एक बटन को दूसरे बटन के बाईं ओर स्थित करें, आदि। RelativeLayout के संचालन के बारे में यहाँ और पढ़ें।

Button हमारा बटन है। हमने android:id विशेषता को इसके लिए सेट किया है, जिसके द्वारा हम इसे एप्लिकेशन में पहचान सकते हैं। प्रारूप @+id/ मतलब है कि संसाधनों में एक नया पहचानकर्ता बनाया जाना चाहिए। यदि हमने @id/ निर्दिष्ट किया है, तो इसका मतलब यह होगा कि निर्दिष्ट पहचानकर्ता पहले से ही संसाधनों में होना चाहिए।

और इसलिए हम उपयोगकर्ता को प्रदर्शित पाठ सेट करते हैं: android:text=""

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

RelativeLayout और Button दोनों के पास विशेषताएं हैं android:layout_height और android:layout_height । ये किसी भी View की आवश्यक विशेषताएँ हैं। जैसा कि नाम का अर्थ है, वे क्रमशः तत्वों की चौड़ाई और ऊंचाई को दर्शाते हैं। उन्हें विभिन्न इकाइयों में सेट किया जा सकता है, लेकिन हम विशिष्ट आकारों का उपयोग नहीं करते हैं, जैसा कि आपने देखा होगा। हम match_parent और wrap_content match_parent उपयोग करते हैं।

match_parent मतलब है कि तत्व को उसके माता-पिता को क्षैतिज या लंबवत रूप से भरना होगा, यह इस बात पर निर्भर करता है कि हम चौड़ाई या ऊंचाई निर्धारित करते हैं।

wrap_content मतलब है कि तत्व का आकार न्यूनतम होना चाहिए, लेकिन ऐसा है कि तत्व की सभी सामग्री इसमें फिट होती है।

fill_parent स्थिरांक भी है, जिसका अर्थ बिल्कुल match_parent के समान है। दो समान स्थिरांक का उपयोग क्यों करें? fill_parent को API संस्करण 8 से पहले पेश किया गया था, और संस्करण 8 के बाद से इसे हटा दिया गया है और उपयोग के लिए अनुशंसित नहीं किया गया है। तथ्य यह है कि अंग्रेजी बोलने वाले डेवलपर्स के लिए match_parent अधिक सही fill_parent तुलना में एक निरंतर के अर्थ को दर्शाता है।

एंड्रॉइड एप्लिकेशन बहुत अलग स्क्रीन आकारों के साथ उपकरणों पर चलने के बाद से, जहां भी संभव हो, मैं इन match_parent और wrap_content का उपयोग करने की कोशिश करता हूं।

अब जब खिड़की को हटा दिया गया है, तो हम अपनी गतिविधि MainActivity.java के कोड पर MainActivity.java :

 package com.mysteriesofbuttons.part1; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } 

इस कोड में, हम केवल एक सार्थक कमांड देखते हैं: setContentView(R.layout.activity_main);
यह विधि पृष्ठ लेआउट संसाधन सेट करती है जिसके साथ गतिविधि काम करेगी।

आइए हमारे एप्लिकेशन को चलाएं और देखें कि क्या हुआ:

अब एक्लिप्स में activity_main.xml फ़ाइल खोलें और Graphical Layout बटन पर क्लिक करें:


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

पाठ शैली

अब चलो संरेखण करते हैं। अब बटन पर पाठ केंद्रित है। यह बटन के लिए डिफ़ॉल्ट शैली है। लेकिन हमें ऊर्ध्वाधर संरेखण को ध्यान में रखते हुए पाठ को बाईं ओर संरेखित करने की आवश्यकता है। यह कैसे करना है? android:gravity जोड़ें android:gravity बटन के लिए android:gravity विशेषता:

  <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="left|center_vertical" /> 

यह विशेषता एक या दो मान ले सकती है, हमारे मामले में दो। मूल्यों को एक ऊर्ध्वाधर पट्टी द्वारा अलग किया जाता है |
यह कैसा दिखता है:


आप विभिन्न संरेखण विकल्पों के बारे में और अधिक पढ़ सकते हैं और यहां उनका क्या अर्थ है।

इन विकल्पों के साथ "चारों ओर खेलने" का प्रयास करें और देखें कि यह बटन की उपस्थिति को कैसे प्रभावित करता है। यदि आप बटन पर पाठ को बोल्ड और / या इटैलिक बनाना चाहते हैं, तो android:textStyle उपयोग करें, उदाहरण के लिए android:textStyle="bold|italic" । यदि आपको बटन पर पाठ का आकार बदलने की आवश्यकता है, तो पैरामीटर android:textSize , उदाहरण के लिए: android:textSize="24sp" ।

sp - स्केल-स्वतंत्र पिक्सेल - स्क्रीन घनत्व और फ़ॉन्ट आकार सेटिंग्स के आधार पर माप की एक इकाई। पाठ को अलग-अलग स्क्रीन पर समान रूप से अच्छा दिखने के लिए, इसके आकार को sp में सेट करने की सिफारिश की जाती है।

इन मापदंडों को हमारे बटन पर सेट करें:

  <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="left|center_vertical" android:textStyle="bold|italic" android:textSize="24sp" /> 

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

आइकन को बटन पर रखें

आगे बढ़ो। अब हमें आइकन को बटन में जोड़ना होगा। आइकन निम्नलिखित icon_phone_normal.png फ़ाइल द्वारा सेट किया गया है:
डाउनलोड करने के लिए क्लिक करें

हम इसे अनुप्रयोग संसाधनों में drawable-hdpi करने drawable-hdpi में आयात करते हैं। बटन के लिए आइकन सेट करने के लिए, android:drawableLeft जोड़ें android:drawableLeft करने के लिए android:drawableLeft विशेषता:

  <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="left|center_vertical" android:textStyle="bold|italic" android:textSize="24sp" android:drawableLeft="@drawable/icon_phone_normal" /> 

android:drawableLeft अलावा, कई और विशेषताएँ हैं जो आपको बटन के अन्य भागों में रखकर आइकन सेट करने की अनुमति देती हैं: android:drawableTop , android:drawableBottom , android:drawableRight , android:drawableStart , android:drawableStart , android:drawableEnd ।

जैसा कि आपने देखा, हमने PNG एक्सटेंशन के बिना और भी -hdpi प्रत्यय के बिना आइकन को पथ का संकेत दिया। यह कोई टाइपो नहीं है। विस्तार कभी निर्दिष्ट नहीं किया जाता है, क्योंकि पहचानकर्ता नाम में कोई अवधि नहीं हो सकती है। और -hdpi प्रत्यय को एंड्रॉइड द्वारा स्वचालित रूप से प्रतिस्थापित किया जाएगा, क्योंकि यह एकमात्र icon_phone_normal डायरेक्टरी है जिसमें icon_phone_normal आइकन है। यदि आइकन केवल drawable-hdpi , बल्कि drawable-mdpi में भी है, उदाहरण के लिए, एंड्रॉइड डिवाइस के स्क्रीन रिज़ॉल्यूशन के लिए सबसे उपयुक्त एक का चयन करेगा, जिस पर एप्लिकेशन चल रहा है। तो आप गुणवत्ता वाले उत्पादों की आपूर्ति कर सकते हैं जो विभिन्न आकारों और स्क्रीन घनत्व वाले उपकरणों पर समान रूप से अच्छे लगते हैं। मल्टी-स्क्रीन सपोर्ट पर Google का एक बहुत अच्छा लेख है ।

बटन के लिए कस्टम पृष्ठभूमि।

अब जब हम आकर्षित करने योग्य संसाधनों का पता लगा लेते हैं, तो हम अपने बटन की पृष्ठभूमि को उस जगह से बदल दें जिसकी हमें आवश्यकता है। ऐसा करने के लिए, हम निम्न button_normal.png उपयोग करेंगे। button_normal.png चित्र:
डाउनलोड करने के लिए क्लिक करें

इसे drawable-hdpi करने drawable-hdpi में आयात करें। चित्र में हम स्क्रीन की प्रत्येक सीमा के साथ काली पट्टियाँ देखते हैं। वे यह सुनिश्चित करने के लिए सेवा करते हैं कि एंड्रॉइड छवि को उस आकार तक सही ढंग से फैलाए जो हमें चाहिए। बाईं और ऊपर की रेखाएं बताती हैं कि छवि का कौन सा क्षेत्र क्रमशः और क्षैतिज रूप से खींचेगा। और दाएं और नीचे की रेखाएं दर्शाती हैं कि आप जिस स्ट्रेच की गई छवि के किस क्षेत्र में तत्व की सामग्री को फिट करना चाहते हैं, अगर उसमें बच्चे हैं। उसी समय, काली रेखाएं निश्चित रूप से परिणामी तस्वीर में दिखाई नहीं दे रही हैं।

इसे नौ-पैच ड्रॉबल कहा जाता है। आप यहां इस लेआउट तकनीक के बारे में अधिक पढ़ सकते हैं ।

9-पैच माने जाने वाले संसाधन के लिए, विस्तार से पहले इसके नाम में एक नौ होना चाहिए, बाकी नाम से अलग करके एक अन्य बिंदु के रूप में, हमारे पास: button_normal.9.png

कैसे इस तरह के एक फैलाने योग्य पृष्ठभूमि तत्व प्रदान करने के लिए? हमारे बटन के पाठ को खोलें और उसमें android:background जोड़ें android:background विशेषता:

  <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="left|center_vertical" android:textStyle="bold|italic" android:textSize="24sp" android:drawableLeft="@drawable/icon_phone_normal" android:background="@drawable/button_normal" /> 

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

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="6dp" > 

dp क्या है? घनत्व-स्वतंत्र पिक्सेल - एक माप जो स्वचालित रूप से स्क्रीन के विभिन्न पिक्सेल घनत्व वाले उपकरणों पर स्केल करेगा ताकि तत्व समान दिखाई दे। हमेशा dp उपयोग करें, px नहीं, जब आपको एक विशिष्ट आकार निर्धारित करने की आवश्यकता होती है, अन्यथा आवेदन केवल आपके फोन पर अच्छा लगेगा।

android:padding विशेषता सभी पक्षों पर समान पैडिंग सेट करती है। यदि हम प्रत्येक पक्ष पर अलग-अलग इंडेंट सेट करना चाहते हैं, तो हम विशेषताओं का उपयोग कर सकते हैं android:paddingLeft , android:paddingRight , android:paddingTop , android:paddingBottom , android:paddingStart और android:paddingEnd ।

अब तक हमने जिन विशेषताओं की जांच की है वे न केवल बटन के लिए हैं, बल्कि अन्य तत्वों के लिए भी हैं। उदाहरण के लिए, android:background में सभी दृश्य तत्व हैं, android:drawableLeft में TextEdit और इसी तरह।

आगे बढ़ो। यदि हम अपना एप्लिकेशन लॉन्च करते हैं, तो हम देखेंगे कि जब एक बटन पर क्लिक किया जाता है, तो इसका स्वरूप बिल्कुल नहीं बदलता है, अर्थात यह दृश्यमान नहीं है कि बटन दबाया गया है या नहीं। आप इस रूप में हमारे बटन को नहीं छोड़ सकते, क्योंकि उपयोगकर्ता यह नहीं समझ पाएगा कि एप्लिकेशन काम कर रहा है या नहीं।

एंड्रॉइड में राज्यों के साथ काम करना

यहां राज्य बचाव के लिए आते हैं। जब बटन से कुछ नहीं होता है, तो यह दबाए गए स्थिति में नहीं होता है। यदि बटन में इनपुट फ़ोकस है, तो वह state_focused अवस्था में चला जाता है। यदि आप अपनी उंगली से बटन पर क्लिक करते हैं, तो यह तब तक स्थिति में रहेगा जब तक हम आपकी उंगली को मुक्त नहीं करते। इससे हमें कैसे मदद मिलेगी? हम प्रत्येक राज्य के लिए तत्वों की उपस्थिति अलग-अलग निर्धारित कर सकते हैं। आगे हम विस्तार से विचार करेंगे कि यह कैसे किया जाता है। कृपया ध्यान दें कि उपयोगकर्ता द्वारा देखे जाने वाले सभी चीज़ों को खींचने के लिए राज्य का उपयोग किया जा सकता है: आइकन, चित्र, व्यक्तिगत रंग, आदि।

चलो पृष्ठभूमि के साथ शुरू करते हैं। हम अपने बटन के लिए एक लाल फ्रेम सेट करेंगे जब यह फोकस में होगा, और जब इसे दबाया जाता है तो उल्टे रंगों के साथ एक फ्रेम। ऐसा करने के लिए, निम्न चित्रों को drawable-hdpi करने drawable-hdpi निर्देशिका में आयात करें:
डाउनलोड करने के लिए क्लिक करें
डाउनलोड करने के लिए क्लिक करें

अब हमारे पास 3 राज्यों में 3 पृष्ठभूमि चित्र हैं। लेकिन android:background विशेषता केवल एक बार सेट की जा सकती है। स्थिति से बाहर निकलने के लिए, हम एक नया चयनकर्ता बनाने योग्य संसाधन बनाएंगे जो हमारे 3 चित्रों को जोड़ता है।

drawable-hdpi करने drawable-hdpi पर राइट-क्लिक करें, नया-> Android XML फ़ाइल चुनें। फ़ाइल का नाम button_background करें और मूल तत्व selector :


समाप्त करें।
हमें निम्नलिखित सामग्री का एक खाली हिस्सा मिला है:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > </selector> 

चयनकर्ता के लिए state_focused और state_pressed राज्यों के लिए एक तस्वीर जोड़ें:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_normal" /> </selector> 

कृपया ध्यान दें कि button_normal चित्र के लिए button_normal राज्य का संकेत नहीं है। इसका मतलब यह है कि इस तरह की तस्वीर हमेशा उपयोग की जाएगी यदि बटन state_focused या state_pressed । माना जाने वाले राज्यों के अलावा, कई और उपयोग किए जा सकते हैं, एक पूरी सूची यहां वर्णित है

चयनकर्ता कैसे काम करता है? जब एक चयनकर्ता को किसी तत्व को सौंपा जाता है, तो वह लगातार मेजबान तत्व की स्थिति प्राप्त करता है, और इसे सूचीबद्ध संसाधनों में से पहला देता है, जो मालिक की स्थिति से मेल खाती है।

हमारे लेआउट button_background का पाठ खोलें और बटन पृष्ठभूमि को button_background से button_background :

  <Button android:id="@+id/act_main_btn_telephony" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:gravity="left|center_vertical" android:textStyle="bold|italic" android:textSize="24sp" android:drawableLeft="@drawable/icon_phone_normal" android:background="@drawable/button_background" /> 

हम पूरे बटन की पृष्ठभूमि को बेहतर ढंग से दबाए गए बटन के सफेद फ्रेम को देखने के लिए अंधेरा करते हैं:

 <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" > 

अब, यदि आप एमुलेटर पर एप्लिकेशन चलाते हैं, और बटन दबाते हैं, तो हम देखेंगे कि यह अपनी पृष्ठभूमि बदलता है:

दबाए जाने पर आइकन बदलें

पहले से ही बुरा नहीं है, लेकिन बेहतर है। दबाए जाने पर फोन आइकन बदलने के लिए चयनकर्ता बनाने की प्रक्रिया को दोहराएं। drawable-hdpi आइकन को आयात drawable-hdpi icon_phone_pressed.png में आयात drawable-hdpi :
डाउनलोड करने के लिए क्लिक करें

निम्नलिखित पाठ के साथ एक icon_phone चयनकर्ता बनाएँ:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/icon_phone_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/icon_phone_normal" /> </selector> 

और बटन पाठ में, हमारे नए icon_phone चयनकर्ता के साथ drawableLeft बदलें:

  <Button 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:gravity="left|center_vertical" android:text="" android:textSize="24sp" android:textStyle="bold|italic" /> 

दबाए जाने पर पाठ का रंग बदलें

अब जब आप बैकग्राउंड की तरह ही बटन पर क्लिक करते हैं तो आइकन बदल जाता है। यह पाठ के रंग से निपटने के लिए बना हुआ है। वह अभी भी किसी भी हालत में काले बने हुए हैं। यदि दबाए गए रूप में पाठ भी सफेद हो गया, तो एक फ्रेम और एक आइकन की तरह, बटन बहुत अधिक दिलचस्प लगेगा।

रंग प्रबंधन चित्रों से थोड़ा अलग है। क्रम में चलते हैं। सबसे पहले, रंगों को एक अलग निर्देशिका में संग्रहीत किया जाता है जिसे हमें बनाना होगा। drawable-hdpi के समान स्तर पर, res निर्देशिका में color उपनिर्देशिका जोड़ें:


color निर्देशिका में अगला, text_color और मूल तत्व selector नाम के साथ एक Android XML फ़ाइल बनाएँ:


और इसकी सामग्री को निम्नलिखित के साथ बदलें:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@android:color/white" android:state_pressed="true" /> <item android:color="#484848" /> </selector> 

चित्रों के साथ समानता से, रंग यहां राज्य की स्थिति और डिफ़ॉल्ट स्थिति के लिए सेट किए जाते हैं। रंग दो प्रकार से निर्धारित किए गए हैं: android:color="@android:color/white" और android:color="#484848"

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

अब, अपने बटन के स्रोत पर वापस जाएँ और android:textColor="@color/text_color" पाठ का रंग लिखें android:textColor="@color/text_color" :

  <Button 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:gravity="left|center_vertical" android:text="" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" /> 

अब हम ग्राफ़िकल लेआउट में परिणाम नहीं देख सकते हैं, यह एक ज्ञात प्लगइन समस्या है जो मुझे आशा है कि Google किसी दिन ठीक कर देगा। दुर्भाग्य से, आप केवल एमुलेटर या वास्तविक डिवाइस पर स्थिति के साथ रंगों का परीक्षण कर सकते हैं।

यह लेआउट का कलात्मक हिस्सा पूरा करता है। अब बटन इस तरह दिखता है:

हम टॉगलबटन को उपवास करते हैं

अगला, हम इस बारे में बात करेंगे कि बटन पर (/ बंद) पर टेलीफोनी स्थिति कैसे प्रदर्शित करें। हमें याद है कि एक बटन में केवल बाईं ओर ही एक आइकन हो सकता है। वर्तमान स्थिति प्रदर्शित करने के लिए, हम दाईं ओर बटन पर एक आइकन जोड़ेंगे। इसे ऑन स्टेट के लिए चेकमार्क और ऑफ स्टेट के लिए एक क्रॉस होने दें। हम आइकन कैसे बदलेंगे? सबसे स्पष्ट विकल्प OnClickListener ईवेंट OnClickListener को परिभाषित करना और drawableRight OnClickListener आइकन को बदलना है। यह काम करने का विकल्प है। लेकिन क्या करें यदि एक पृष्ठ पर एक नहीं, बल्कि 10 बटन हों, और सामान्य रूप से एक बटन न केवल इस पृष्ठ पर हो। फिर हमारा रास्ता कोड के दोहराव की ओर ले जाएगा, जो एक गतिविधि से दूसरे में कॉपी-पेस्ट करेगा, सबसे सुंदर समाधान नहीं। और अगर आपको कुछ बदलने की आवश्यकता है, तो आपको कई स्थानों पर बदलना होगा। मैं इससे बचना चाहूंगा।

सौभाग्य से, एंड्रॉइड इस उद्देश्य के लिए एक विशेष घटक प्रदान करता है - ToggleButton । यह बटन दो राज्यों में हो सकता है: चालू और बंद। हमारे लेआउट में Button टैग को ToggleButton बदलें:

  <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:gravity="left|center_vertical" android:text="" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" /> 

चूँकि ToggleButton विरासत ToggleButton मिला है, सभी Button विशेषताएँ इसके लिए लागू हैं, लेकिन एक अति सूक्ष्म अंतर है। ToggleButton text विशेषता को अनदेखा करता है, लेकिन दो नए का परिचय देता है: textOn और textOff । वे पाठ को क्रमशः और बंद राज्यों के लिए सेट करते हैं। लेकिन हम एक तस्वीर के साथ राज्य प्रदर्शित करना चाहते हैं, और हम पाठ को छोड़ना चाहते हैं। इसलिए, हम अपने पाठ को दोनों विशेषताओं पर लिखेंगे, और text विशेषता को अनावश्यक रूप से हटा देंगे:

  <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:gravity="left|center_vertical" android:textOn="" android:textOff="" android:textSize="24sp" android:textStyle="bold|italic" android:textColor="@color/text_color" /> 

अब बटन की स्थिति प्रदर्शित करने के लिए चित्र तैयार करें। icon_on_normal.png , icon_on_pressed.png , icon_off_normal.png और drawable-hdpi संसाधनों को आयात करने icon_on_normal.png drawable-hdpi (लिस्टिंग के क्रम में सूचीबद्ध) में आयात करें:
डाउनलोड करने के लिए क्लिक करें
डाउनलोड करने के लिए क्लिक करें
डाउनलोड करने के लिए क्लिक करें
डाउनलोड करने के लिए क्लिक करें
ध्यान दें : एक पारदर्शी पृष्ठभूमि पर सफेद आइकन सफेद पृष्ठभूमि पर ब्राउज़र में बहुत दृश्यमान नहीं हैं।

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

icon_on_off नाम का एक नया icon_on_off चयनकर्ता icon_on_off :

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/icon_on_pressed" android:state_checked="true" android:state_pressed="true" /> <item android:drawable="@drawable/icon_on_normal" android:state_checked="true" /> <item android:drawable="@drawable/icon_off_pressed" android:state_checked="false" android:state_pressed="true" /> <item android:drawable="@drawable/icon_off_normal" android:state_checked="false" /> </selector> 

यह देखा जा सकता है कि एक घटक में एक साथ कई राज्य हो सकते हैं, उदाहरण के लिए, इसे एक ही समय में चिह्नित और दबाया जा सकता है, या चिह्नित और दबाया नहीं जा सकता है, और इसी तरह।

android:state_checked="true" ऑन मोड में बटन से मेल खाता है, और android:state_checked="false" ऑफ मोड में बटन से मेल खाता है।

अब हमारे बटन पर वापस जाएं और उसमें android:drawableRight="@drawable/icon_on_off" विशेषता जोड़ें android:drawableRight="@drawable/icon_on_off" । स्पष्टता के लिए, मैंने इसे android:drawableLeft तुरंत बाद जोड़ा android:drawableLeft :

  <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" /> 

यदि हम एप्लिकेशन चलाते हैं तो हमें क्या मिलेगा? हम बटन को दबाए नहीं देखते हैं, ऑफ मोड में। इसके अलावा, यदि आप इसे दबाकर रखते हैं, तो सभी तत्व एक ग्रे बैकग्राउंड में सफेद रंग में प्रदर्शित होते हैं:


बटन रिलीज़ करें, स्थिति सक्षम में बदल जाती है। यदि आप फिर से क्लिक करते हैं, तो हम फिर से ग्रे बैकग्राउंड और सफेद आइकन देखते हैं, जिसके बाद राज्य को फिर से बंद कर दिया जाएगा:


वास्तव में हमें जो चाहिए।

कुछ कोड

बस मामले में, आइए देखें कि हम अपने एप्लिकेशन के कोड में कैसे समझ सकते हैं कि बटन चालू है या बंद है। ऐसा करने के लिए, हम isChecked()बटन के मूल्य का विश्लेषण कर सकते हैं : true- ऑन, falseऑफ। android:onClick="onToggleButtonClick"हमारे बटन में एक विशेषता जोड़ें :

  <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" /> 

MainActivity.javaउपयुक्त विधि जोड़ें :

 package com.mysteriesofbuttons.part1; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Toast; import android.widget.ToggleButton; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void onToggleButtonClick(View button) { Toast.makeText( getApplicationContext(), Boolean.toString(((ToggleButton) button).isChecked()), Toast.LENGTH_SHORT).show(); } } 

एप्लिकेशन लॉन्च करके और बटन दबाकर, हम स्क्रीन के नीचे true/ नीचे टेक्स्ट प्रॉम्प्ट देखेंगे false। और इसका मतलब है कि सब कुछ काम करता है।

निष्कर्ष

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

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

मैं Android में लेआउट अनुकूलन के उदाहरण का अध्ययन करने के लिए सभी को आमंत्रित करता हूं, मैं आपको इस लेख के दूसरे भाग को पढ़ने और चर्चा करने के लिए आमंत्रित करता हूं । इसमें, मैं निम्नलिखित विषयों पर विचार करता हूं:

• स्ट्रिंग संसाधनों का उपयोग strings.xml
• कस्टम शैलियों styles.xmlऔर शैली विरासत
• विषय
• आयाम संसाधन dimens.xml

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

उपयोगी लिंक

• इस लेख से तैयार एंड्रॉइड एप्लिकेशन प्रोजेक्ट
• Android में बटन का राज। भाग 2: लेआउट को फिर से दिखाना
• लेआउट रिलेटिवलाइट
• लेआउट नौ पैच drawable
• बटन और EditTexts में पाठ संरेखण
• विभिन्न आकारों और घनत्वों की स्क्रीन के लिए समर्थन
• राज्यों का चयनकर्ता में उपयोग किया जा सकता है
• iPUMB - FUIB ऑनलाइन - एक एप्लिकेशन का एक उदाहरण है जिसमें मैंने वर्णित लेआउट तकनीकों का उपयोग किया है