Android
BottomNavigationView
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:
- Dodaj w swoim
build.gradle
zależność :
compile 'com.android.support:design:25.1.0'
- 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"/>
- 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>
- 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
dlaapp:itemIconTint
iapp: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
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.