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) status bar color not working on android v21?

Answer 1

The BottomNavigationView is not displayed as full width.

这是不应该的。

根据 design guidelines，动作的宽度可以在 80dp 和 168dp 之间变化。您定义的两个动作不足以水平填充整个区域。
（作为旁注，同样根据指南，视图应包含三到五个操作。）

如果要填充BottomNavigationView后面的space，可以将视图的背景颜色设置为与项目背景颜色相同：

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

     // .... />

Answer 2

我建议只使用

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"/>

Answer 3

这是可行的。但它会反对 default design specs, and I will suggest you to go with default design specs.

Now coming to my solution...

将以下维度定义为dimens.xml。这些尺寸应在 values、values-large、values-large-land 范围内。 600dp 可以在 values-large、values-large-land 中增加到 1000dp 或更多，如果在平板电脑中您没有看到此更改。

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

就是这样！！！结果会像

这不是魔法

Why dimensions has been added with such name and value is 600dp

两个维度都被 BottomNavigationMenuView.java 使用（即 class 用于表示 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);
        .....
    }
    ....
}

为了始终使用 activeMaxAvailable 的值，我将虚拟值设置为 mActiveItemMaxWidth（在上面的维度中）。所以 activeWidth 会有 activeMaxAvailable 的值。同样的规则适用于 inactiveWidth.

所以当你构建项目时，design_bottom_navigation_item_max_width和design_bottom_navigation_active_item_max_width定义进入 design-support-lib，将由我们定义的尺寸替换。

代码也验证了最大支持选项（最多 5 个）。

Answer 4

这是我的解决方案：

app:itemHorizontalTranslationEnabled = "false"

默认为真。这会“扩展”项目以适应整个宽度。

BottomNavigationView 不是全宽

BottomNavigationView is not full width

android

material-design

bottom-sheet