导航抽屉的圆角背景项目

Question

我想为导航抽屉中的项目提供一个圆角，如下所示：

这是material.io网站上的材料设计示例

可能吗 ？

Answer 1

首先，我建议您使用Flutter，它更加直观，并且您获得了Material指南的最佳集成流程。

现在，要在XML和Android Studio中为选中的项目添加圆角，颜色，字体和填充，您可以在NavigationView上拥有'app'属性：

<android.support.v4.widget.DrawerLayout
    android:layout_width="match_parent"
    ...>

<android.support.design.widget.NavigationView
    android:layout_width="match_parent"
    ...
    app:itemIconTint="@color/custom_color_config"
    app:itemTextColor="@color/custom_color_config"
    app:itemBackground="@drawable/custom_drawable_resource"
    app:itemTextAppearance="@style/custom_style"/>

使用itemIconTint和itemTextColor可以设置是否选中孔项目（图标和文本）的颜色配置。 首先，执行res> new>目录，并将目录命名为“ color”。 然后，使用新的>颜色资源文件> custom_color_config（名称）在color目录中创建颜色资源文件 ，并将其放入：

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="your_checked_item_color"
        android:state_checked="true" />
    <item
        android:color="your_non_checked_item_color"/>
</selector>

具有state_checked = true属性的项目会将其颜色应用于当前的导航检查项目。

要添加背景圆角框，请在drawable目录中创建一个新的drawable资源文件 ， 以便稍后在itemBackground上进行设置。 因此，新建>可绘制资源文件> custom_drawable_resource（名称），并将其放入：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="9dp"
        android:right="9dp"
        android:top="2dp"
        android:bottom="2dp">

        <shape>
            <solid android:color="@color/new_color_resource_name"/>
            <corners android:radius="5dp"/>
        </shape>

    </item>
</layer-list>

接下来，再次在color目录中创建第二个颜色资源文件 ，以与文件custom_drawable_resource（new_color_resource_name）中的纯色属性相关联，然后将其放入：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:color="your_background_checked_item_color"
        android:state_checked="true" />
    <item 
        android:color="your_background_non_checked_item_color"/>
</selector>

和VOILA！ 只需将带有一些半粗体字体的自定义样式添加到文本外观即可。

PD：很抱歉，如果我的英语不好，我通常会阅读比写的多的东西，这是MX的问候。

Answer 2

这是通过navigationview和menuItem完成的，并为圆形边框创建一个形状文件，并在选定状态和未激活状态下使用selected_checked创建了selected_state文件。

Answer 3

只需使用app:itemShapeAppearanceOverlay属性：

<com.google.android.material.navigation.NavigationView
   app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"
   ...>

与：

  <style name="ShapeAppearanceOverlay.Nav" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>