Android डिज़ाइन समर्थन लाइब्रेरी v28 नवाचारों का अवलोकन

फिर से नमस्कार।

हम अपने नए पाठ्यक्रम "एंड्रॉइड डेवलपर" की लॉन्च तिथि के करीब पहुंच रहे हैं, कुछ भी नहीं बचा है और कुछ दिलचस्प सामग्री हैं जो हम संभावित श्रोताओं सहित सभी के साथ साझा करते हैं।

चलो चलते हैं।

हाल ही में, एंड्रॉइड सपोर्ट लाइब्रेरी के 28 वें संस्करण की घोषणा की गई है। वर्तमान अल्फा संस्करण में, अब हमारे पास दिलचस्प नए घटकों के सेट तक पहुंच है। इस लेख में, मैं सामग्री पुस्तकालय के घटकों के रूप में समर्थन लाइब्रेरी में किए गए परिवर्धन पर एक नज़र डालना चाहता हूं।



सामग्री बटन

MaterialButton एक विजेट है जिसका उपयोग अनुप्रयोगों के उपयोगकर्ता इंटरफ़ेस में सामग्री शैली में बटन प्रदर्शित करने के लिए किया जा सकता है। यह वर्ग AppCompatButton वर्ग से विरासत में मिला है, जिसे आप शायद पहले से ही अपनी परियोजनाओं में उपयोग करते हैं, लेकिन अंतर क्या हैं? डिफ़ॉल्ट रूप से, यह बटन स्टाइल फ्लैग का उपयोग करके इसे स्वयं कॉन्फ़िगर करने की आवश्यकता के बिना पहले से ही एक सामग्री उपस्थिति के साथ सजाया जाएगा। हम मटीरियलबटन वर्ग का उपयोग कर सकते हैं जैसा कि यह है, क्योंकि इसमें पहले से ही सामग्री की उपस्थिति होगी जो हमें चाहिए - इसे एक अधिक सुविधाजनक वर्ग के रूप में मानें।



हम इस बटन को अपनी लेआउट फ़ाइल में इस प्रकार जोड़ सकते हैं:

<android.support.design.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MATERIAL BUTTON" android:textSize="18sp" app:icon="@drawable/ic_android_white_24dp" /> 

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

यदि हम बटन में कुछ अतिरिक्त शैलियों को जोड़ना चाहते हैं, तो हम MaterialButton शैली विशेषता सेट का उपयोग करके ऐसा कर सकते हैं।

• ऐप: आइकन - बटन की शुरुआत में प्रदर्शित छवि को निर्धारित करने के लिए उपयोग किया जाता है।

• ऐप: iconTint - ऐप में परिभाषित आइकन का रंग बदलने के लिए उपयोग किया जाता है: आइकन विशेषता
• ऐप: iconTintMode - उस मोड को परिभाषित करता है जिसका उपयोग आइकन के रंग को बदलने के लिए किया जाएगा

• ऐप: आइकनपैडिंग - वह इंडेंट जो ऐप में परिभाषित आइकन पर लागू होगा: आइकन विशेषता

• एप्लिकेशन: extraPaddingLeftForIcon - उस इंडेंट को परिभाषित करता है जिसे ऐप में परिभाषित आइकन के बाईं ओर लागू किया जाएगा: आइकन विशेषता

• एप्लिकेशन: extraPaddingRightForIcon - एप्लिकेशन में परिभाषित आइकन के दाईं ओर लागू किए जाने वाले इंडेंट को परिभाषित करता है: विशेषता

• app: rippleColor - बटन तरंग प्रभाव रंग
• app: backgroundTint - बटन की पृष्ठभूमि के लिए एक ह्यू लागू करने के लिए इस्तेमाल किया। यदि आप बटन का बैकग्राउंड कलर बदलना चाहते हैं, तो बैकग्राउंड के बजाय इस विशेषता का उपयोग करें, ताकि बटन की शैली का उल्लंघन न हो
• app: backgroundTintMode - उस विधा को निर्धारित करने के लिए उपयोग किया जाता है जिसका उपयोग पृष्ठभूमि रंग बदलने के लिए किया जाएगा

• ऐप: स्ट्रोककलर - बटन स्ट्रोक रंग
• एप्लिकेशन: स्ट्रोकवार्ड - बटन स्ट्रोक चौड़ाई

• app: cornerRadius - बटन कोनों के चौरसाई त्रिज्या का निर्धारण करने के लिए उपयोग किया जाता है

टुकड़ा

चिप घटक हमें अपने लेआउट में चिप्स प्रदर्शित करने की अनुमति देता है। वास्तव में, एक चिप एक गोल पृष्ठभूमि पर कुछ पाठ है। इसका उद्देश्य उपयोगकर्ता को पाठ सेट के कुछ रूप को प्रदर्शित करना है, जिसे चुना जा सकता है या नहीं। उदाहरण के लिए, चिप्स का उपयोग आपके एप्लिकेशन में वर्तमान संदर्भ के आधार पर उपयोगकर्ता के लिए चयन योग्य ऑफ़र की सूची प्रदर्शित करने के लिए किया जा सकता है।



हम अपने लेआउट में चिप जोड़ सकते हैं, उदाहरण के लिए, app:chipText चिप पर प्रदर्शित होने वाले टेक्स्ट को सेट करने के लिए चिप टेक्स्ट विशेषता:

 <android.support.design.chip.Chip android:id="@+id/some_chip" android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This is a chip" /> 

अन्य विशेषताओं का एक सेट भी है जिसका उपयोग चिप को आगे बढ़ाने के लिए किया जा सकता है:

• ऐप: चेक करने योग्य - यह घोषित करने के लिए उपयोग किया जाता है कि चिप को चयनित के रूप में चिह्नित किया जा सकता है / नहीं। यदि अक्षम है, तो चिप चयन बटन के समान व्यवहार करता है।
• app: chipIcon - चिप में आइकन प्रदर्शित करने के लिए उपयोग किया जाता है

• app: closeIcon - चिप में डिलीट आइकन को प्रदर्शित करने के लिए उपयोग किया जाता है

हम अपने चिप इंस्टेंस पर श्रोताओं को भी लटका सकते हैं। वे उपयोगकर्ता इंटरैक्शन को ट्रैक करने के लिए उपयोगी हो सकते हैं। यदि हमारी चिप का चयन किया जा सकता है, तो सबसे अधिक संभावना है कि हम यह पता लगाना चाहेंगे कि यह स्थिति कब बदल गई। हम इसे setOnCheckedChangeListener श्रोता का उपयोग करके कर सकते हैं:

 some_chip.setOnCheckedChangeListener { button, checked -> } 

यदि हम डिलीट आइकन के साथ इंटरैक्शन सुनना चाहते हैं तो वही लागू होता है। ऐसा करने के लिए, हम निष्कासन घटनाओं को पंजीकृत करने के लिए setOnCloseIconClickListener फ़ंक्शन का उपयोग कर सकते हैं:

 some_chip.setOnCloseIconClickListener { } 

चिप समूह

यदि हम अपने उपयोगकर्ताओं को चिप्स का एक सेट दिखाते हैं, तो हम यह सुनिश्चित करना चाहते हैं कि वे हमारे विचार में एक साथ समूहबद्ध हों। ऐसा करने के लिए, हम चिपग्रुप दृश्य घटक का उपयोग कर सकते हैं:



अगर हम चिपग्रुप का उपयोग करना चाहते हैं, तो हमें चिप चिप के मूल घटक में अपने चिप व्यू को लपेटने की आवश्यकता है :

 <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="This" /> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="is" /> // ... </android.support.design.chip.ChipGroup> 

डिफ़ॉल्ट रूप से, आपका ChipView एक-दूसरे को थोड़ा पिन किया हुआ लग सकता है। यदि ऐसा है, तो आप निम्नलिखित ChipGroup विशेषताओं का उपयोग करके बच्चे के विचारों में रिक्ति जोड़ सकते हैं:

• ऐप: चिपस्पेसिंग - क्षैतिज और लंबवत दोनों दूरी जोड़ता है
• एप्लिकेशन: ChipSpacingHor क्षैतिज - क्षैतिज दूरी जोड़ता है
• एप्लिकेशन: ChipSpacingVertical - ऊर्ध्वाधर दूरी जोड़ता है

हम app:singleLine का उपयोग करके चिपग्रुप कंटेनर के अंदर एक एकल लाइन पर प्रदर्शित हमारे बच्चे चिप दृश्य को भी घोषित कर सकते हैं app:singleLine :



इस मामले में, आपको एक स्क्रॉल योग्य दृश्य में चिपग्रुप को लपेटने की आवश्यकता है, उदाहरण के लिए, HorizontalScrollView दृश्य, ताकि आपके उपयोगकर्ता प्रदर्शित चिप्स के माध्यम से स्क्रॉल कर सकें:

 <HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.design.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content" app:singleLine="true"> <android.support.design.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" app:chipText="Some chip" /> //  ... </android.support.design.chip.ChipGroup> </HorizontalScrollView> 

सामग्री कार्ड दृश्य

हमारे अनुप्रयोगों में, हमने शायद पहले ही कुछ बिंदु पर CardView घटक का उपयोग किया था। सपोर्ट लाइब्रेरी में अब MaterialCardView नामक एक घटक है जो हमें सामग्री डिज़ाइन के रूप में स्टाइल आउट-ऑफ-द-बॉक्स कार्यान्वयन प्रदान करता है।



CardView को इस तरह से अपने लेआउट में जोड़ा जा सकता है:

 <android.support.design.card.MaterialCardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp"> ... child views ... </android.support.design.card.MaterialCardView> 

आप वैकल्पिक रूप से CardView को अपनी दो विशेषताओं का उपयोग करके स्टाइल कर सकते हैं:

• ऐप: स्ट्रोककलर - वह रंग जो स्ट्रोक के लिए इस्तेमाल किया जाएगा (स्ट्रोक प्रदर्शित करने के लिए सेट किया जाना चाहिए)
• ऐप: स्ट्रोकविद - स्ट्रोक की चौड़ाई

इन दोनों विशेषताओं के साथ, आप प्रारंभ में उपलब्ध विशेषताओं का उपयोग करके कार्डव्यू को भी स्टाइल कर सकते हैं, जैसे कि app:cardBackgroundColor , आदि।

नीचे ऐप बार

BottomAppBar एक नया घटक है जो हमें अपने लेआउट के निचले भाग में टूलबार जैसा घटक प्रदर्शित करने की अनुमति देता है। यह हमें उपयोगकर्ता के लिए इस तरह से घटकों को प्रदर्शित करने की अनुमति देता है कि उनके साथ बातचीत करना मानक टूलबार के साथ संभवतः अधिक आसान है।



आप अपने लेआउट फ़ाइल में इस तरह से एक BottomAppBar जोड़ सकते हैं:

 <android.support.design.bottomappbar.BottomAppBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

ऐसा लगता है कि स्क्रीन पर प्रदर्शित होने के लिए बॉटमऐपबार में एक मेनू नियत होना चाहिए। यह निम्नानुसार प्रोग्राम किया जा सकता है:

 bottom_app_bar.replaceMenu(R.menu.main) 

जब एक बॉटमऐपबार को स्टाइल करने की बात आती है, तो कई विशेषताएं हैं जो आप उपयोग कर सकते हैं।

• एप्लिकेशन: fabAttached - इंगित करता है कि FAB बॉटमऐपबार से जुड़ा हुआ था या नहीं। आप FAB एप्लिकेशन का उपयोग करके कनेक्ट कर सकते हैं: FAB घटक में लेआउट_एकचर जिसे आप बॉटमऐपबार पहचानकर्ता का उपयोग करके कनेक्ट करना चाहते हैं। यदि FAB संलग्न है, तो इसे बॉटमऐपबार में डाला जाएगा, अन्यथा FAB बॉटमऐपबार से ऊपर रहेगा।

• ऐप: fabAlignmentMode - FAB स्थिति की घोषणा करता है जो बॉटमऐपबार से जुड़ी थी। यह या तो अंत हो सकता है:

या केंद्र:

• एप्लिकेशन: fabCradleVerticalOffset - संलग्न FAB के लिए उपयोग किए जाने वाले ऊर्ध्वाधर ऑफसेट की घोषणा करता है। डिफ़ॉल्ट 0dp है

Dp मान सेट करने से FAB को लंबवत रूप से ऊपर जाने की अनुमति मिलेगी:

• app: backgroundTint - दृश्य की पृष्ठभूमि के रंग को बदलने के लिए उपयोग किया जाता है। यदि आप दृश्य में पृष्ठभूमि रंग सेट करना चाहते हैं, तो आपको android:background विशेषता का उपयोग करने की आवश्यकता है। यह प्रस्तुति की स्थिरता सुनिश्चित करेगा।

निष्कर्ष

मेरी राय में, ये समर्थन पुस्तकालय के लिए सुरुचिपूर्ण जोड़ हैं। मैं बॉक्स के ठीक बाहर सामग्री-शैली के घटकों का उपयोग करने के लिए उत्सुक हूं और मुझे एक मामला मिलने पर भी खुशी हो रही है, जहां बॉटमऐपबार का उपयोग किया जा सकता है। मुझे यकीन है कि समर्थन लाइब्रेरी को स्थिर होने में कुछ समय लगता है। हमेशा की तरह, मैं इन नए घटकों के बारे में आपके विचार या टिप्पणियाँ सुनना चाहूंगा!

अंत

हम आपकी टिप्पणियों और प्रश्नों का इंतजार करते हैं जिन्हें आप यहां छोड़ सकते हैं या आप एक खुले दिन में बारबरा जा सकते हैं।