BottomNavigationView不是全宽

Question

我正在开发一个Android应用程序,并BottomNavigationView从设计库中实现.我看了很多例子,我无法弄清楚我的布局有什么问题.在BottomNavigationView不显示为全宽.

另一个问题是状态栏颜色未应用.

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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">

<!-- Include the toolbar -->
<include layout="@layout/toolbar"/>

<RelativeLayout android:id="@+id/fragment_container"
            xmlns:android="http://schemas.android.com/apk/res/android"
            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"
    android:layout_gravity="bottom"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main"/>

</android.support.design.widget.CoordinatorLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

编辑:添加了未设置状态颜色的解决方案

android:fitsSystemWindows="true"

(colorPrimaryDark)状态栏颜色不适用于android v21？

Answer 1

BottomNavigationView未显示为全宽.

它不应该.

根据设计指南,动作的宽度可以在80dp和168dp之间变化.您定义的两个动作不足以横向填充整个区域.
(作为旁注,同样根据指导原则,视图应包含三到五个动作.)

如果要填充后面的空间BottomNavigationView,可以将视图的背景颜色设置为与项目背景相同的颜色:

<android.support.design.widget.BottomNavigationView
     android:background="@color/bottom_view_color"
     app:itemBackground="@color/bottom_view_color"

     // .... />

Answer 2

这是可行的.但它会再次出现默认的设计规格,我建议你选择默认的设计规格.

现在来我的解决方案......

将以下尺寸定义为dimens.xml.这些尺寸应该是values,values-large,values-large-land.而且600dp可提高到1000dp以上values-large,values-large-land如果在平板电脑您没有看到这种变化.

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

这就是它!结果会像

这不是一个mazic.

为什么使用此类名称添加维度,值为600dp

两个维度都被使用BottomNavigationMenuView.java(这是用于表示菜单的类BottomNavigationView).下面是代码

public BottomNavigationMenuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    ...
    mInactiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_item_max_width);
    ....
    mActiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_active_item_max_width);
    .....
}

现在,这些值用于创建具有固定宽度的视图,如下所示

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ....
    if (mShiftingMode) {
        final int inactiveCount = count - 1;
        final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
        final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
        final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
        final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
        ...
    } else {
        final int maxAvailable = width / count;
        final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
        .....
    }
    ....
}

要使用activeMaxAvailablealways的值,我将虚拟值设置为mActiveItemMaxWidth(在上面的维度).所以activeWidth会有价值activeMaxAvailable.同样的规则适用inactiveWidth.

因此,当您构建项目design_bottom_navigation_item_max_width并design_bottom_navigation_active_item_max_width定义到design-support-lib时,将由我们定义的维度替换.

代码在最大支持选项(最多5个)上验证.

Answer 3

我建议只使用

android:background="@color/bottom_view_color"

它会将条形显示为全宽,并在用户单击项目时保持纹波效果.

如果你还添加app:itemBackground你会失去涟漪效果.

在你的情况下

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main"/>