Поиск…


Вступление

В течение некоторого времени представление «Нижняя навигация» находится в руководстве по разработке материалов, но нам было нелегко реализовать его в наших приложениях.

В некоторых приложениях созданы собственные решения, в то время как другие полагаются на сторонние библиотеки с открытым исходным кодом, чтобы выполнить эту работу.

Теперь библиотека поддержки дизайна увидит добавление этой нижней навигационной панели, давайте погрузиться в то, как мы можем ее использовать!

замечания

Представляет стандартную нижнюю навигационную панель для приложения. Это реализация навигации по дну материального дизайна.

Ссылки:

Основная реализация

Чтобы добавить BottomNavigationView выполните следующие действия:

  1. Добавьте в свой build.gradle зависимость :
compile 'com.android.support:design:25.1.0'
  1. Добавьте 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"/>
  1. Создайте меню, чтобы заполнить вид:
<!-- 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. Прикрепите слушателя к событиям щелчка:
//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 разных селектора и использовать их.


Результат будет похож на приведенный ниже

Опция 1

Вариант 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 будет обновлена ​​прямым вызовом функции.



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow