如何将页脚添加到 NavigationView - Android 支持设计库? [英] How to add footer to NavigationView - Android support design library?

查看:27
本文介绍了如何将页脚添加到 NavigationView - Android 支持设计库?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何将页脚设置和配置文件项设置为 NavitationView?看起来像电子邮件导航抽屉的收件箱.NavitationView 项目由菜单资源膨胀,但我不知道如何将底部项目设置为菜单资源,或者如何将自定义视图设置为 NavigationView 或底部偏移?我试过把这个 <LinearLayout...> 作为页脚视图,但在小屏幕上页脚放在项目上,我无法滚动菜单,我试图将页脚填充设置为NavigationView,但页脚也需要填充.

这不是在小屏幕上滚动:

),一切都会自动处理并一起滚动:

res/menu/drawer.xml

<group android:id="@+id/nav_menu"><项目android:id="@+id/nav_item_1"android:icon="@drawable/ic_nav_item_1"android:title="导航项目 1"/><项目android:id="@+id/nav_item_2"android:icon="@drawable/ic_nav_item_2"android:title="导航项目 2"/><项目android:id="@+id/nav_item_3"android:icon="@drawable/ic_nav_item_3"android:title="导航项目 3"/><项目android:id="@+id/nav_item_4"android:icon="@drawable/ic_nav_item_4"android:title="导航项目 4"/></组><group android:id="@+id/nav_footer"><项目android:id="@+id/nav_footer_1"android:icon="@drawable/ic_footer_item_1"android:title="页脚项目 1"/><项目android:id="@+id/nav_footer_2"android:icon="@drawable/ic_footer_item_2"android:title="页脚项目 2"/></组></菜单>

How can I set footer settings and profile items to NavitationView? to looks like the Inbox by email navigation drawer. The NavitationView items are inflated by menu resource, but I don't know how to set bottom items to a menu resource, or how can I set a custom view to NavigationView or an bottom offset? I have tried putting this <LinearLayout...> as footer view, but on small screens the footer puts over the items and I cant scroll the menu, I have tried to set a footer padding to NavigationView, but the footer takes the padding too.

This is not scrolling on small screens:

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

This scrolls, but the footer its over the menu items:

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

Drawer menu res/menu/drawer.xml file:

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

解决方案

If you want a fixed (non-scrolling) footer in your navigation menu, you need wrap NavigationView around another layout, like you've posted. NavigationView works like FrameLayout, so this ends up "stacking" the inner layout on top of the NavigationView menu items. Here's one way to arrange it, using LinearLayout for the footer items:

Fixed Footer

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

I used TextViews in this example, but you can use whatever you want for the footer views. To avoid the footer items overlapping with the bottom of the menu, add some dummy items to the end of your menu resource file (these will act like "spacers"):

res/menu/drawer.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>

Lastly, don't forget to add click listeners in your Activity for the actual footer views:

...
// 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
    }
});
...

Scrolling Footer

If you allow the footer to scroll with the rest of the NavigationView though, it makes things simpler (no additional layouts or click listeners). Simply add the footer items to your menu resource file as a unique <group> (this will create a separator line), and everything will be handled automatically and scroll together:

res/menu/drawer.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>

这篇关于如何将页脚添加到 NavigationView - Android 支持设计库?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆