Android
BottomNavigationView

Introduktion

Anmärkningar

Grundläggande implementering

BottomNavigationView här lägger du till BottomNavigationView :

1. Lägg till din build.gradle beroende :

compile 'com.android.support:design:25.1.0'

2. Lägg till BottomNavigationView i din layout :

<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"/>

3. Skapa menyn för att fylla vyn:

<!-- 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>

4. Bifoga en lyssnare för klickhändelserna:

//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
            }
        });

Kassademokod vid BottomNavigation-Demo

Anpassning av BottomNavigationView

Obs! Jag antar att du vet om hur du använder BottomNavigationView .

I det här exemplet kommer jag att förklara hur man lägger till väljare för BottomNavigationView . Så du kan ange i UI för ikoner och texter.

Skapa dragbar bottom_navigation_view_selector.xml som

<?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>

Och använd attribut nedan i BottomNavigationView i BottomNavigationView

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

I exemplet ovan har jag använt samma väljare bottom_navigation_view_selector för app:itemIconTint och app:itemTextColor både för att hålla text- och ikonfärger desamma. Men om din design har olika färger för text och ikon, kan du definiera två olika väljare och använda dem.

Output kommer att likna nedan

Hantera aktiverade / inaktiverade tillstånd

Skapa väljare för Aktivera / inaktivera menyalternativ.

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" />

Tillåter mer än 3 menyer

Detta exempel är strikt en lösning eftersom det för närvarande inte finns något sätt att inaktivera ett beteende som kallas ShiftMode.

Skapa en funktion som sådan.

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);
    }
}

Detta inaktiverar skiftbeteendet på menyn när objektantalet överstiger 3 nos.

ANVÄNDANDE

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

Proguard-problem : Lägg till följande rad proguard-konfigurationsfil så annars fungerar det inte.

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

Alternativt kan du skapa en klass och komma åt den här metoden därifrån. Se originalsvar här

OBS : Detta är en reflektionsbaserad HOTFIX , uppdatera detta när Googles supportbibliotek har uppdaterats med ett direktfunktionssamtal.