NavigationView にフッターを追加する方法 - Android サポート デザイン ライブラリ? 質問する

NavigationView にフッターを追加する方法 - Android サポート デザイン ライブラリ? 質問する

フッター設定とプロフィール項目を に設定するにはどうすればよいですかNavitationView? を、受信トレイのメールナビゲーションドロワーのように表示します。NavitationView項目はメニューリソースによって膨らんでいますが、下部の項目をメニューリソースに設定する方法や、カスタムビューを または下部オフセットに設定する方法がわかりませんNavigationView。これをフッタービューとして配置しようとしました<LinearLayout...>が、小さな画面ではフッターが項目の上に配置され、メニューをスクロールできません。フッターのパディングを に設定しようとしましたNavigationViewが、フッターにもパディングが適用されます。

これは小さな画面ではスクロールしません:

<android.support.design.widget.NavigationView
    android:id="@+id/drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/kuona_drawer_header"
    app:menu="@menu/drawer">

    <LinearLayout...>

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

スクロールしない

これはスクロールしますが、フッターはメニュー項目の上にあります。

<android.support.design.widget.NavigationView
    android:id="@+id/drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:paddingBottom="96dp"
    app:headerLayout="@layout/kuona_drawer_header"
    app:menu="@menu/drawer">

    <LinearLayout...>

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

ここに画像の説明を入力してください

引き出しメニューres/menu/drawer.xmlファイル:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/action_current_list"
            android:checked="true"
            android:icon="@drawable/ic_current_list"
            android:title="@string/current_list" />
        <item
            android:id="@+id/action_manage_lists"
            android:icon="@drawable/ic_my_lists"
            android:title="@string/my_lists" />
        <item
            android:id="@+id/action_search_products"
            android:icon="@drawable/ic_search_black_24dp"
            android:title="@string/search_products" />
        <item
            android:id="@+id/action_deals"
            android:icon="@drawable/ic_product_promo"
            android:title="@string/deals" />
    </group>
</menu>

ベストアンサー1

ナビゲーション メニューに固定の (スクロールしない) フッターが必要な場合は、投稿したように、NavigationView を別のレイアウトにラップする必要があります。NavigationView は FrameLayout のように機能するため、NavigationView メニュー項目の上に内部レイアウトが「積み重ね」られることになります。フッター項目に LinearLayout を使用して配置する方法の 1 つを次に示します。

固定フッター

<android.support.design.widget.NavigationView
    android:id="@+id/drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:clickable="true"
        android:orientation="vertical">
        <TextView
            android:id="@+id/footer_item_1"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center"
            android:text="Footer Item 1" />
        <TextView
            android:id="@+id/footer_item_2"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center"
            android:text="Footer Item 2" />
    </LinearLayout>

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

この例では TextView を使用しましたが、フッター ビューには任意のものを使用できます。フッター項目がメニューの下部と重ならないようにするには、メニュー リソース ファイルの末尾にダミー項目をいくつか追加します (これらは「スペーサー」のように機能します)。

res/メニュー/引き出し.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:id="@+id/nav_item_1"
            android:icon="@drawable/ic_nav_item_1"
            android:title="Nav Item 1" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@drawable/ic_nav_item_2"
            android:title="Nav Item 2" />
        <item
            android:id="@+id/nav_item_3"
            android:icon="@drawable/ic_nav_item_3"
            android:title="Nav Item 3" />
        <item
            android:id="@+id/nav_item_4"
            android:icon="@drawable/ic_nav_item_4"
            android:title="Nav Item 4" />
        <item
            android:id="@+id/footer_spacer_1"
            android:checkable="false"
            android:enabled="false"
            android:orderInCategory="200"
            android:title="" />
        <item
            android:id="@+id/footer_spacer_2"
            android:checkable="false"
            android:enabled="false"
            android:orderInCategory="200"
            android:title="" />
    </group>
</menu>

最後に、実際のフッター ビューのアクティビティにクリック リスナーを追加することを忘れないでください。

...
// Click listener for nav footer.
View navFooter1 = findViewById(R.id.footer_item_1);
navFooter1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Do footer action
    }
});
View navFooter2 = findViewById(R.id.footer_item_2);
navFooter2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Do footer action
    }
});
...

スクロールフッター

ただし、フッターをNavigationViewの残りの部分と一緒にスクロールできるようにすると、物事が簡単になります(追加のレイアウトやクリックリスナーは必要ありません)。フッター項目をメニューリソースファイルに一意のものとして追加するだけです<group>(これにより、区切り線)、すべてが自動的に処理され、一緒にスクロールします。

res/メニュー/引き出し.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/nav_menu">
        <item
            android:id="@+id/nav_item_1"
            android:icon="@drawable/ic_nav_item_1"
            android:title="Nav Item 1" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@drawable/ic_nav_item_2"
            android:title="Nav Item 2" />
        <item
            android:id="@+id/nav_item_3"
            android:icon="@drawable/ic_nav_item_3"
            android:title="Nav Item 3" />
        <item
            android:id="@+id/nav_item_4"
            android:icon="@drawable/ic_nav_item_4"
            android:title="Nav Item 4" />
    </group>
    <group android:id="@+id/nav_footer">
        <item
            android:id="@+id/nav_footer_1"
            android:icon="@drawable/ic_footer_item_1"
            android:title="Footer Item 1" />
        <item
            android:id="@+id/nav_footer_2"
            android:icon="@drawable/ic_footer_item_2"
            android:title="Footer Item 2" />
    </group>
</menu>

おすすめ記事