如何设计Design Support库的NavigationView样式?

时间:2015-06-28 08:44:22

标签: android material-design android-support-library androiddesignsupport navigationview

所以我使用的是Android Design Support Library

提供的NavigationView

enter image description here

我似乎找不到如何设计样式的例子。

到目前为止,我有:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    app:headerLayout="@layout/header"
    app:menu="@menu/drawer"
    app:itemTextColor="@color/black"
    app:itemIconTint="@color/black"/>

标题的样式很简单,因为它在自己的xml布局下,但是主体是菜单资源文件,而不是布局。

  • app:itemTextColor更改文字颜色
  • app:itemIconTint更改图标颜色
  • app:itemBackground更改项目背景颜色

那么如何设置

  • 所选项目背景
  • 所选项目文字颜色
  • 所选项目图标色调

2 个答案:

答案 0 :(得分:45)

我已经回答了类似的问题Here

基本上你需要做的是,使用Color State List Resource。为此,首先在xml目录中创建一个新的color(例如drawer_item.xml)(该目录应位于res目录中。)如果您没有名为color的目录已经创造了一个。

现在drawer_item.xml内部做了类似的事情

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

对于itemBackground,需要在drawable文件夹中放置一个单独的drawable。名称相同drawer_item。需要为android:drawable设置android:color属性,而不是itemBackground

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
       android:drawable="@drawable/shape_rectangle_checked"

        android:state_checked= "true" />
    <item android:drawable="@drawable/shape_rectangle" />

</selector>

档案shape_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
<solid android:color="#ffffff" /> <!--white color -->
</shape>

档案shape_rectangle_checked

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
<solid android:color="#25aaf1" /> <!--blue color -->
</shape>

然后像你一样在你的导航视图中设置

app:itemIconTint="@color/drawer_item" //notice here
app:itemTextColor="@color/drawer_item" //and here
app:itemBackground="@drawable/drawer_item"//and here for changing the background color of the item which is checked

答案 1 :(得分:3)

要展开@ Sash_KP的答案,对于drawable文件夹中的@drawable/shape_rectangle,您不需要@drawable/shape_rectangle_check@color/your_color。您可以使用API >= 21

同样对于itemBackground,我注意到默认情况下导航菜单项有一个预设选择器。您会注意到,如果触摸并按住菜单项,则会出现波纹。使用自定义ripple drawable不会覆盖默认的涟漪。因此,如果你使用ripple drawables,它会产生两个涟漪!此外,API >= 21的菜单项不允许您出于某种原因处于按下状态(仅当您按住时才会出现默认纹波。)

因此对ripple drawable我不建议使用selector drawable。只需使用没有自定义涟漪的常规public interface QuestionApiInterface { @FormUrlEncoded @POST("/getquestionsjson.php") void getStreams(@Field("userId") String userId, Callback<List<Question>> callback); }