如何使用菜单布局将自定义项添加到 NavigationView?

Posted

技术标签:

【中文标题】如何使用菜单布局将自定义项添加到 NavigationView?【英文标题】:How can I add a custom item to a NavigationView with a menu layout? 【发布时间】:2015-08-24 01:58:22 【问题描述】:

我一直在尝试通过使用 android 设计支持库中的新 NavigationView 类来简化一些抽屉式导航代码。如果您只想要左侧的图标和右侧的文本(如文档中的示例),它会很好用,但如果我想在布局中添加一个自定义视图,其中有一个 android.support.v7.widget.SwitchCompat 就像在 Google Play 中一样电影应用(见下方截图)?

我尝试使用actionLayout 属性来指定自定义布局文件,如下面的示例代码所示,但是该属性似乎被忽略了,因为它不起作用。

res/menu/navigation_drawer.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1"
            android:checkableBehavior="single">
        <item
            android:id="@+id/nav_screen1"
            android:icon="@drawable/ic_list_black_24dp"
            android:title="Screen 1" />
        <item
            android:id="@+id/nav_screen2"
            android:icon="@drawable/ic_search_black_24dp"
            android:title="Screen2"/>
    </group>
    <group  android:id="@+id/group2">
        <item
            android:id="@+id/nav_custom"
            android:icon="@drawable/custom_icon_24dp"
            app:actionLayout="@layout/nav_drawer_switch"
            android:title="Custom item with switch"/>
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="Settings"/>
    </group>
</menu>

res/layout/nav_drawer_switch.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_
    android:layout_>
    <android.support.v7.widget.SwitchCompat
        android:layout_
        android:layout_
        android:text="Custom item with switch"/>
</LinearLayout>

我怎样才能让它工作?理想情况下,我想在仍然使用我的菜单布局的同时添加自定义视图,但如果不使用粗略的 hack (比如利用支持库生成的现有布局)这是不可能的,那么我想知道代码量最少的解决方案,仍然值得转换到NavigationView

【问题讨论】:

您无法使用当前 NavigationView 实现自定义项目。 NavigationView 使用 ListView 来填充作为 TextView 的项目,目前无法自定义该 ListView 项目。 有没有办法在菜单项中添加 2 行文本?我尝试通过 actionLayout 添加,并将其添加到右侧而不是下方。 Google drive-> Upgrade storage option 等示例显示 2 行文本 【参考方案1】:

actionLayout 属性是now supported in Android Support Library 23.1:

NavigationView 提供了一种构建导航抽屉的便捷方式,包括使用菜单 XML 文件创建菜单项的能力。我们扩展了可能的功能,可以通过 app:actionLayout 或使用 MenuItemCompat.setActionView() 为项目设置自定义视图。

所以问题中的代码现在应该可以工作了。

【讨论】:

请求使用示例 只需将属性app:actionLayout="@layout/my_switch_layout" 添加到菜单项即可。我已经给出了问题中my_switch_layout 的示例 @TimRae:我尝试使用 app:actionLayout 但它不起作用。还有什么我可能会错过的吗? 如何让actionLayout在标题后左右对齐? 在导航视图中使用时没有用,即使您没有指定它们,它仍然会放置图标和标题。【参考方案2】:

NavigationViewFrameLayout 的子类,可以有多个子类:

但是,您可以将多个子项添加到 FrameLayout 和控件 它们在 FrameLayout 中的位置通过将重力分配给每个 孩子,使用 android:layout_gravity 属性。

这意味着您可以将自定义视图添加到您的NavigationView

<android.support.design.widget.NavigationView
    android:layout_
    android:layout_
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/side_menu">

    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_
        android:layout_
        android:layout_gravity="bottom">

        <android.support.v7.widget.SwitchCompat
            android:layout_
            android:layout_
            android:text="night_mode"/>
    </LinearLayout>
</android.support.design.widget.NavigationView>

【讨论】:

感谢您的回答!不幸的是,我找不到将LinearLayout 的位置设置在现有(库生成的子布局)下方的方法。我想你的意思是我可以使用layout_gravity="bottom" 并根据经验调整高度,直到看起来没问题,但这不是很好。 这个解决方案好像根本没用 NavigationView 只用 DrawerLayout,我错了吗? 此解决方案是一种在 NavigationView 底部添加自定义视图的方法。 NavigationView 仍然用于菜单布局。 NavigationView 是一个 FrameLayout,它在内部包含一个 ListView。此解决方法不允许将自定义菜单项添加到 ListView,只能在其顶部显示与 ListView 的滚动不同步的内容。 是的,你是对的,这个解决方案添加了一个静态页脚。顺便说一句,这可能会帮助其他有类似问题的人:***.com/questions/30543605/…【参考方案3】:

使用 switchcompat 创建布局并在菜单项中将其提及为

<item android:id="@+id/notification"
        android:title="Notification"
        app:actionLayout="@layout/notify" />`

然后通知布局添加这个

<android.support.v7.widget.SwitchCompat
    android:id="@+id/switch_compat"
    android:layout_
    android:layout_
    android:layout_marginTop="10dp"
    android:checked="false"
    android:onClick="notify"/>

onclick 是关键点,在你的 Activity 中实现处理程序,然后它就会起作用。

【讨论】:

【参考方案4】:

我遇到了同样的问题,发现 NavigationView 的行为不同,具体取决于:

是否在item 上设置android:titleandroid:icon 属性 您的操作布局包含什么样的视图(例如TextView 或其他)

没有设置完全自定义项目的属性:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <item
        android:id="@+id/nav_custom"
        android:title="@null"
        app:actionLayout="@layout/nav_drawer_switch" />
</menu>

(请注意,您也可以不设置 android:title,但这会导致 Android Studio 中出现警告。)

结果:

(这是com.android.support:design的27.1.1版本,其他版本不清楚。)

【讨论】:

这应该是公认的答案!谢谢!【参考方案5】:

您可能想看看这个库:https://github.com/mikepenz/MaterialDrawer。它使导航抽屉的使用变得容易,并且支持自定义视图。

【讨论】:

酷,它不在文档中,但似乎您可以轻松添加任何这些提供的视图,其中包括一个开关 :) github.com/mikepenz/MaterialDrawer/tree/develop/library/src/… 我想知道是否有任何分支可以支持到 SDK 8 ? :-/

以上是关于如何使用菜单布局将自定义项添加到 NavigationView?的主要内容,如果未能解决你的问题,请参考以下文章

将自定义项添加到 ExtJS3 中的网格菜单

如何使用 asp.net mvc Html.DropDownList 帮助器将自定义项添加到下拉列表的顶部?

带有 ListView 自定义项的 Android 小部件

在 jquery 的自动完成中添加具有空值的自定义项

在超集中构建自定义马条形图并添加自定义项以自定义图表

意图选择器屏幕中自定义项目的回调