🔈 👩🏽‍🚀 👨‍👧‍👧 बॉटमएपबार कार्यान्वयन। भाग 3: Android के लिए व्यवहार 📓 ☀️ 🛐

बॉटमएपबार कार्यान्वयन। भाग 3: Android के लिए व्यवहार

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

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

व्यवहार

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

ख़ाका

पहले दिशानिर्देश में नीचे की ओरबार के लेआउट का वर्णन किया गया है। यहाँ सुझाया गया है :

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

दिशानिर्देश लेआउट

इस दिशानिर्देश के आधार पर, यह अनुशंसा की जाती है कि आप मुख्य स्क्रीन पर बॉटमऐपबार लेआउट का उपयोग करें, जिसमें कई मेनू आइटम और एक केंद्रित एफएबी (फ्लोटिंग एक्शन बटन) दिखाया गया है। द्वितीयक स्क्रीनों पर , जो संक्रमण मुख्य लोगों से किया जाता है, बॉटमऐपबार लेआउट में दाएं-संरेखित एफएबी और कई अतिरिक्त मेनू आइटम शामिल होने चाहिए। इन दो स्क्रीन के बीच संक्रमण ठीक से किया जाना चाहिए। Gif ऑन टॉप इस गाइडलाइन को प्रदर्शित करता है।

अब देखते हैं कि इस व्यवहार को कैसे लागू किया जा सकता है। हमारे पास प्रत्येक स्क्रीन के मेनू के लिए res/menu फ़ोल्डर में दो xml फाइलें हैं:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/app_bar_search" android:icon="@drawable/baseline_search_white_24" android:title="@string/action_search" app:showAsAction="ifRoom"/> </menu>

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/app_bar_mail" android:icon="@drawable/baseline_mail_white_24" android:title="@string/action_mail" app:showAsAction="ifRoom"/> <item android:id="@+id/app_bar_delete" android:icon="@drawable/baseline_delete_white_24" android:title="@string/action_delete" app:showAsAction="ifRoom"/> <item android:id="@+id/app_bar_archieve" android:icon="@drawable/baseline_archive_white_24" android:title="@string/action_archieve" app:showAsAction="ifRoom"/> </menu>

जब स्क्रीन के बीच एक संक्रमण होता है, उदाहरण के लिए, हमारे मामले में TOGGLE स्क्रीन बटन दबाकर, मेनू और FAB सहित बॉटमऐपबार के लेआउट को बदलना चाहिए। बॉटमऐपबार लेआउट के इस व्यवहार के लिए मूल कोड इस प्रकार है:

 // Hide navigation drawer icon bottom_app_bar.navigationIcon = null // Move FAB from the center of BottomAppBar to the end of it bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END // Replace the action menu bottom_app_bar.replaceMenu(bottomappbar_menu_secondary) // Change FAB icon fab?.setImageDrawable(baseline_reply_white_24)

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

स्क्रॉल

स्क्रॉलिंग एक महत्वपूर्ण व्यवहार ट्रिगर है जैसे कि बॉटमऐपबार के लिए। सामग्री डिज़ाइन दिशानिर्देश पृष्ठ पर, इस मामले के लिए निम्नलिखित व्यवहार की सिफारिश की जाती है:

स्क्रॉल करते समय, एक निचला एपबार दिखाई दे सकता है या गायब हो सकता है:
- नीचे स्क्रॉल करने से बॉटमऐपबार छिप जाता है। यदि इसमें FAB होता है, तो यह पैनल से डिस्कनेक्ट हो जाता है और स्क्रीन पर रहता है।
- ऊपर स्क्रॉल करने से बॉटमऐपबार दिखाई देता है और अगर यह वहां होता है तो इसे FAB पर रीटच करता है।

नीचे स्क्रॉल करते समय बॉटम एपबार के व्यवहार का प्रदर्शन है।

स्क्रॉलिंग और बॉटमऐपबार

इस व्यवहार का उपयोग करने के लिए, निचला एपबार और एफएबी कोऑर्डिनेटर लयआउट के प्रत्यक्ष बच्चे होने चाहिए। फिर हम HideOnScroll को सक्षम करते हैं और नीचे की ओर स्क्रॉल स्क्रॉल झंडे सेट करते हैं:

 <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:fabAlignmentMode="center" app:hideOnScroll="true" app:layout_scrollFlags="scroll|enterAlways"/>

यह बॉटमऐपबार के इस व्यवहार को लागू करने के लिए पर्याप्त है।

उमंग

मटीरियल डिज़ाइन की दुनिया के प्रत्येक कंपोनेंट में हमारी भौतिक दुनिया के समान ऊँचाई है। बॉटमऐपबार में, ऊंचाई 8dp है , और स्क्रीन की सामग्री स्वयं 0dp तक बढ़ जाती है। स्थिर अवस्था में FAB 12dp तक बढ़ जाता है। इस आलेख में हम जिन दो घटकों को याद करेंगे, उनमें नेविगेशन ड्रावर और स्नैकबार क्रमशः 16dp और 6dp की वृद्धि करते हैं।

आमतौर पर, स्नैकबार उपयोगकर्ता को सूचित करने के लिए एक घटक है जो स्क्रीन के नीचे से पॉप अप होता है। लेकिन अगर स्क्रीन पर एक बॉटमऐपबार या नेविगेशन ड्रॉअर है, तो स्नैकबार का व्यवहार बदलना चाहिए। इन मामलों में, स्नैकबार को निचले घटकों के ऊपर दिखाया जाना चाहिए। यहाँ एक डेमो और लागू करने के लिए संबंधित कोड है:

स्नैकबार और बॉटमऐपबार

 private fun displayMaterialSnackBar() { val marginSide = 0 val marginBottom = 550 val snackbar = Snackbar.make( coordinatorLayout2, "FAB Clicked", Snackbar.LENGTH_LONG ).setAction("UNDO") { } // Changing message text color snackbar.setActionTextColor(ContextCompat.getColor(this, R.color.colorSnackbarButton)) val snackbarView = snackbar.view val params = snackbarView.layoutParams as CoordinatorLayout.LayoutParams params.setMargins( params.leftMargin + marginSide, params.topMargin, params.rightMargin + marginSide, params.bottomMargin + marginBottom ) snackbarView.layoutParams = params snackbar.show() }

जैसा कि हमने पहले ही उल्लेख किया है, नेविगेशन ड्रावर 16dp द्वारा उगता है, जिसका अर्थ है - दिशानिर्देश के अनुसार -

बॉटमऐपबार (जैसे नेविगेशन ड्रावर) से गिरता हुआ मेन्यू नीचे की ओर खुलने वाली मोडल विंडो से एक लेवल नीचे है।

निम्नलिखित हमारे नेविगेशन दराज का कार्यान्वयन है:

नेविगेशन दराज व्यवहार

नेविगेशन ड्रावर एक मोडल विंडो है और इसलिए ऊपर कार्यान्वयन नियम का पालन करता है।

इस व्यवहार के कार्यान्वयन का विवरण निम्नानुसार है। res/menu फ़ोल्डर में, नेविगेशन दृश्य के लिए एक xml मेनू फ़ाइल बनाई जानी चाहिए, जिसका उपयोग नेविगेशन दराज में किया जाएगा:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <group android:checkableBehavior="none"> <item android:id="@+id/nav1" android:icon="@drawable/baseline_mail_white_24" android:title="@string/nav_item1" /> <item android:id="@+id/nav2" android:icon="@drawable/baseline_bookmark_white_24" android:title="@string/nav_item2" /> <item android:id="@+id/nav3" android:icon="@drawable/baseline_message_white_24" android:title="@string/nav_item3" /> <item android:id="@+id/nav4" android:icon="@drawable/baseline_note_white_24" android:title="@string/nav_item4" /> <item android:id="@+id/nav5" android:icon="@drawable/baseline_location_on_white_24" android:title="@string/nav_item5" /> <item android:id="@+id/nav6" android:icon="@drawable/baseline_sync_white_24" android:title="@string/nav_item6" /> <item android:id="@+id/nav7" android:icon="@drawable/baseline_cloud_upload_white_24" android:title="@string/nav_item7" /> <item android:id="@+id/nav8" android:icon="@drawable/baseline_favorite_white_24" android:title="@string/nav_item8" /> <item android:id="@+id/nav9" android:icon="@drawable/baseline_chrome_reader_mode_white_24" android:title="@string/nav_item9" /> <item android:id="@+id/nav10" android:icon="@drawable/baseline_select_all_white_24" android:title="@string/nav_item10" /> <item android:id="@+id/nav11" android:icon="@drawable/baseline_sort_white_24" android:title="@string/nav_item11" /> <item android:id="@+id/nav12" android:icon="@drawable/baseline_access_time_white_24" android:title="@string/nav_item12" /> <item android:id="@+id/nav13" android:icon="@drawable/baseline_data_usage_white_24" android:title="@string/nav_item13" /> </group> </menu>

फिर नेविगेशन दराज का उपयोग करके टुकड़े के लिए एक लेआउट फ़ाइल बनाई जानी चाहिए:

 <?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:id="@+id/navigation_view_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:behavior_hideable="true" app:layout_behavior="@string/bottom_sheet_behavior"> <com.google.android.material.navigation.NavigationView android:id="@+id/navigation_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginTop="4dp" android:paddingBottom="40dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/view2" app:menu="@menu/bottom_nav_drawer_menu" app:theme="@style/NavigationDrawerStyle" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="12dp" android:layout_marginTop="16dp" android:fontFamily="@font/rubik_medium" android:text="@string/bottom_sheet_name" android:textColor="@color/colorAccent" android:textSize="18sp" android:textStyle="bold" app:layout_constraintStart_toEndOf="@+id/imageView" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:text="@string/bottom_sheet_email" android:textColor="@color/colorAccent" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <ImageView android:id="@+id/imageView" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginStart="24dp" android:background="@drawable/baseline_account_circle_black_48" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/textView" /> <View android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="2dip" android:layout_marginTop="15dp" android:background="#447e7e7e" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <ImageView android:id="@+id/close_imageview" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" android:layout_marginBottom="8dp" android:background="@drawable/baseline_close_black_24" android:visibility="gone" app:layout_constraintBottom_toBottomOf="@+id/textView2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="@+id/textView" /> </androidx.constraintlayout.widget.ConstraintLayout>

इस लेआउट फ़ाइल में नेविगेशन दृश्य और अन्य घटक हैं जो नेविगेशन दराज के लिए लेआउट बनाते हैं। इस लेआउट को बनाने के लिए, हमें एक खंड वर्ग की आवश्यकता होती है, जो नीचे दिया गया है।

 class BottomNavigationDrawerFragment: BottomSheetDialogFragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.fragment_bottom_navigation_drawer, container, false) } override fun onActivityCreated(savedInstanceState: Bundle?) { super.onActivityCreated(savedInstanceState) navigation_view.setNavigationItemSelectedListener { menuItem -> // Bottom Navigation Drawer menu item clicks when (menuItem.itemId) { // R.id.nav1 -> context!!.toast(getString(R.string.nav1_clicked)) } // Add code here to update the UI based on the item selected // For example, swap UI fragments here true } } }

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

 override fun onOptionsItemSelected(item: MenuItem?): Boolean { when (item!!.itemId) { android.R.id.home -> { val bottomNavDrawerFragment = BottomNavigationDrawerFragment() bottomNavDrawerFragment.show(supportFragmentManager, bottomNavDrawerFragment.tag) } } return true }

यह लेख बॉटमएपबार के बारे में हमारे लेखों की श्रृंखला को समाप्त करता है। आप इस लेख के लिए स्रोत कोड Github पर पा सकते हैं। टिप्पणी करें और प्रश्न पूछें।

B बॉटमऐपबार का कार्यान्वयन। भाग 1: Android के लिए सामग्री घटक
B बॉटमऐपबार का कार्यान्वयन। भाग 2: मेनू और नेविगेशन दराज नियंत्रण

बॉटमएपबार कार्यान्वयन। भाग 3: Android के लिए व्यवहार

व्यवहार

ख़ाका

स्क्रॉल

उमंग

More articles: