Android
BottomNavigationView
Поиск…
Вступление
В течение некоторого времени представление «Нижняя навигация» находится в руководстве по разработке материалов, но нам было нелегко реализовать его в наших приложениях.
В некоторых приложениях созданы собственные решения, в то время как другие полагаются на сторонние библиотеки с открытым исходным кодом, чтобы выполнить эту работу.
Теперь библиотека поддержки дизайна увидит добавление этой нижней навигационной панели, давайте погрузиться в то, как мы можем ее использовать!
замечания
Представляет стандартную нижнюю навигационную панель для приложения. Это реализация навигации по дну материального дизайна.
Ссылки:
Основная реализация
Чтобы добавить BottomNavigationView
выполните следующие действия:
- Добавьте в свой
build.gradle
зависимость :
compile 'com.android.support:design:25.1.0'
- Добавьте
BottomNavigationView
в свой макет :
<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"/>
- Создайте меню, чтобы заполнить вид:
<!-- 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>
- Прикрепите слушателя к событиям щелчка:
//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 в BottomNavigation-Demo
Настройка BottomNavigationView
Примечание. Я предполагаю, что вы знаете, как использовать BottomNavigationView
.
В этом примере я объясню, как добавить селектор для BottomNavigationView
. Таким образом, вы можете указать в пользовательском интерфейсе иконки и тексты.
Создайте bottom_navigation_view_selector.xml
как
<?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>
И используйте ниже атрибуты в BottomNavigationView
в файле макета
app:itemIconTint="@drawable/bottom_navigation_view_selector"
app:itemTextColor="@drawable/bottom_navigation_view_selector"
В приведенном выше примере я использовал тот же селектор
bottom_navigation_view_selector
дляapp:itemIconTint
иapp:itemTextColor
как для сохранения цвета текста, так и значка. Но если ваш дизайн имеет разный цвет для текста и значка, вы можете определить 2 разных селектора и использовать их.
Результат будет похож на приведенный ниже
Управление включенными / отключенными состояниями
Создать селектор для включения / выключения пункта меню.
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" />
Разрешение более 3 меню
Этот пример является строго временным решением, поскольку в настоящее время нет способа отключить поведение, известное как ShiftMode.
Создайте функцию как таковую.
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);
}
}
Это отключает поведение Shifting меню, когда количество элементов превышает 3 нс.
ИСПОЛЬЗОВАНИЕ
BottomNavigationView navView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
disableMenuShiftMode(navView);
Proguard Issue : добавьте следующий конфигурационный файл строки proguard, а также, это не сработает.
-keepclassmembers class android.support.design.internal.BottomNavigationMenuView {
boolean mShiftingMode;
}
Кроме того, вы можете создать класс и получить доступ к этому методу. Посмотреть оригинальный ответ
ПРИМЕЧАНИЕ . Это HOTFIX на основе отражения, пожалуйста, обновите это, как только библиотека поддержки Google будет обновлена прямым вызовом функции.