新材料设计底部导航应使用哪个视图？

Question

我相信你们都听说过将bottom navigation添加到材料设计指南中。我正计划将它添加到我的应用程序中。然而，我不确定最好的方法是什么。哪种视图最适合显示底部栏？

Answer 1

BottomNavigationView是谷歌支持库25中添加的一个组件。它提供了应用程序中顶层视图之间的快速导航。当应用程序有三到五个顶级目标时，应该使用它。我的实现包括在选择菜单项时在片段之间进行切换。

添加到项目模块的build.gradle中

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

在布局的xml中创建BottomNavigationView，并为其提供菜单资源：

<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。此文件用于在BottomNavigationView中提供MenuItems

<?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 Events OnNavigationItemSelectedListener和OnNavigationItemReselectedListener on菜单项设置监听器-

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中占用更多空间，到目前为止，它看起来有点奇怪，可能是谷歌故意让它保持这样的。

​

​

这个行为是由BottomNavigationView的ShiftingMode属性定义的，到目前为止还不能直接禁用，因为它的接口不是公共的。但是有一种方法可以通过反射来实现：

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

Answer 2

具有相同视图权重的LinearLayout，水平方向。drawableTop设置为所选图标的LinearLayout中的按钮。

将其添加到底部：

在FrameLayout或CoordinatorLayout中，您可以使用layout_gravity="bottom"将其添加到底部，或者在RelativeLayout中使用android:layout_alignParentBottom="true"

尺寸、字体大小等：

有关页边距和字体大小等信息，请参阅material design bottom navigation specs：

高度: 56dp

图标: 24 x 24dp

内容对齐：

文本和图标在视图中水平居中。

填充：

• 6dp上方图标(活动视图)、8dp上方图标(非活动视图)
• 10dp下的text
• 12dp text

的左侧和右侧

文本标签：

• Roboto常规14sp (活动视图)
• Roboto常规12sp (非活动视图)

滚动时隐藏

使用android设计支持库中的CoordinatorLayout。将此LinearLayout作为子对象添加到xml中，并将Behavior设置为在滚动时隐藏。

更新

现在有一个为规范而构建的开源库：https://github.com/roughike/BottomBar

更新2

现在是part of the support lib。

Answer 3

从android support library 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