Android
BottomNavigationView
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:
- Ajoutez dans votre
build.gradle
la dépendance :
compile 'com.android.support:design:25.1.0'
- 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"/>
- 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>
- 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
pourapp:itemIconTint
etapp: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
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.