【android自定义控件】button样式自定义<二>

Button是最长常见的控件之一，属性特征没什么好说的，就来自定义button的样式，实现我们看见的各种绚丽的button效果。

要自定义样式，无外乎2种方式：

一是：常见的使用点9图（.9），这个熟悉android应用开发的都不陌生，经常用到

二是：矢量图，自己通过share等画出来，这个效率比较低，对于button样式改变，使用的不是很多。

先来介绍使用点9图吧，点9图工具在android sdk包中就有，自己可以尝试使用下。

绘制在L的区域：用于拉伸的纵向区域。

绘制在T的区域：用于拉伸的横向区域。

绘制在R的区域：用于显示前景的纵向范围。

绘制在B的区域：用于显示前景的横向范围。

红色框区域：表示纵向拉伸的区域，也就是说，当图片需要纵向拉伸的时候它会只指定拉伸红色区域，其他区域在纵向是不会拉伸的。

绿色框区域：表示横向拉伸的区域，也就是说，当图片需要横向拉伸的时候它会只指定拉伸绿色区域，其他区域在横向是不会拉伸的。

显然红色和绿色相交的部分是既会进行横向拉伸也会进行纵向拉伸的。

蓝色区域：表示前景能显示的纵向范围。即前景的最上面可以显示到什么地方，最下面可以显示的什么地方。

黄色区域：表示前景能显示的横向范围。即前景的最左边可以显示到什么地方，最右边可以显示的什么地方。

蓝色和黄色相交部分：表示整个前景能显示的区域。一个区域是矩形的，蓝色规定了上下边界，黄色规定了左右边界，两者共同当然也就规定了一个矩形区域。

好了，进入正题，

(a) 使用draw9patch.bat作完图片后，得到两张按钮背景，分别是正常和按下状态下的，命名为bg_btn_nomal.9.png和bg_btn_selected.9.png。

(b) 编写图片使用x选择器bg_button_select.xml。

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_pressed="true"  
        android:drawable="@drawable/bg_btn_selected" />  
    <item android:state_focused="true"  
        android:drawable="@drawable/bg_btn_selected" />  
    <item android:drawable="@drawable/bg_btn_nomal" />  
</selector> 

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

<Button  
    android:layout_width="120dip"  
    android:layout_height="40dip"  
    android:text="9-patch图片背景按钮"  
    android:background="@drawable/bg_button_select" />

使用矢量步骤都差不多

第一步 使用xml定义一个圆角矩形，外围轮廓线实线、内填充渐变色

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
   <item>  
      <shape android:shape="rectangle">   
         <solid android:color="#FFEC7600" />  
         <corners  
            android:topLeftRadius="5dip"  
            android:topRightRadius="5dip"  
            android:bottomLeftRadius="5dip"  
            android:bottomRightRadius="5dip" />  
      </shape>  
   </item>  
   <item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">  
     <shape>  
        <gradient   
            android:startColor="#FFEC7600" android:endColor="#FFFED69E"   
            android:type="linear" android:angle="90"  
            android:centerX="0.5" android:centerY="0.5" />  
        <corners  
            android:topLeftRadius="5dip"  
            android:topRightRadius="5dip"  
            android:bottomLeftRadius="5dip"  
            android:bottomRightRadius="5dip" />  
      </shape>  
   </item>    
</layer-list> 

第二步写一个选择器

bg_button_select.xml

第三部，button中引用

android:background="@drawable/bg_button_select"

就这样简单 ，都去试试吧