如何在新版NavigationView中添加自定义视图

Question

如何在新版NavigationView中添加自定义视图

androidnavigationviewandroid-navigationview

38

我正在尝试将开关作为菜单项添加到NavigationView中，就像这样。

enter image description here

我使用了actionViewClass属性，但它只显示了标题。

<item
android:id="@+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="always" />

- atabouraya

你可以参考我的这个答案：https://dev59.com/pl0a5IYBdhLWcg3wLWAG#30644656 - Moinkhan

你解决了吗？ - android developer

2

到目前为止的解决方案是使用带有旧导航抽屉的DrawerLayout，我找不到使用NavigationView的解决方法。 - atabouraya

根据Material Design Guidelines，这是允许的吗？ - Tomblarom

6个回答

5

如果你正在使用NavigationView，那么有一个简单的解决方案：

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/activity_main_drawer">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="horizontal">

        <android.support.v7.widget.SwitchCompat
            android:id="@+id/mSwitch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Night Mode" />

    </LinearLayout>

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

- Aks4125

1

尝试将您的Switch包装到一个单独的布局文件中：

菜单：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/menu_switch"
    android:title="Switch Title"
    app:actionLayout="@layout/layout_my_switch"
    app:showAsAction="always" />
</menu>

开关： "layout_my_switch.xml"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
    android:id="@+id/my_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />
</RelativeLayout>

- HeW

'NavigationView中忽略了'app:showAsAction'和'app:actionLayout'' - Gallal

好的，我不知道那个。 - HeW

1

@Gallal 你应该使用23.1.0支持库。 - krossovochkin

1

[更新于2017年3月3日] 该答案已过时，请勿参考。请参考被接受的答案。

不幸的是，目前NavigationView并不允许太多自定义...

您需要在NavigationView内使用自定义ListView。

<android.support.design.widget.NavigationView
    android:id="@+id/navView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

通过将TextView放在左侧和SwitchCompact放在右侧来为该列表视图创建单元格。

我希望它能帮助你...

- Moinkhan

0

我在抽屉布局中使用了以下布局，其中包含导航视图代码。

<android.support.design.widget.NavigationView
        android:id="@+id/navi_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start|top"
        android:background="@color/navigation_view_bg_color"
        app:theme="@style/NavDrawerTextStyle">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/drawer_header" />

            <include layout="@layout/navigation_drawer_menu" />
        </LinearLayout>
    </android.support.design.widget.NavigationView>

- Anshul Agarwal

-5

你是否在寻找类似于这样的东西，？

那么，在 Synfusion 中有一个名为导航抽屉的自定义组件可用。

你可以在这里找到相应的文档。

哇！他们还提供社区许可证。

- Joy Rex

2

他使用NavigationView。 - Hugo Gresse

NavigationDrawer也是NavigationView，但它还具有其他附加功能。 - Joy Rex

我们可以通过各种动画过渡效果从“从左到右”、“从右到左”、“从上到下”和“从下到上”进行导航。 - Joy Rex

但是为什么你要谈论Symfusion，他使用的是标准的Android呢？ - Hugo Gresse

提供了一个选项，可以使用自定义的 NavigationView，而不是在原生 Android 中尝试复杂的解决方法。 - Joy Rex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- atabouraya · Accepted Answer

新的支持库23.1

允许使用app:actionLayout或MenuItemCompat.setActionView()为导航视图中的项目自定义视图。

这是我如何显示SwitchCompat的方法：

menu_nav.xml

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

    <group
        android:id="@+id/first"
        android:checkableBehavior="single">

        <item
            android:id="@+id/navi_item_1"
            android:icon="@drawable/ic_feed_grey_500_24dp"
            android:title="Feed" />
        <item
            android:id="@+id/navi_item_2"
            android:icon="@drawable/ic_explore_grey_500_24dp"
            android:title="Explore" />
        <item
            android:id="@+id/navi_item_4"
            android:icon="@drawable/ic_settings_grey_500_24dp"
            android:title="Settings" />

    </group>
    <group
        android:id="@+id/second"
        android:checkableBehavior="single">
        <item xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/navi_item_create_notifications_sound"
            android:title="Notifications Sounds"
            app:actionLayout="@layout/menu_swich"
            app:showAsAction="always" />

    </group>
</menu>

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="right|center_vertical"
    app:buttonTint="@color/colorPrimary"
    app:switchPadding="@dimen/spacing_small" />

为了获取视图并给它分配事件，你应该执行：

SwitchCompat item = (SwitchCompat) navigationView.getMenu().getItem(3).getActionView();
        item.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener(){
            @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                Logr.v(LOG_TAG, "onCheckedChanged" + isChecked);
            }
        });