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.

Implementazione di base

Per aggiungere il BottomNavigationView attenersi alla seguente BottomNavigationView :

  1. Aggiungi la build.gradle alla dipendenza :
compile 'com.android.support:design:25.1.0'
  1. 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"/>
  1. 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>
  1. 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 per app:itemIconTint e app: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

opzione 1

opzione 2

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.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow