1. 使用selector和图片设置Button的样式
selector是一个设置view样式的集合,通过它可以对各种view的各种状态设置不同的样式。比如在此设置当按钮在正常或者按下状态或者获取焦点时的背景图片。话不多说,下面说说如何通过selector来实现。
首先我们要准备几张图片,用以标示在按钮的不同状态。本人没有把全部状态的图片全部实现,只实现了正常、按下、获得焦点和不可用几个状态的,图片如下。用PS随便做的图片,显示效果可能不是太好,只是演示用。将几个图片拷到项目下的res->drawable目录中备用。
有了图片后我们就可以写selector了,在项目->res->drawable上右键,选择菜单New->Other,在弹出的窗口中选择Android XML File,点击下一步,在Root Element列表中选择selector,File右边输入要创建文件的名字,我们这里就叫做graphic_button,点击完成按钮结束,这时我们就能在编辑器中看一个以<selector>节点为根节点的xml文件,现在我们可以为selector加item子节点了,下面把加好子节点的xml直接贴上来了。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="@drawable/note_button_pressed"></item> <item android:state_focused="true" android:drawable="@drawable/note_button_focused"></item> <item android:state_enabled="false" android:drawable="@drawable/note_button_disable"></item> <item android:drawable="@drawable/note_button_normal"></item> <item android:state_selected="true" android:drawable="@drawable/note_button_normal"></item> <item android:state_checkable="true" android:drawable="@drawable/note_button_normal"></item> <item android:state_checked="true" android:drawable="@drawable/note_button_normal"></item> <item android:state_window_focused="true" android:drawable="@drawable/note_button_normal"></item> </selector> |
其中第一行,无任何状态的是正常状态下的背景图片
- state_pressed是当按钮按下时,比如在屏幕上触摸该按钮时,要显示的背景图片。
- state_focused是当按钮获得焦点时,按钮被高亮显示时,要显示的背景图片。
- state_enabled其值为false是当按钮不可用时要显示的背景图片
- state_selected当按钮是否为被选择状态时
- state_checkable只有当按钮可以进行可选和不可选状态的切换时才会用到此状态
- state_checked当按钮可选,并且按钮被选中或未选中时显示的背景图片
- state_window_focused 是指当前所在的窗口是否有焦点时要显示的背景图片,比如弹出一个系统消息或者对话框时此窗口是没有焦点的。
selector准备好了,我们可以设置按钮的背景样式了,不过先别急,为了更好的规划项目,我们还是为按钮创建一个样式来管理吧,打开项目->res->values->style.xml,在<resource>节点中加入如下xml片断
1 2 3 |
<style name="GraphicButton"> <item name="android:background">@drawable/graphic_button</item> </style> |
好,现在我们可以来设置按钮的style属性了,打开部局文件,添加三个按钮,在每个按钮的Style属性中输入@style/GraphicButton,或者直接在部局的xml文件中加入该属性。XML片断如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<Button android:id="@+id/button1" style="@style/GraphicButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" style="@style/GraphicButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:enabled="false"/> |
运行程序,点点按钮我们就可以看到效果了。button的属性android:enabled=”false”,focused状态需要代码来实现,有时间的时候再完善一下本演示。
注意:
1. 一定要注意各个状态的顺序,见这篇文章