Android
BottomNavigationView
Ricerca…
introduzione
La Bottom Navigation View è stata per qualche tempo nelle linee guida sulla progettazione dei materiali, ma non è stato facile per noi implementarla nelle nostre app.
Alcune applicazioni hanno creato le proprie soluzioni, mentre altre si sono affidate a librerie open source di terze parti per portare a termine il lavoro.
Ora la libreria di supporto del design sta vedendo l'aggiunta di questa barra di navigazione in basso, facciamo un tuffo nel modo in cui possiamo usarlo!
Osservazioni
Rappresenta una barra di navigazione in basso standard per l'applicazione. Si tratta di un'implementazione della navigazione bottom design del materiale.
link:
Implementazione di base
Per aggiungere il BottomNavigationView
attenersi alla seguente BottomNavigationView
:
- Aggiungi la
build.gradle
alla dipendenza :
compile 'com.android.support:design:25.1.0'
- Aggiungi il
BottomNavigationView
nel tuo 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"/>
- Crea il menu per popolare la vista:
<!-- 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>
- Allegare un listener per gli eventi click:
//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
}
});
Acquista il codice demo su BottomNavigation-Demo
Personalizzazione di BottomNavigationView
Nota: presumo che tu sappia come utilizzare BottomNavigationView
.
In questo esempio spiegherò come aggiungere selector per BottomNavigationView
. Quindi puoi indicare sull'interfaccia utente per icone e testi.
Crea disegnabile bottom_navigation_view_selector.xml
come
<?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>
E usa gli attributi sotto in BottomNavigationView
nel file di layout
app:itemIconTint="@drawable/bottom_navigation_view_selector"
app:itemTextColor="@drawable/bottom_navigation_view_selector"
Nell'esempio precedente, ho utilizzato lo stesso selettore
bottom_navigation_view_selector
perapp:itemIconTint
eapp:itemTextColor
per mantenere i colori di testo e icone uguali. Ma se il tuo disegno ha colori diversi per il testo e l'icona, puoi definire 2 selettori diversi e usarli.
L'output sarà simile al seguente
Gestione degli stati abilitati / disabilitati
Crea un selettore per abilitare / disabilitare la voce di 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" />
Consentendo più di 3 menu
Questo esempio è strettamente una soluzione poiché, attualmente non è possibile disattivare un comportamento noto come ShiftMode.
Crea una funzione in quanto tale.
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);
}
}
Questo disabilita il comportamento Shifting del menu quando il numero di oggetti supera i 3 n.
USO
BottomNavigationView navView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
disableMenuShiftMode(navView);
Problema di Proguard : aggiungi anche il seguente file di configurazione proguard, altrimenti non funzionerebbe.
-keepclassmembers class android.support.design.internal.BottomNavigationMenuView {
boolean mShiftingMode;
}
In alternativa, puoi creare una classe e accedere a questo metodo da lì. Vedere la risposta originale qui
NOTA : questo è un HOTFIX basato su Reflection , si prega di aggiornare questo una volta che la libreria di supporto di Google viene aggiornata con una chiamata di funzione diretta.