如何在NavigationView中自定义项目背景和项目文本颜色?
我想实现这样的材料devise文档中显示的东西。
colorControlHighlight
用于检查项目的背景。
我需要自定义:
- 背景未选中
- 文字颜色检查
- 文本颜色未选中
NavigationDrawer (NavigationView)有三个选项用于configuration选中/select的项目。
app:itemIconTint="@color/menu_text_color" //icon color app:itemTextColor="@color/menu_text_color" //text color app:itemBackground="@drawable/menu_background_color" //background
图标和文字的颜色
前两个选项(图标和文本)需要颜色状态列表资源 – https://developer.android.com/guide/topics/resources/color-list-resource.html 。
这样的menu_text_color
资源需要在res / color中创build。 这个文件内容应该类似于:
<!-- res/color/menu_text_color.xml --> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/colorWhite" android:state_checked="true" /> <item android:color="@color/colorBlack" android:state_checked="false"/> </selector>
-
@color/colorWhite
– 用于检查项目的颜色资源 -
@color/colorBlack
– 用于未选中项目的颜色资源
我为两者创build了一个资源,但可以创build两个分离的文件 – 一个用于文本,一个用于图标。
背景(itemBackground)
后台选项需要可绘制资源而不是颜色,每次尝试设置颜色都会以exception结束。 可绘制资源需要在res / drawable中创build,其内容应该类似于:
<!-- res/drawable/menu_background_color.xml --> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/transparent" android:state_checked="false"/> <item android:drawable="@color/colorPrimary" android:state_checked="true"/> </selector>
没有必要创build任何模拟颜色的drawable(在其他解决scheme中,我看到了这样的命题 – 也许是较老的sdk版本),颜色可以直接用在这个文件中。 在这个示例文件中,我使用透明颜色作为未选中的项目和colorPrimary
作为已选项目。
疑难解答和重要注意
- 在后台资源中,始终使用state_checked =“false”而不是默认值,默认颜色不起作用
- 对于dynamic/以编程方式创build的菜单记得将项目设置为可检查 :
代码示例(dynamic菜单项添加):
menu.add(group_id, item_id, Menu.NONE, item_name).setCheckable(true).setChecked(false);
如果项目不会被设置为可检查的,则背景将不起作用(文本和图标颜色令人惊讶将按预期工作)。
itemBackground
, itemIconTint
和itemTextColor
是简单的xml属性,可以设置,但你必须使用自定义前缀,而不是android:
one。
例
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- Other layout views --> <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:itemBackground="@drawable/my_ripple" app:itemIconTint="#2196f3" app:itemTextColor="#009688" app:headerLayout="@layout/nav_header" app:menu="@menu/drawer_view" /> </android.support.v4.widget.DrawerLayout>
注意:在这种情况下,文本颜色,图标色调和背景是静态的。 如果你想改变文本的颜色(例如, ColorStateList
时是粉色,勾选时是青色),你应该使用ColorStateList
。
例
在/res/color
创build一个新的* .xml文件 – 让我们将其命名为state_list.xml – 包含以下内容:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This is used when the Navigation Item is checked --> <item android:color="#009688" android:state_checked="true" /> <!-- This is the default text color --> <item android:color="#E91E63" /> </selector>
然后简单地引用它就像这样: app:itemTextColor="@color/state_list"
itemIconTint
。 itemBackground
需要一个资源ID。 也请参阅文档 。
使用colorControlHighlight是一个很好的解决scheme。 请注意,使用最新的支持库,您可以为每个小部件定义一个主题(而不仅仅是样式) 例如,您可以将colorControlHighlight定义到NavigationView主题中,这不会应用于其余的小部件。
现在,在导航视图中,您还可以提供自己的项目视图。 随着新的appcompat-v7:23.1.0
你可以
通过app:actionLayout或使用MenuItemCompat.setActionView()为项目设置自定义视图。
View view = View.inflate(context, R.layout.your_custom_nav_layout_item, null); MenuItemCompat.setActionView(menuItem, view);
这样,您可以使用TextView创build自己的布局,然后根据需要更改backgrounds/colors/fonts
。 希望这是有帮助的:) 来源
您可以使用编程方式使用此代码:
int[][] states = new int[][] { new int[] { android.R.attr.state_enabled}, // enabled new int[] {-android.R.attr.state_enabled}, // disabled new int[] {-android.R.attr.state_checked}, // unchecked new int[] { android.R.attr.state_pressed} // pressed }; int[] colors = new int[] { Color.BLACK, Color.RED, Color.GREEN, Color.BLUE }; ColorStateList myList = new ColorStateList(states, colors); nav_view.setItemIconTintList(myList);
你可以使用下面的语句来完成它:
navigationView.setItemBackground(ContextCompat.getDrawable(CustomerHomeActivity.this, R.color.transparent));