神奇的 Drawable 文件夹——栗子篇
废话不多说,直接上栗子。
1.小红点
<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="#F2601F"/><sizeandroid:width="20dp"android:height="20dp"/></shape>
2.纯色圆角选择器
如果设置禁用状态,需要放在按下等状态的前面,否则不起作用,因为系统会从上到下一次解析,遇到合适的状态就直接取值,不会再解析后面的节点。
<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><!-- 禁用状态 --><itemandroid:state_enabled="false"><shape><cornersandroid:radius="8dp"/><solidandroid:color="#A0A0A0"/></shape></item><!-- 按下状态 --><itemandroid:state_pressed="true"><shape><cornersandroid:radius="8dp"/><solidandroid:color="#f58104"/></shape></item><!-- 正常状态 --><itemandroid:state_pressed="false"><shape><cornersandroid:radius="8dp"/><solidandroid:color="#F89E3D"/></shape></item></selector>
3.圆角边框选择器
设置圆角边框背景的时候,需要透明化中间部分,否则在低版本手机上,会表现成黑色背景。
<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_pressed="true"><shape><strokeandroid:width="1dp"android:color="#A0A0A0"/><cornersandroid:radius="8dp"/><!-- 中间部分背景透明 --><solidandroid:color="#00000000"/></shape></item><itemandroid:state_pressed="false"><shape><strokeandroid:width="1dp"android:color="@color/colorAccent"/><cornersandroid:radius="8dp"/><!-- 中间部分背景透明 --><solidandroid:color="#00000000"/></shape></item></selector>
4.文字颜色选择器
在项目src/main/res
目录下,新建color
资源文件夹,并在/color
下新建selector_text_color.xml
文件。这样就可以在设置控件的android:textColor
属性时引用此选择器,控制控件被选中或者取消选中时文本的颜色改变。
<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="#FFFFFF"android:state_selected="true"/><itemandroid:color="#FB4A41"android:state_selected="false"/></selector>
5.波纹点击效果
要实现在 5.0 以上手机上点击出现波纹效果,5.0 以下单纯变灰的效果,有两种方法:
第一种:自定义两个相同名称的 selector ,分别放在drawable
和drawable-v21
区别开 21 版本之前和之后
drawable/selector_bg.xml
:
<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_pressed="true"><colorandroid:color="#F2F2F2"/></item><itemandroid:state_pressed="false"><colorandroid:color="@color/white"/></item></selector>
drawable-v21/selector_bg.xml
:
<?xml version="1.0" encoding="utf-8"?><ripplexmlns:android="http://schemas.android.com/apk/res/android"android:color="#F2F2F2"><!-- 有界 --><!-- 无界去掉 id 属性即可 --><itemandroid:id="@android:id/mask"android:drawable="@color/gray"/></ripple>
然后在 View 上设置:
android:clickable="true"android:background="@drawable/selector_bg"
第二种:直接使用系统提供的attr
android:clickable="true"<!-- 有界 -->android:background="?attr/selectableItemBackground"<!-- 无界 -->android:background="?attr/selectableItemBackgroundBorderless"
Note:有的控件需要设置android:foreground
前景属性,比如CardView
两种方式对比:
- 使用系统提供的
attr
,简单方便,不用考虑配色等问题,便于和系统风格统一, - 使用自定义 selector 的方式,比较灵活,可以根据需求改变波纹颜色,自定义形状等