Recherche…


Introduction

La vue de navigation du bas a été dans les directives de conception de matériel pendant un certain temps, mais il n'a pas été facile pour nous de l'implémenter dans nos applications.

Certaines applications ont créé leurs propres solutions, tandis que d'autres ont eu recours à des bibliothèques Open Source tierces pour faire le travail.

Maintenant que la bibliothèque d'aide à la conception voit l'ajout de cette barre de navigation inférieure, jetons un coup d'œil à la façon dont nous pouvons l'utiliser!

Remarques

Représente une barre de navigation inférieure standard pour l'application. C'est une implémentation de la navigation de fond de conception matérielle.

Liens:

Implémentation de base

Pour ajouter la BottomNavigationView procédez BottomNavigationView suit:

  1. Ajoutez dans votre build.gradle la dépendance :
compile 'com.android.support:design:25.1.0'
  1. Ajoutez le BottomNavigationView dans votre mise en page :
<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. Créez le menu pour remplir la vue:
<!-- 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. Joignez un écouteur pour les événements de clic:
//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
            }
        });

Checkout demo code à BottomNavigation-Demo

Personnalisation de BottomNavigationView

Remarque: Je suppose que vous savez comment utiliser BottomNavigationView .


Cet exemple explique comment ajouter un sélecteur pour BottomNavigationView . Ainsi, vous pouvez indiquer sur l'interface utilisateur des icônes et des textes.

Créez drawable bottom_navigation_view_selector.xml comme

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

Et utiliser les attributs ci-dessous dans BottomNavigationView dans le fichier de disposition

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

Dans l'exemple ci-dessus, j'ai utilisé le même sélecteur bottom_navigation_view_selector pour app:itemIconTint et app:itemTextColor fois pour conserver les couleurs du texte et des icônes. Mais si votre conception a une couleur différente pour le texte et l'icône, vous pouvez définir 2 sélecteurs différents et les utiliser.


La sortie sera similaire à ci-dessous

Option 1

Option 2

Gestion des états activés / désactivés

Créer un sélecteur pour activer / désactiver l'élément de menu.

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

Autoriser plus de 3 menus

Cet exemple est strictement une solution de contournement, car il n'existe actuellement aucun moyen de désactiver un comportement appelé ShiftMode.

Créez une fonction en tant que telle.

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

Cela désactive le comportement Shifting du menu lorsque le nombre d'éléments dépasse 3 ns.

USAGE

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

Proguard Problème : Ajouter le fichier de configuration de ligne suivant aussi, sinon cela ne fonctionnerait pas.

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

Vous pouvez également créer une classe et accéder à cette méthode à partir de là. Voir l'original Répondre ici

REMARQUE : Ceci est un HOTFIX basé sur Reflection , veuillez le mettre à jour une fois que la bibliothèque de support de Google est mise à jour avec un appel de fonction direct.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow