Какой вид следует использовать для новой навигации по конструкции материалов?

Ответ 1

BottomNavigationView - это компонент, добавленный в Библиотека поддержки Google 25. Он обеспечивает быструю навигацию между представлениями верхнего уровня в приложении. Он должен использоваться, когда приложение имеет от трех до пяти адресов верхнего уровня. Моя реализация включает в себя переключение между фрагментами при выборе элементов меню.

Добавить в build.gradle вашего модуля проекта

compile'com.android.support:design:25.3.1'

Создайте BottomNavigationView в xml вашего макета и предоставите ему ресурс меню:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

Создайте файл здесь navigation.xml в папке ресурса меню. Этот файл используется для предоставления MenuItems в BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
   android:id="@+id/navigation_home"
   android:icon="@drawable/ic_home_black_24dp"
   android:title="@string/title_home" />
<item
   android:id="@+id/navigation_dashboard"
   android:icon="@drawable/ic_dashboard_black_24dp"
   android:title="@string/title_dashboard" />

<item
   android:id="@+id/navigation_notifications"
   android:icon="@drawable/ic_notifications_black_24dp"
   android:title="@string/title_notifications" />

<item
   android:id="@+id/navigation_settings"
   android:icon="@drawable/ic_settings_black_24dp"
   android:title="@string/title_settings" />

</menu>

Со всем в строках этот много код показывает BottomBar при запуске приложения. Теперь давайте установить прослушиватель для событий Click OnNavigationItemSelectedListener и OnNavigationItemReselectedListener на элементах меню -

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()) {
            case R.id.navigation_home:
                return true;

            case R.id.navigation_dashboard:
                return true;

            case R.id.navigation_notifications:
                return true;

            case R.id.navigation_settings:
                return true;

        }
        return true;
    }

};

private BottomNavigationView.OnNavigationItemReselectedListener mOnNavigationItemReselectedListener = new BottomNavigationView.OnNavigationItemReselectedListener() {
    @Override
    public void onNavigationItemReselected(@NonNull MenuItem item) {

        switch (item.getItemId()) {

            case R.id.navigation_home:
                Log.d(TAG, "Navigation Reselected ===");
                break;

            case R.id.navigation_dashboard:
                Log.d(TAG, "Dashboard Reselected ===");
                break;

            case R.id.navigation_notifications:
                Log.d(TAG, "Notification Reselected ===");
                break;

            case R.id.navigation_settings:
                Log.d(TAG, "Settings Reselected ===");
                break;
        }

    }
};

bottomNavigationView.setOnNavigationItemSelectedListener
(mOnNavigationItemSelectedListener);

bottomNavigationView.setOnNavigationItemReselectedListener
(mOnNavigationItemReselectedListener);

Если нет элементов меню больше 3, то выбранный элемент займет больше места в BottomNavView, и на данный момент он выглядит немного странным, может быть намеренно, Google сохранил его таким образом.

Это поведение определяется свойством ShiftingMode метода BottomNavigationView, которое нельзя отключить прямолинейным способом, поскольку его api не является общедоступным. Но через Reflection есть способ сделать это:

BottomNavigationMenuView menuView = (BottomNavigationMenuView)  
btmNavigationView.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);
        item.setShiftingMode(false);
        //To update view, set the checked value again
        item.setChecked(item.getItemData().isChecked());
        }


    } catch (NoSuchFieldException e) {
        e.printStackTrace();

    } catch (IllegalAccessException e) {
        e.printStackTrace();

    } catch (SecurityException e) {
        e.printStackTrace();
    }

После вызова выше результата кода:

Для получения дополнительной информации ознакомьтесь с моим проектом Github: https://github.com/pmahsky/BottomNavigationViewDemo

Ответ 2

A LinearLayout с равными весами для его представлений, горизонтальная ориентация. Кнопки в LinearLayout с drawableTop установлены на значок выбора.

Добавьте его к нижней части:

В FrameLayout или CoordinatorLayout вы можете добавить его к нижней части с помощью layout_gravity="bottom" или в RelativeLayout использовать android:layout_alignParentBottom="true"

Размеры, размер шрифта и т.д.:

Обратитесь к спецификациям нижней части конструкции материала об этом для полей и размеров шрифтов и т.д.:

Высота: 56dp

Значок: 24 x 24dp

Сопоставление контента:
Текст и значок центрируются по горизонтали внутри вид.

Обивка:

• 6dp выше значка (активный вид), 8dp выше значка (неактивное представление)
• 10dp в тексте
• 12dp влево и вправо от текста

Текстовая метка:

• Roboto Regular 14sp (активный просмотр)

• Roboto Regular 12sp (неактивное представление)

Скрыть на прокрутке

Используйте CoordinatorLayout из библиотеки поддержки дизайна Android. Добавьте LinearLayout в качестве дочернего элемента в xml и установите Behavior, чтобы скрыть свиток.

Обновление

Теперь доступна библиотека с открытым исходным кодом, которая построена по спецификации: https://github.com/roughike/BottomBar

Обновление 2

Теперь часть поддержки lib.

Ответ 3

С поддержкой библиотеки поддержки android 25 у вас есть родной метод BottomNavigationView, который совпадает с рекомендациями по материальному дизайну.
Для начала нам нужно обновить нашу зависимость:

compile 'com.android.support:design:25.0.0'

Далее нам просто нужно добавить виджет "Вид снизу" в наш желаемый файл макета. Помните, что это должно быть выровнено с нижней частью экрана с отображением всего содержимого над ним. Мы можем добавить это представление так:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <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="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Более подробную статью можно найти здесь: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.bgoj4br93