Android यूआई ट्विटर बूटस्ट्रैप बटन बनाना

निम्नलिखित बताता है कि एंड्रॉइड ऐप के लिए ट्विटर बूटस्ट्रैप स्टाइल बटन कैसे बनाएं। अपनी शैली बनाने की अवधारणा को समझने के लिए इस शैली को एक उदाहरण के रूप में लिया जाता है। नमूना कोड github पर पोस्ट किया गया। रिपॉजिटरी को अन्य तत्वों के लिए उदाहरणों के साथ फिर से भरना होगा। तो आप सब्सक्राइब कर सकते हैं।


Android SDK अपनी शैली बनाने के लिए कई विकल्प प्रदान करता है।

सबसे सरल से शुरू करते हैं। बटनों की अलग-अलग अवस्थाओं को प्रदर्शित करने वाली कई ग्राफिक फ़ाइलों के आधार पर एक बटन बनाएँ। (डिफ़ॉल्ट, चयनित, फ़ोकस, दबाया गया, आदि) .Png, .jpg, या .gif प्रारूप समर्थित हैं।



गतिविधि के लिए बटन के लिए कोड जोड़ें।

<Button android:id="@+id/button_primary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/default_margin" android:background="@drawable/button_primary_selector" android:text="Button" android:textColor="@android:color/white" /> 

Res / drawable फ़ोल्डर में, बटन_primary_selector.xml फ़ाइल बनाएँ

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/button_primary_selected"/> <item android:state_pressed="true" android:drawable="@drawable/button_primary_pressed"/> <item android:state_focused="true" android:drawable="@drawable/button_primary_focused"/> <item android:drawable="@drawable/button_primary_normal"/> </selector> 

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

नौ-पैच फ़ाइल स्वरूप का उपयोग करना

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

रूपांतरण draw9patch उपयोगिता का उपयोग करके किया जाता है। इसे ANDROID_SDK_HOME / टूल / में पाया जा सकता है।
शुरू करने के बाद, चार्ट को खुलने वाली खिड़की में खींचें। और तस्वीर के किनारे के साथ हम स्केलेबल सामग्री में शामिल पिक्सेल को चिह्नित करते हैं। कुछ इस तरह


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

आकार की ओर खींचने योग्य

ग्राफ़ के बजाय, आप XML का उपयोग करने वाले तत्वों का वर्णन कर सकते हैं।
दो राज्यों के लिए चयनकर्ता का एक उदाहरण:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape> <gradient android:startColor="#002A80" android:endColor="#04C" android:angle="270" /> <stroke android:width="1dp" android:color="#04C" /> <corners android:radius="4dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#006DCC" android:endColor="#04C" android:angle="270" /> <stroke android:width="1dp" android:color="#04C" /> <corners android:radius="4dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> 

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

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

 ... android:state_selected="true" ... 

अलग-अलग फ़ाइलों में राज्य विवरण भी निकाले जा सकते हैं। उदाहरण के लिए, दबाए गए बटन को बटन_primary_pressed.xml फ़ाइल में निम्नानुसार वर्णित किया जाएगा

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#04C" android:endColor="#006DCC" android:angle="270" /> <stroke android:width="1dp" android:color="#04C" /> <corners android:radius="4dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> 

चयनकर्ता में, एक्सटेंशन (.xml) भी निर्दिष्ट नहीं है।

StateList के बजाय, आप LayerList का उपयोग कर सकते हैं। यह दृष्टिकोण पिछले एक से अलग है जिसमें तत्वों की एक राज्य विशेषता नहीं है। सभी वस्तुओं पर काम किया जाएगा। अंतिम आइटम शीर्ष पर तैयार किया गया है।

एक उदाहरण:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="@drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="@drawable/android_blue" android:gravity="center" /> </item> </layer-list> 

नतीजतन, हम प्राप्त करते हैं


StateList और Shape Drawable का उपयोग करके एक बटन शैली बनाने के लिए कोड उदाहरण यहां android-custom-style-ui में देखे जा सकते हैं।

अधिक जानकारी और स्रोत यहां देखे जा सकते हैं।