बॉटमएपबार कार्यान्वयन। भाग 1: Android के लिए सामग्री घटक

निचला एपबार नए एंड्रॉइड मटेरियल घटकों में से एक है जिसे Google I / O 2018 में पेश किया गया था। यह अनिवार्य रूप से टूलबार घटक का एक विस्तार है। नया निचला एपबार टूलबार के विपरीत, एप्लिकेशन विंडो के निचले भाग में स्थित है, जो इसके शीर्ष पर स्थित है। इस प्रतिमान के साथ, सामग्री डिजाइन टीम एक नए उपयोगकर्ता अनुभव (UX) की उम्मीद करती है। निचला टूलबार सामान्य टूलबार की तुलना में उपयोगकर्ता के लिए बहुत अधिक सुलभ है। नियंत्रण पैनल और मेनू को एप्लिकेशन के निचले भाग में ले जाकर, निचला एपार एंड्रॉयड अनुप्रयोगों के लिए एक नया डिजाइन प्रदान करता है।

बॉटमऐपबार के साथ मिलकर फ्लोटिंग एक्शन बटन (एफएबी) का स्थान भी बदल गया है (रूसी फ्लोटिंग एक्शन बटन )। अब FAB को या तो "क्रैशिंग" बॉटमऐपबार में रखा जा सकता है, या इसे ओवरलैप किया जा सकता है।

यह लेख नए एफएबी प्लेसमेंट विकल्पों के साथ बॉटमऐपबायर मूल बातें के कार्यान्वयन को प्रदर्शित करेगा।

समायोजन

सबसे पहले, एक छोटा प्रारंभिक सेटअप आवश्यक है।

अपने Android प्रोजेक्ट के लिए सामग्री घटकों को सक्षम करने का एक विस्तृत विवरण इस पृष्ठ पर पाया जा सकता है। इसके अलावा, इस ट्यूटोरियल में आपको एंड्रॉइड स्टूडियो 3.2 या उच्चतर का उपयोग करने की आवश्यकता है।

नीचे आवश्यक कॉन्फ़िगरेशन चरण हैं।

1. Google मावेन रिपॉजिटरी को build.gradle फ़ाइल में जोड़ें।

 allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } } 

2. build.gradle फ़ाइल में सामग्री घटकों के लिए एक निर्भरता जोड़ें। ध्यान रखें कि संस्करण नियमित रूप से अपडेट किया जाता है।

 implementation 'com.google.android.material:material:1.0.0-alpha1' 

compileSdkVersion रूप में compileSdkVersion और Android P के लिए न्यूनतम एपीआई संस्करण (यानी 28 और ऊपर) को compileSdkVersion ।

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

 style=”@style/Widget.MaterialComponents.BottomAppBar” 

कार्यान्वयन

आप निम्नानुसार अपने लेआउट में एक बॉटमऐपबार जोड़ सकते हैं। इसके अलावा, बॉटमऐपबियर कोऑर्डिनेटर लयआउट का बच्चा होना चाहिए।

 <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottom_app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/baseline_menu_white_24"/> 

app:layout_anchor में बॉटमऐपबार तत्व की id को निर्दिष्ट करके आप एफएबी को बॉटमऐपबार में बांध सकते हैं app:layout_anchor एफएबी तत्व का app:layout_anchor विशेषता। बॉटमऐपबार एफएबी को कवर कर सकता है या एफएबी बॉटमऐपबार को ओवरलैप कर सकता है।

 <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_white_24" app:layout_anchor="@id/bottom_app_bar" /> 

बॉटमऐपबार विशेषताएँ

नीचे दी गई तालिका बॉटमऐपबार की विशेषताओं को दर्शाती है।

backgroundTint

यह बॉटमऐपबार का बैकग्राउंड कलर सेट करने की विशेषता है।

fabAlignmentMode

विशेषता FAB (या तो केंद्र में या बॉटमऐपबार के अंत में) की स्थिति निर्धारित करती है। बॉटमऐपबार के अंत में एफएबी अलाइनमेंट है।

fabAttached

इस विशेषता को FAB को बॉटमऐपबार में बाँधने के लिए डिज़ाइन किया गया है और यह सच या गलत हो सकता है । हालांकि मटेरियल डिज़ाइन गाइड , नीचे दिए गए बापर के बाहर फैब रखने की सलाह नहीं देता है, लेकिन इस तरह के अनुकूलन की संभावना है। निम्नलिखित एक ऐसी स्थिति है जहां fabAttached विशेषता को गलत पर सेट किया गया है ।

fabCradleDiameter

FAB युक्त "पालना" के व्यास को निर्धारित करता है।

fabCradleRoundedCornerRadius

"पालना" के बैठक बिंदु पर कोने के त्रिज्या और बॉटमऐपबार के क्षैतिज भाग को सेट करता है।

fabCradleVerticalOffset

नीचे से पालना ऑफसेट का संकेत देता है।

यहां संपूर्ण लेआउट XML फ़ाइल है जिसका उपयोग उपरोक्त उदाहरणों के लिए किया गया था।

 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.bottomappbar.BottomAppBar android:id="@+id/bottom_app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:backgroundTint="@color/colorPrimary" app:fabAlignmentMode="center" app:fabAttached="true" app:navigationIcon="@drawable/baseline_menu_white_24"/> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/baseline_add_white_24" app:layout_anchor="@id/bottom_app_bar" /> </androidx.coordinatorlayout.widget.CoordinatorLayout> </androidx.constraintlayout.widget.ConstraintLayout> 

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

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

→ बॉटमऐपबार का कार्यान्वयन। भाग 2: मेनू और नेविगेशन दराज नियंत्रण
→ बॉटमऐपबार का कार्यान्वयन। भाग 3: Android के लिए व्यवहार