Android短视频系统开发技巧：给Button的点击上色
Android短视频系统开发技巧：给Button的点击上色
在短视频系统开发的UI设计中，按钮一般都会有多个状态，比如：聚焦、点击等，不同的状态必须显示不同的呈现形式（比如颜色、形状的改变），这样用户才能感觉到按钮被成功选中、点击了，否则用户体验就会非常差了。
本篇文章就简单地描述一下短视频系统开发中，如何动态改变Button状态切换时的背景。
短视频系统开发的UI设计中，默认情况下，系统会为Button的点击实现一个默认的背景切换。
例如下面这样的一个Button：
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />用户在点击Button的时候，会有一个蓝色外框显示出来，表明Button被点击了。如图所示：
但是，如果想为短视频系统开发Button添加自定义的图片背景，如：
android:background="@drawable/upload"那么，当你点击Button的时候会发现，Button啥反应都没有，在用户点击的时候Button的背景没有任何变化，用户无法知道到底点击成功了没有，所以，这不是一个好的用户体验。
当然，这种情况可以考虑使用ImageButton，如：
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/upload"/>ImageButton会将src所指的图片缩小放入Button的方框内中央显示，Button点击前后的显示效果如图所示：
上面是采用系统默认的Button点击效果，那么，如果期望自己短视频系统开发定义Button的点击效果，该如何实现呢？下面，我将介绍两种在Button被点击时改变背景的方式，一种是采用多张背景图片切换的方式，另一种是采用shape来定义Button状态切换的背景显示。
- 多张背景图片切换
首先，为短视频系统开发Button准备两张背景图片，一张是Button未点击时显示的图片，另一张是Button被点击时显示的图片，如图所示：
然后，在工程的res/drawable目录下创建一个 xml 文件，这里命名为：button_selector.xml 内容如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="@drawable/up_pressed"/>
<item
android:state_pressed="false"
android:drawable="@drawable/up"/>
</selector>说明：这里的selector标签就相当与Button状态的选择器，每一个item子项代表着Button的一种状态，这里我只选取了两种状态做示例，一种是Button被点击，另一种是Button未被点击。全部的Button状态可以参考Google Android Development相关网页：StateListDrawable
然后，在Button的标签中，把 background 属性的值改为 button_selector 即可：
android:background="@drawable/button_selector"可以运行程序试试，当点击Button后，是不是Button的背景从左图变化成为右图了？
这种方法是比较直观简单的方法，在实际的工程中也大量使用，但也有一个缺陷，必须为所有的Button准备多张背景图片，为每一个状态准备一张，加大了短视频系统开发UI设计的工作量，也加大了程序的大小。
- 通过shape来自定义Button的UI显示
首先，定义两个xml文件，分别为shape_normal.xml ，shape_pressed.xml
文件中，定义shape的属性，shape的原理参考Google Android官方文档：
（1）shape_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#808080"
android:endColor="#808080"
android:angle="-90"/>
</shape>（2） shape_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FF7F00"
android:endColor="#EE7600"
android:angle="-90"/>
</shape>然后，依然定义一个 button_selector.xml文件，只不过该selector的android:drawable所指的内容，由图片改为shape文件。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="@drawable/shape_pressed"/>
<item
android:state_pressed="false"
android:drawable="@drawable/shape_normal"/>
</selector>然后，将所需的Button的background依然指向该selector文件，即可实现短视频系统开发自定义Button点击的背景切换效果.
采用这种方式的Button点击前后的效果如图所示：
shape可以定义的内容很丰富，包括圆角的设置，线条的粗细等等，这里不一一演示，可以自己修改后测试效果。
ImageButton也可以采用这种方法来自定义Button点击的背景颜色切换效果，不过要注意为ImageButton添加一个android:padding属性，使得src的图片与Button的边界有一定的距离，这样才能动态改变背景，因为ImageButton能改变的颜色只是src图片以外的背景区域，图片本身的颜色是不会变的。
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/upload_pressed"
android:padding="5dp"
android:layout_centerVertical="true"
android:background="@drawable/button_selector"/>效果如图：
这篇文章就写到这儿了，本文主要描述了如何在短视频系统开发时，为Button的点击动态改变背景，主要通过selector来实现，而具体的呈现形式可以通过多个图片背景切换，或者通过Shape标签来定义。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。