Question

我确信所有人都听说过bottom navigation添加到材料设计指南中。我打算将它添加到我的应用程序中。但是，我不确定接近它的最佳方法是什么。什么样的观点最好显示底部栏？

Answer 1

LinearLayout，其视图权重相等，水平方向。 LinearLayout中的按钮，drawableTop设置为选择的图标。

将其添加到底部：

在FrameLayout或CoordinatorLayout中，您可以使用layout_gravity="bottom"或在RelativeLayout中使用android:layout_alignParentBottom="true"

将其添加到底部

尺寸，字体大小等：

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

高度：56dp

图标：24 x 24dp

内容对齐：
  文本和图标水平居中   图。

填充：


图标上方6dp（活动视图），图标上方8dp（非活动视图）

10dp under text

12dp左右文字


文字标签：



Roboto Regular 14sp（活动视图）



Roboto Regular 12sp（非活动视图）

隐藏滚动

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

<强>更新

现在有一个可用的开源库： https://github.com/roughike/BottomBar

更新2

现在是part of the support lib。

Answer 2

BottomNavigationView 是 Google支持图书馆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事件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中占用更多空间，而且到目前为止看起来有点奇怪，谷歌可能会故意这样做。

此行为由BottomNavigationView的ShiftingMode属性定义，该属性目前无法以简单的方式禁用，因为其api不是公共的。但是反思有一种方法可以做到这一点：

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 3

由于android支持库25你有一个原生BottomNavigationView，它与材料设计指南中提到的相同。
首先，我们需要更新我们的依赖性：

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

接下来，我们只需要将Bottom Navigation View小部件添加到我们想要的布局文件中。请记住，这应该与屏幕底部对齐，所有内容都显示在屏幕上方。我们可以这样添加这个视图：

<?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

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

3 个答案: