android代码重构日记（四）——关于按钮部分的代码重构

1、自定义按钮的按下效果

android的系统按钮为灰色，与软件界面不太融合，需要自己定义按钮背景。一开始的做法是使用按钮的onTouchListener（）来监听按钮行为，分别在 MotionEvent.ACTION_DOWN 和MotionEvent.ACTION_UP  两个按钮动作时，触发searchButton.setBackgroundDrawable（）操作。达到了效果，然而这种方式代码冗长，导致大量重复代码，且效率不高。后来发现另一种方式，修改后，较之前方式优化了不少。

参考：http://blog.csdn.net/wukunting/article/details/6573190

在Android中，控件Button和ImageButton一般有三种状态：常态(normal)、点击状态(pressed)、聚焦状态(focused)。很多时候，我们为了提高用户的体验常常为Button以及ImageButton的不同状态设置不同的背景图片，下面介绍一种利用selector设置Button和ImageButton不同状态下的背景图片的方法。

具体步骤如下：

一、在res/drawable文件下创建selector.xml，示例代码如下：

[html] view plaincopyprint?

1. <span style="font-size:16px;"><?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
3. <!--普通状态--> 
4.     <item 
5.         android:state_pressed="false"  
6.         android:drawable="@drawable/title_button_back">  
7.     </item>  
8.     <item  
9.         android:state_pressed="true"  
10.         android:drawable="@drawable/title_button_back_h">  
11.     </item>  
12.     <item  
13.         android:state_window_focused="false"  
14.         android:drawable="@drawable/title_button_back">  
15.     </item>  
16. </selector></span>  

二、编写布局文件，为布局文件中的ImageButton设置selector，示例代码如下：

[html] view plaincopyprint?

1. <span style="font-size:16px;"><?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_height="wrap_content"  
4.     android:layout_width="fill_parent">  
5.     <ImageButton  
6.         android:id="@+id/title_IB"  
7.         android:layout_height="wrap_content"  
8.         android:layout_width="wrap_content"  
9.         android:background="#00000000"  
10.         android:layout_marginRight="4dp"  
11.         android:layout_centerVertical="true"  
12.         android:src="@drawable/selector">  
13.     </ImageButton>  
14. </RelativeLayout></span>  

参考以上方法进行设置后，效果如下：

原来的按钮：          修改代码后的效果：

检查后发现，问题出在设置button背景时，我应该使用android:background而不是android:src，简单的说，background可以拉伸图片，而scr不能（详见附录）。修改后，实现了效果。

2、按钮监听器部分

经过上述修改好，每个button的监听部分基本都剩下1~2句代码了，统一将他们放入一个监听，并通过switch来进行区分。

private class butonOnClickListener implements OnClickListener {
@Override
public void onClick(View v) {
Button btn=(Button)v;
switch (btn.getId()) {
case R.id.button1:
button1();
break;
case R.id.button2:
button2();
break;
default:
break;
}

 }

}

然后将button1，button2的监听器设置为butonOnClickListener就可以了。

button1.setOnClickListener(new butonOnClickListener ());

button2.setOnClickListener(new butonOnClickListener ());

附录1：

假如你的 ImageButton 的宽高是100x100，而你要设置上去的图片是80x80，

1.如果用src进行设置，则你的图片会按80x80 居中绘制上去。
2.如果你使用的是background 则 你设置上去的图片会被拉伸成100x100
简单说来，就是用src的时候是原图显示，不改变图片的大小；用background的时候，按照组件的大小来放大或者缩小图片。

如果一个ImageButton同时设置src和background那又是怎样显示的？

如果是这样的话，那么background会在下面，而src会叠加在上面。

src是图标  
background是背景。
图标是中间的一块区域，而背景是控件能看到的范围叫做背景。
设置的图片比按钮小的话，就会是2层。

参考：http://topic.csdn.net/u/20120309/21/a1e806d6-baaf-4a05-915a-55f643826192.html

附录2

Android中的Selector

转自：http://blog.csdn.net/dinko321/article/details/6764303

Android Selector 是一种背景选择器，也可以用来更改界面状态。总之，可以改变你想要的特效。

AD：

最近做listview和button都要改变Android原来控件的背景，在网上查找了一些资料不是很全，所以现在总结一下android的selector的用法。

首先android的selector是在drawable/xxx.xml中配置的。

先看一下listview中的状态：

把下面的XML文件保存成你自己命名的.xml文件（比如list_item_bg.xml），在系统使用时根据ListView中的列表项的状态来使用相应的背景图片。drawable/list_item_bg.xml

Java代码：

<?xml version="1.0" encoding="utf-8" ?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android">   
<!-- 默认时的背景图片 -->   
<item android:drawable="@drawable/pic1" />   
<!-- 没有焦点时的背景图片 -->   
<item android:state_window_focused="false"   
android:drawable="@drawable/pic1" />   
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->   
<item android:state_focused="true" android:state_pressed="true"   
android:drawable= "@drawable/pic2" />   
<!-- 触摸模式下单击时的背景图片 -->   
<item android:state_focused="false" android:state_pressed="true"   
android:drawable="@drawable/pic3" />   
<!--选中时的图片背景 -->   
<item android:state_selected="true"   
android:drawable="@drawable/pic4" />   
<!--获得焦点时的图片背景 -->   
<item android:state_focused="true"   
android:drawable="@drawable/pic5" />   
</selector>  

使用些xml文件：第一种是在listview中配置android:listSelector="@drawable/list_item_bg或者在listview的item中添加属性android：background="@drawable/list_item_bg"即可实现，或者在Java代码中使用：Drawable drawable = getResources().getDrawable(R.drawable.list_item_bg);  ListView.setSelector(drawable);同样的效果。

但是这样会出现列表有时候为黑的情况，需要加上：android:cacheColorHint="@android:color/transparent"

使其透明。

其次再来看看Button的一些背景效果：

android:state_selected是选中

android:state_focused是获得焦点

android:state_pressed是点击

android:state_enabled是设置是否响应事件,指所有事件

根据这些状态同样可以设置button的selector效果。也可以设置selector改变button中的文字状态。以下就是配置button中的文字效果：drawable/button_font.xml

Java代码：

<?xml version="1.0" encoding="utf-8"?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android">   
<item android:state_selected="true" android:color="#FFF" />   
<item android:state_focused="true" android:color="#FFF" />   
<item android:state_pressed="true" android:color="#FFF" />   
<item android:color="#000" />   
</selector>  

Button还可以实现更复杂的效果，例如渐变啊等等。

Java代码：

drawable/button_color.xml   
<?xml version="1.0" encoding="utf-8"?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android"> /   
<item android:state_pressed="true">//定义当button 处于pressed 状态时的形态。   
<shape>   
<gradient android:startColor="#8600ff" />   
<stroke android:width="2dp" android:color="#000000" />   
<corners android:radius="5dp" />   
<padding android:left="10dp" android:top="10dp"   
android:bottom="10dp" android:right="10dp"/>   
</shape>   
</item>   
<item android:state_focused="true">//定义当button获得 focus时的形态   
<shape>   
<gradient android:startColor="#eac100"/>   
<stroke android:width="2dp" android:color="#333333" color="#ffffff"/>   
<corners android:radius="8dp" />   
<padding android:left="10dp" android:top="10dp"   
android:bottom="10dp" android:right="10dp"/>   
</shape>   
</item>   
</selector>  

最后，需要在包含 button的xml文件里添加两项。假如是 main.xml 文件，我们需要在<Button />里加两项。

android：focusable="true" 
android:backgroud="@drawable/button_color" 

这样当你使用Button的时候就可以甩掉系统自带的那黄颜色的背景了，实现个性化的背景，配合应用的整体布局非常之有用啊。