Button多样化与自定义点击效果

    在Android开发应用中，默认的Button是由系统渲染和管理大小的。然后，我们在产品的实际开发中，需要对默认Button进行美化，比如 自定义背景的按钮、 自定义图片按钮等，以此来改善UI的美观并且提高用户的体验度。

Button控件常用属性如下：

一、自定义按钮背景

1.修改系统默认Button的背景颜色

(1)在drawable资源目录下按钮下后的效果变化描述文件drawable/sectorBtn.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_pressed="false" >  
4.         <color android:color="#FF8C00"/>  
5.      </item>        
6.   <item android:state_focused="true" >  
7.     <color android:color="#B22222"/>  
8.   </item>     
9.   <item android:state_pressed="true" >  
10.       <color android:color="#B22222"/>  
11.   </item>  
12. </selector> 

(2)设置布局文件中Button的android:background属性

1. <Button  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="wrap_content"  
4.     android:text="默认Button"      
5.     android:background="@drawable/sectorBtn" /> 

效果如下：

                    

2.绘制矢量图形作为Button按钮背景

    绘制矢量图的方式实现比较简单，适合于对于按钮形状和图案要求不高的场合。

步骤如下：

(1) 在 /drawable/btn_shape_default .xml、 /drawable/btn_shape_pressing .xml定义一个圆角矩形，外围轮廓线实线、内填充渐变色

1. <?xml version="1.0" encoding="utf-8"?>     
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.         <item >  
4.             <shape android:shape="rectangle">  
5.                 <solid android:color="#FFEC7600"/>  
6.                 <corners   
7.                     android:topLeftRadius="5dip"  
8.                     android:topRightRadius="5dip"  
9.                     android:bottomLeftRadius="5dip"  
10.                     android:bottomRightRadius="5dip"/>  
11.             </shape>  
12.         </item>  
13.           
14.         <item >  
15.             <shape >  
16.                 <gradient   
17.                     android:startColor="#CD3700"  
18.                     android:endColor="#CD6600"                            
19.                     android:type="linear"  
20.                     android:angle="90"  
21.                     android:centerX="0.5"  
22.                     android:centerY="0.5"/>  
23.                      <corners   
24.                     android:topLeftRadius="5dip"  
25.                     android:topRightRadius="5dip"  
26.                     android:bottomLeftRadius="5dip"  
27.                     android:bottomRightRadius="5dip"/>  
28.             </shape>  
29.         </item>  
30. </layer-list>  

注意： /drawable/btn_shape_pressing .xml与 /drawable/btn_shape_default .xml  内容相同，就是渐变颜色不同，用于按钮按下后的背景变化效果。

1.  <gradient   
2.                     android:startColor="#FFEC7600"  
3.                     android:endColor="#FFFED69E"     
4.                     android:type="linear"  
5.                     android:angle="90"  
6.                     android:centerX="0.5"  
7.                     android:centerY="0.5"/>  

(2)定义按钮下后的效果变化描述文件drawable/selector_btn_background.xml,代码如下：

1. <?xml version="1.0" encoding="utf-8"?>     
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">      
3.     <item android:state_pressed="false"  android:drawable="@drawable/btn_shape_default"/>  
4.     <item android:state_focused="true"   android:drawable="@drawable/btn_shape_pressing"/>  
5.     <item android:state_pressed="true"  android:drawable="@drawable/btn_shape_pressing"/>  
6. </selector>  

(3)在界面文件(如layout/main.xml)中定义一个Button控件

1. <Button  
2.     android:layout_width="120dip"  
3.     android:layout_height="40dip"  
4.     android:text="登录"      
5.     android:background="@drawable/selector_btn_background.xml" /> 

效果如下：

    

3.使用9patch图片(位图)作为Button按钮背景

        当按钮的内容太多是，Android会自动缩放整张图片，以保证背景图片能覆盖整个按钮，但这种缩放整张图片的效果可能并不好。为了实现只缩放图片中的某个部分，我们可以借助9Patch图片来实现。9-patch格式，是在Android中特有的一种PNG图片格式，以"***.9.png"结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域，这样，就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话，背景图片的效果就会被无情的拉伸，影响效果。9patch图片原理是：它在原始图片的四周各添加一个宽度为1像素的线条，这4条线决定了该图片的缩放规则、内容显示规则，即左侧和上侧直线共同决定图片的缩放区域(纵向缩放、水平缩放)；右侧和下侧的直线共同决定图片内容的显示区域。

(1) 使用draw9patch.bat制作图片：运行SDK目录/tools/draw9patch.bat，双击运行，得到两张按钮背景，分别是正常和按下状态下的，命名为bg_btn.9.png和bg_btn_2.9.png。

   

(2) 编写图片使用描述文件bg_9patchbutton.xml。

1. // in bg_9patchbutton.xml  
2. <?xml version="1.0" encoding="UTF-8"?>  
3. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
4.     <item android:state_pressed="true"  
5.         android:drawable="@drawable/bg_btn_2" />  
6.     <item android:state_focused="true"  
7.         android:drawable="@drawable/bg_btn_2" />  
8.     <item android:drawable="@drawable/bg_btn" />  
9. </selector>  

  

(3) 在界面定义文件 layout/main.xml中添加Button、ImageButton按钮控件的定义。Button、ImageButton都是可以使用背景属性的

1. <Button  
2.     android:layout_width="120dp"  
3.     android:layout_height="40dp"  
4.     android:text="9-patch图片背景按钮"  
5.     android:background="@drawable/bg_9patchbutton" />  
6. <Button  
7.     android:layout_width="200dp"  
8.     android:layout_height="40dp"  
9.     android:text="9-patch图片背景按钮"  
10.     android:background="@drawable/bg_9patchbutton" />  
11. <Button  
12.     android:layout_width="120dp"  
13.     android:layout_height="80dp"  
14.     android:text="9-patch图片背景按钮"  
15.     android:background="@drawable/bg_9patchbutton" />  
16. <ImageButton  
17.     android:layout_width="120dp"  
18.     android:layout_height="40dp"  
19.     android:src="@drawable/bg_9patchbutton"  
20.     android:scaleType="fitXY"  
21.     android:background="@android:color/transparent" />  

二、自定义图片按钮

(1)准备自定义样式图片 speaking.png、speak.png

   

(2)在/res/drawable目录下增加一个imagepress.xml文件，用于设置触发按钮时显示不同的图片效果

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:state_pressed="false" android:drawable="@drawable/speak"/>  
4.  <item android:state_focused="true" android:drawable="@drawable/speaking"/>  
5.  <item android:state_pressed="true" android:drawable="@drawable/speaking"/>  
6. </selector>  

(3)在界面文件layout/main.xml添加ImageButton按钮

1. <ImageButton  
2.         android:layout_width="wrap_content"  
3.         android:layout_height="wrap_content"  
4.         android:src="@drawable/imagepress"  
5.         android:scaleType="fitXY"  
6.         android:background="@android:color/transparent" /> 

参考文献：http://blog.csdn.net/lucherr/article/details/7476941