खोज…


परिचय

नीचे का नेविगेशन दृश्य कुछ समय के लिए सामग्री डिजाइन दिशानिर्देशों में रहा है, लेकिन हमारे लिए इसे अपने ऐप्स में लागू करना आसान नहीं है।

कुछ अनुप्रयोगों ने अपने स्वयं के समाधान का निर्माण किया है, जबकि अन्य लोगों ने काम पाने के लिए तीसरे पक्ष के ओपन-सोर्स पुस्तकालयों पर भरोसा किया है।

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

टिप्पणियों

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

लिंक:

बेसिक इम्प्लीमेंटेशन

BottomNavigationView दिए गए चरणों को जोड़ने के लिए निम्न चरणों का पालन करें:

  1. अपने build.gradle में निर्भरता जोड़ें:
compile 'com.android.support:design:25.1.0'
  1. अपने लेआउट में BottomNavigationView जोड़ें:
<android.support.design.widget.BottomNavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"/>
  1. दृश्य को पॉप्युलेट करने के लिए मेनू बनाएं:
<!-- res/menu/bottom_navigation_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">
    <item
        android:id="@+id/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>
  1. क्लिक ईवेंट के लिए एक श्रोता संलग्न करें:
//Get the view
BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);
//Attach the listener
bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {

                    case R.id.my_action1:
                        //Do something...
                        break;

                    //...
                }
                return true;//returning false disables the Navigation bar animations
            }
        });

बॉटम-न्यूगेशन-डेमो में चेकआउट डेमो कोड

बॉटमवेशन व्यू का अनुकूलन

नोट: मैं यह मान रहा हूं कि आप BottomNavigationView का उपयोग कैसे करें, इसके बारे में जानते हैं।


यह उदाहरण मैं नीचे BottomNavigationView कि कैसे चयन करने के लिए BottomNavigationView । तो आप आइकनों और ग्रंथों के लिए यूआई पर राज्य कर सकते हैं।

के रूप में drawable bottom_navigation_view_selector.xml बनाएं

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/bottom_nv_menu_selected" android:state_checked="true" />
    <item android:color="@color/bottom_nv_menu_default" />
</selector>

और लेआउट फ़ाइल में BottomNavigationView में नीचे की विशेषताओं का उपयोग करें

app:itemIconTint="@drawable/bottom_navigation_view_selector" 
app:itemTextColor="@drawable/bottom_navigation_view_selector"

उपरोक्त उदाहरण में, मैंने app:itemIconTint लिए एक ही चयनकर्ता bottom_navigation_view_selector app:itemIconTint और app:itemTextColor टेक्स्ट और app:itemTextColor दोनों को समान रखने के लिए app:itemTextColor । लेकिन अगर आपके डिज़ाइन में टेक्स्ट और आइकन के लिए अलग-अलग रंग हैं, तो आप 2 अलग-अलग चयनकर्ताओं को परिभाषित कर सकते हैं और उनका उपयोग कर सकते हैं।


आउटपुट नीचे के समान होगा

विकल्प 1

विकल्प 2

विकलांग / विकलांग राज्यों को संभालना

सक्षम / अक्षम मेनू आइटम के लिए चयनकर्ता बनाएं।

selector.xml

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

design.xml

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

3 से अधिक मेनू की अनुमति देना

यह उदाहरण कड़ाई से एक वर्कअराउंड है, वर्तमान में ShiftMode नामक व्यवहार को अक्षम करने का कोई तरीका नहीं है।

जैसे फंक्शन बनाएं।

public static void disableMenuShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            //noinspection RestrictedApi
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            //noinspection RestrictedApi
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

यह आइटम की संख्या 3 से अधिक होने पर मेनू के स्थानांतरण व्यवहार को अक्षम कर देता है।

उपयोग

BottomNavigationView navView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
disableMenuShiftMode(navView);

प्रोगार्ड समस्या : निम्न पंक्ति प्रोफ़िगर कॉन्फ़िगरेशन फ़ाइल जोड़ें और साथ ही, यह काम नहीं करेगा।

-keepclassmembers class android.support.design.internal.BottomNavigationMenuView { 
boolean mShiftingMode; 
}

वैकल्पिक रूप से, आप एक क्लास बना सकते हैं और इस पद्धति को वहां से एक्सेस कर सकते हैं। मूल उत्तर यहां देखें

ध्यान दें : यह एक परावर्तन आधारित HOTFIX है , कृपया इसे Google की सहायता लाइब्रेरी को प्रत्यक्ष फ़ंक्शन कॉल के साथ अपडेट करने के बाद अपडेट करें।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow