Android界面-按钮定制-drawable

这篇文章记录了怎么使用drawable中的StateList来实现自定义标题 以及 按钮，先看一下效果图吧：

先介绍一下drawable中的stateList

先看代码：

send_button.xml

[html] view plain copy print ?

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:state_pressed="true" android:drawable="@drawable/btn_pressed" />  
3.     <item android:state_focused="true" android:drawable="@drawable/btn_pressed" />  
4.     <item android:drawable="@drawable/btn_normal" />  
5. </selector>  

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

这段代码描述的是“发送”按钮，默认情况下，呈现的是btn_normal；当press或者focus的时候，为btn_pressed。两图片如下：

 

而stateList是一种drawable，所以上面的send_button.xml其实在android应用程序看来就是类似一张图片，不过这张图片是有状态的。 作为按钮，当点击这个控件时，它会提供一个友好的相应。

关于stateList，请参考官方文档：http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

Tips: 定义中的状态的匹配是按照顺序进行的，匹配到第一个成功就不往下匹配了（这里我也不太清楚具体的应用场景，反正就是提醒，定义状态的顺序是比较重要的，也可以把这里的状态类比有着break的switch语句块）。状态的顺序很重要，文章有个例子，参考那个例子就可以了，而对于按钮，运用本文中的例子也可以了。

使用drawable

跟使用图片是一样的，直接上代码：

[html] view plain copy print ?

1. <Button  
2.         android:id="@+id/sendbutton"  
3.         android:layout_width="wrap_content"  
4.         android:layout_height="wrap_content"  
5.        ...  
6.         android:background="@drawable/send_button"  
7.         android:text="发    送" />  

<Button
        android:id="@+id/sendbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       ...
        android:background="@drawable/send_button"
        android:text="发    送" />

本文中的例子还有一处使用了stateList，就是标题栏中跳转的导航按钮。

代码如下：

right_selector.xml

[html] view plain copy print ?

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:drawable="@drawable/right_selected" android:state_pressed="true"/>  
3.     <item android:drawable="@drawable/right_normal"/>  
4. </selector>  

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

[html] view plain copy print ?

1. <ImageButton  
2.          android:id="@+id/about_us_back_button"  
3.          android:layout_width="wrap_content"  
4.          android:layout_height="wrap_content"  
5.          ...  
6.          android:background="@drawable/right_selector"  
7.          android:src="@drawable/arrow_left" />  

<ImageButton
         android:id="@+id/about_us_back_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         ...
         android:background="@drawable/right_selector"
         android:src="@drawable/arrow_left" />