Android
BottomNavigationView

Invoering

Opmerkingen

Basisimplementatie

Volg deze stappen om de BottomNavigationView toe te voegen:

1. Voeg uw build.gradle de afhankelijkheid toe :

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

2. Voeg de BottomNavigationView aan uw lay-out :

<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. Maak het menu om de weergave te vullen:

<!-- 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. Voeg een luisteraar toe voor de klikgebeurtenissen:

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

Afrekenen demo-code op BottomNavigation-Demo

Aanpassing van BottomNavigationView

Opmerking: ik ga ervan uit dat u weet hoe u BottomNavigationView moet gebruiken.

In dit voorbeeld leg ik uit hoe je selector voor BottomNavigationView kunt toevoegen. U kunt dus op de gebruikersinterface voor pictogrammen en teksten vermelden.

Maak een bottom_navigation_view_selector.xml als

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

En gebruik onderstaande kenmerken in BottomNavigationView in het lay- BottomNavigationView

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

In het bovenstaande voorbeeld heb ik dezelfde selector bottom_navigation_view_selector voor app:itemIconTint en app:itemTextColor om tekst en pictogramkleuren hetzelfde te houden. Maar als uw ontwerp een andere kleur heeft voor tekst en pictogram, kunt u 2 verschillende selectors definiëren en deze gebruiken.

De uitvoer is vergelijkbaar met hieronder

Omgaan met ingeschakelde / uitgeschakelde staten

Maak selector voor menu-item inschakelen / uitschakelen.

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

Toestaan van meer dan 3 menu's

Dit voorbeeld is strikt een oplossing, omdat er momenteel geen manier is om een gedrag dat bekend staat als ShiftMode uit te schakelen.

Maak een functie als zodanig.

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

Dit schakelt het verschuivingsgedrag van het menu uit wanneer het aantal items groter is dan 3 nrs.

GEBRUIK

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

Probleem met Proguard : Voeg ook het volgende configuratiebestand voor de regel proguard toe, anders zou dit niet werken.

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

U kunt ook een klasse maken en deze methode vanaf daar openen. Zie origineel antwoord hier

OPMERKING : dit is een op reflectie gebaseerde HOTFIX . Werk deze bij zodra de ondersteuningsbibliotheek van Google is bijgewerkt met een directe functie-aanroep.