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

Question

我相信你们都听说过在材料设计指南中加入底部导航.我打算将它添加到我的应用程序中.但是,我不确定接近它的最佳方法是什么.什么样的观点最好显示底部栏？

Answer 1

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(非活动视图)

在滚动上隐藏

使用android设计支持库中的CoordinatorLayout.将此LinearLayout作为子项添加到xml中,并将" 行为"设置为在滚动时隐藏.

更新

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

更新2

它现在是支持库的一部分.

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不公开.但是有一种方法可以通过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