Szukaj…


Wprowadzenie

Dolny widok nawigacji znajduje się w wytycznych dotyczących projektowania materiałów od pewnego czasu, ale nie było nam łatwo zaimplementować go w naszych aplikacjach.

Niektóre aplikacje zbudowały własne rozwiązania, podczas gdy inne polegały na zewnętrznych bibliotekach open source do wykonania zadania.

Teraz biblioteka wsparcia projektowania widzi dodawanie tego dolnego paska nawigacyjnego, rzućmy okiem na to, jak możemy go używać!

Uwagi

Reprezentuje standardowy dolny pasek nawigacji dla aplikacji. Jest to implementacja nawigacji w dolnej części projektu materiału.

Spinki do mankietów:

Podstawowa implementacja

Aby dodać BottomNavigationView wykonaj następujące kroki:

  1. Dodaj w swoim build.gradle zależność :
compile 'com.android.support:design:25.1.0'
  1. Dodaj BottomNavigationView w swoim układzie :
<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. Utwórz menu, aby wypełnić widok:
<!-- 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. Dołącz detektor zdarzeń kliknięcia:
//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
            }
        });

Sprawdź kod demonstracyjny na BottomNavigation-Demo

Dostosowywanie BottomNavigationView

Uwaga: Zakładam, że wiesz o tym, jak korzystać z BottomNavigationView .


W tym przykładzie wyjaśnię, jak dodać selektor dla BottomNavigationView . Możesz więc podać w interfejsie użytkownika ikony i teksty.

Utwórz rysunkowy bottom_navigation_view_selector.xml jako

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

I użyj poniższych atrybutów do BottomNavigationView w pliku układu

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

W powyższym przykładzie użyłem tego samego selektora bottom_navigation_view_selector dla app:itemIconTint i app:itemTextColor aby zachować te same kolory tekstu i ikon. Ale jeśli twój projekt ma inny kolor tekstu i ikony, możesz zdefiniować 2 różne selektory i użyć ich.


Dane wyjściowe będą podobne do poniższych

opcja 1

Opcja 2

Obsługa stanów Włączone / Wyłączone

Utwórz selektor dla opcji Włącz / Wyłącz element 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" />

Zezwalanie na więcej niż 3 menu

Ten przykład jest ściśle obejściem, ponieważ obecnie nie ma możliwości wyłączenia zachowania znanego jako ShiftMode.

Utwórz funkcję jako taką.

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

Wyłącza to zachowanie przesuwania się menu, gdy liczba elementów przekracza 3 numery.

STOSOWANIE

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

Problem z proguardem : dodaj również plik konfiguracyjny proguarda z poniższej linii, bo inaczej to nie zadziała.

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

Alternatywnie możesz utworzyć klasę i uzyskać dostęp do tej metody. Zobacz oryginalną odpowiedź tutaj

UWAGA : Jest to HOTFIX oparty na Refleksji, zaktualizuj go po aktualizacji biblioteki pomocy Google za pomocą bezpośredniego wywołania funkcji.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow