【问题标题】:Navigation Drawer item divider with selected background color具有选定背景颜色的导航抽屉项目分隔线
【发布时间】:2019-11-25 18:29:22
【问题描述】:

我的 android 应用中有一个导航抽屉。代码如下:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:itemBackground="@drawable/nav_divider"/>

我已使用post 的答案在项目之间添加分隔符。这是我在NavigationView 中用作itemBackgroundnav_divider 可绘制对象:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

现在,问题是如何更改所选项目的背景颜色。我知道如何在没有分隔符的情况下做到这一点,但是使用分隔符会更复杂。

更新:

这是我尝试过的:

我创建了另一个名为 nav_divider_selected 的可绘制对象,它与上面的 nav_divider 完全相同,只是颜色不同。

然后,我像这样创建了一个drawer_item_background 可绘制对象:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/nav_divider_selected" android:state_selected="true"/>
        <item android:drawable="@drawable/nav_divider"/>
</selector>

并且,用这个新的选择器 (app:itemBackground="@drawable/drawer_item_background") 替换了 NavigationViewitemBackground。但是,它没有用。出于某种原因,这些物品看起来都是黑色的。

【问题讨论】:

  • 您是要突出显示顶部和底部分隔线还是只突出底部,您能否发布您想要的最终结果应该是什么样子的屏幕截图
  • 我不想突出显示分隔线。我希望突出显示所选项目。我认为不需要截图,是吗?
  • 你用选择器试过了吗?
  • 我知道应该用选择器来完成,但是选择器应该长什么样子?
  • 你能发布你到目前为止所尝试的内容吗

标签: android navigation-drawer android-navigationview


【解决方案1】:

我明白了。这是一个简单的问题。我只是使用了错误的状态。所以,这就是解决方案。我创建了两个不同的图层列表(将分隔线添加到导航项):

nav_divider:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

nav_divider_selected:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/activity_horizontal_margin">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_gray"/>
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_blue"/>
        </shape>
    </item>
</layer-list>

然后,创建一个像这样的drawer_item_backgrounddrawable(state_checked 应该使用而不是state_selected):

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/nav_divider_selected" android:state_checked="true"/>
        <item android:drawable="@drawable/nav_divider"/>
</selector>

然后,我在我的NavigationView 中将此drawable 用作itemBackground

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:fitsSystemWindows="true"
    android:background="@color/white"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:itemBackground="@drawable/drawer_item_background"/>

【讨论】:

    【解决方案2】:

    另外,如果您不想使用选择器来实现,您可以这样做

    <group android:checkableBehavior="single">
                    <item
                        android:id="@+id/nav_share"
                        android:icon="@drawable/ic_menu_share"
                        android:title="@string/menu_share" />
                </group>
    

    通过将元素包裹在&lt;group android:checkableBehavior="single"&gt; 下,我们得到一个选定的背景。

    【讨论】:

      【解决方案3】:

      试试下面的 item_background.xml 导航视图的 app:itemBackground="@drawable/item_background"

      <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:drawable="@color/rgb_red" android:state_checked="true" />
          <item android:drawable="@color/rgb_red" android:state_activated="true" />
          <item>
              <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:drawable="@color/rgb_white" />
                <item android:start="-2dp"
                      android:top="-2dp"
                      android:end="-2dp">
                     <shape>
                       <solid android:color="@android:color/transparent" />
                       <stroke android:width="1dp" android:color="@color/rgb_pale_gray"/>
                     </shape>
                </item>
              </layer-list>
          </item>
      </selector>
      

      希望对你有帮助

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-06-10
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多