Android开发技巧：给Button的点击上色 - 推酷
Android开发技巧：给Button的点击上色
UI设计中，按钮一般都会有多个状态，比如：聚焦、点击等，不同的状态必须显示不同的呈现形式（比如颜色、形状的改变），这样用户才能感觉到按钮被成功选中、点击了，否则用户体验就会非常差了。
本篇文章就简单地描述一下Android开发中，如何动态改变Button状态切换时的背景。
Android的UI设计中，默认情况下，系统会为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状态切换的背景显示。
1. &多张背景图片切换
首先，为Button准备两张背景图片，一张是Button未点击时显示的图片，另一张是Button被点击时显示的图片，如图所示：
然后，在工程的res/drawable目录下创建一个 xml 文件，这里命名为：button_selector.xml
内容如下：
&?xml version=&1.0& encoding=&utf-8&?&
&selector xmlns:android=&/apk/res/android&&
android:state_pressed=&true&
android:drawable=&@drawable/up_pressed&/&
android:state_pressed=&false&
android:drawable=&@drawable/up&/&
&/selector&
说明：这里的selector标签就相当与Button状态的选择器，每一个item子项代表着Button的一种状态，这里我只选取了两种状态做示例，一种是Button被点击，另一种是Button未被点击。全部的Button状态可以参考Google Android Development相关网页：
然后，在Button的标签中，把 background 属性的值改为 button_selector 即可：
android:background=&@drawable/button_selector&
可以运行程序试试，当点击Button后，是不是Button的背景从左图变化成为右图了？
这种方法是比较直观简单的方法，在实际的工程中也大量使用，但也有一个缺陷，必须为所有的Button准备多张背景图片，为每一个状态准备一张，加大了UI设计的工作量，也加大了程序的大小。
2. 通过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=&/apk/res/android&
android:shape=&rectangle&&
android:startColor=&#808080&
android:endColor=&#808080&
android:angle=&-90&/&
（2） shape_pressed.xml
&?xml version=&1.0& encoding=&utf-8&?&
&shape xmlns:android=&/apk/res/android&
android:shape=&rectangle&&
android:startColor=&#FF7F00&
android:endColor=&#EE7600&
android:angle=&-90&/&
然后，依然定义一个 button_selector.xml文件，只不过该selector的android:drawable所指的内容，由图片改为shape文件。
&?xml version=&1.0& encoding=&utf-8&?&
&selector xmlns:android=&/apk/res/android&&
android:state_pressed=&true&
android:drawable=&@drawable/shape_pressed&/&
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标签来定义。文中有不清楚的地方欢迎留言讨论或者来信lujun.交流。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致求助如何取消BUTTON的点击效果？--------------------------------------------------------------见这里 这应该是你要的效果 /thread-1724-1.htmlAndroid中的Button自定义点击效果 - 开源中国社区
当前访客身份：游客 [
当前位置：
1.放在drawable下的selector.xml文件
&?xml version=&1.0& encoding=&utf-8&?&&selector xmlns:android=&&&&&item android:state_pressed=&true& android:drawable=&@drawable/temp1& /&&&item android:state_pressed=&false& android:state_focused=&false&&&android:drawable=&@drawable/temp2& /&&&item android:state_focused=&true& android:drawable=&@drawable/temp3& /&&&item android:state_focused=&false& android:drawable=&@drawable/temp4& /&&/selector&
2.布局文件main.xml
&?xml version=&1.0& encoding=&utf-8&?&&LinearLayout xmlns:android=&&&&& android:orientation=&vertical&&&& android:layout_width=&fill_parent&&&& android:layout_height=&fill_parent&&&& &&TextView&&&&& android:layout_width=&fill_parent&&&&& android:layout_height=&wrap_content&&&&& android:text=&@string/hello&&&& /&&Button&android:drawableTop=&@drawable/shouru&&android:layout_width=&wrap_content&&android:layout_height=&wrap_content&&android:text=&@string/button&&android:background=&@drawable/selector&/&&/LinearLayout&
3.只是为了测试，所以效果不是很好，Button部分状态效果图如下：
①初始化的时候默认显示的按钮效果：
②点击后释放显示的效果
③点击不放时的效果
1.布局文件main.xml
&?xml version=&1.0& encoding=&utf-8&?&&LinearLayout xmlns:android=&&&&& android:orientation=&vertical&&&& android:layout_width=&fill_parent&&&& android:layout_height=&fill_parent&&&& &&TextView&&&&& android:layout_width=&fill_parent&&&&& android:layout_height=&wrap_content&&&&& android:text=&@string/hello&&&& /&&Button&android:id=&@+id/button&&android:drawableTop=&@drawable/shouru&&android:layout_width=&wrap_content&&android:layout_height=&wrap_content&&android:text=&@string/button&&android:background=&@drawable/temp4&/&&/LinearLayout&
2.主要的java代码，实现点击效果：&&&Button button = (Button) this.findViewById(R.id.button);&&&button.setOnTouchListener(new Button.OnTouchListener(){&&&@Override&&&public boolean onTouch(View v, MotionEvent event) {&&&&if(event.getAction() == MotionEvent.ACTION_DOWN){&&&&&&&&&&&&&&&&&&&&&& v.setBackgroundResource(R.drawable.temp1);&&&&&&&&&&&&&&&&&&&&&& Log.i(&TestAndroid Button&, &MotionEvent.ACTION_DOWN&);&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&&&& else if(event.getAction() == MotionEvent.ACTION_UP){&&&&&&&&&&&&&&&&&&&&&& v.setBackgroundResource(R.drawable.temp2);&&&&&&&&&&&&&&&&&&&& Log.i(&TestAndroid Button&, &MotionEvent.ACTION_UP&);&&&&&&&&&&&&&&& }&&&&&&&&}&&});原文链接：
共有0个评论
更多开发者职位上
有什么技术问题吗？
长平狐的其它问题
类似的话题