1、简介
作为一个优雅的Android程序员,那么使用的控件的话应该是有交互的,像我们使用的微信,每一次点击事件用户都有所反应,用户都能准确的知道自己执行了那些操作,是的,这很重要。而反应这些好的用户体验的好多都是使用的背景。
2、应用场景与实现
2.1 Item条目的水波纹效果:
如上图所示,如果我们不设置摁下去的背景的话会显得用户体验很不好,所以有必要增添下背景。看下我们的背景是如何书写的,看下面的代码。
这是不同的背景,针对的是5.0以下的背景选中
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<solid android:color="#f2f4f5" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<!--#d9d9d9-->
<solid android:color="#d9d9d9" />
</shape>
</item>
<item android:state_pressed="false">
<shape>
<!--页面背景的颜色colorPageBg #f2f4f5-->
<solid android:color="#f2f4f5" />
</shape>
</item>
</selector>
针对5.0以上的背景绘制
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#DD7D7D7D">
<!--item的水波纹颜色 #DD7D7D7D-->
<!--页面背景的颜色 #f2f4f5 -->
<item>
<color android:color="#f2f4f5" />
</item>
<item>
<color android:color="#f2f4f5" />
</item>
</ripple>
如下为目录层次,为同名但位于不同的drawable之下。
一开始看不懂没关系,你只需要是这么写的这么用的就完事了,后面会一点一点的进行分析的。
2.2 分析波纹效果
贴士: 像这种波纹效果,记得得对控件设置点击事件,否则就会没效果的哦。
a. 有边界波纹效果(系统)
<TextView
android:id="@+id/tv"
android:background="?android:attr/selectableItemBackground"
android:gravity="center"
android:padding="20dp"
android:layout_centerInParent="true"
android:text="有边界波纹"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
b. 无边界(系统)
<TextView
android:id="@+id/tv"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:gravity="center"
android:padding="20dp"
android:layout_centerInParent="true"
android:text="无边界波纹"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="NewApi" />
这样一对比的话,效果还是比较明显的吧。哈哈。
c. 自定义有边界效果
(效果的解释在xml文件也是有写道的,注意看一下哦)
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#f00">
<!-- 加不加Item是有区别的
如果没Item的话默认的是无边界的,也就是一个圆形的效果;
而如果加了item的背景颜色,那么初始话就是该颜色;紧接着由长按水波纹的颜色进行初始颜色的回复
且有了Item 是由边界的了
-->
<item android:drawable="@color/white" />
</ripple>
2.3 普通的背景选择
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 只需要设置Selected即可改变背景了撒 可以的
选中处理
-->
<item android:drawable="@drawable/titlebar_discover_selected" android:state_selected="true" />
<item android:drawable="@drawable/titlebar_discover_normal" android:state_selected="false" />
<item android:drawable="@drawable/titlebar_discover_normal" android:state_pressed="false" />
</selector>
其实吧,像这个我们都是会的,就是通过java 代码 setSelected进而设置图片的背景。我们也应当习惯去使用这样的图片选择,是吧。