web-dev-qa-db-ja.com

BottomNavigationViewは全幅ではありません

私はAndroidアプリに取り組んでおり、デザインライブラリからBottomNavigationViewを実装しています。多くの例を見てきましたが、レイアウトの何が問題なのかわかりません。 BottomNavigationViewは全角で表示されません。

別の問題は、ステータスバーの色が適用されないことです。

enter image description here

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>

Edit：Status Colorが設定されていない場合のソリューションを追加

Android:fitsSystemWindows="true"

（colorPrimaryDark）ステータスバーの色が機能しないAndroid v21？

androidmaterial-designbottom-sheet
30
midhunhk

BottomNavigationViewは全幅として表示されません。

それは想定されていません。

設計ガイドライン によると、アクションの幅は80dpから168dpの間で変化します。定義した2つのアクションは、領域全体を水平方向に埋めるには不十分です。
（補足として、ガイドラインによると、ビューには3〜5個のアクションが含まれている必要があります。）

BottomNavigationViewの背後のスペースを埋めたい場合、ビューの背景色をアイテムの背景と同じ色に設定できます。

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

     // .... />
75
Andy Res

それは実行可能です。しかし、それは デフォルトの設計仕様 に反し、 デフォルトの設計仕様 を使用することをお勧めします。

今私のソリューションに来て...

以下のディメンションを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>

以上です！！！結果は のようになりますenter image description here

それはマジックではありません。

このような名前と値でディメンションが追加された理由は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);
        .....
    }
    ....
}

常にactiveMaxAvailableの値を使用するには、ダミー値をmActiveItemMaxWidthに設定します（上記の次元）。したがって、activeWidthの値はactiveMaxAvailableになります。 inactiveWidthにも同じルールが適用されます。

したがって、プロジェクトをビルドすると、design-support-libに定義されたdesign_bottom_navigation_item_max_widthおよびdesign_bottom_navigation_active_item_max_widthは、当社が定義したディメンションに置き換えられます。

コードは、サポートされている最大オプション（最大5）でも検証されました。

21
Pankaj Kumar

使用することをお勧めします

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