這裡我舉例如何使用selector,layer-list完成button背景的層疊組合,從而有不同情形下不同效果
button_ctrl.xml中選取器
<?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/button_highlight_ctrl" />
<item android:drawable="@drawable/button_normal_ctrl" />
</selector>
button_highlight_ctrl.xml中兩層圖
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/button_highlight_back"
android:top="2dip"
android:right="2dip"
android:bottom="2dip"
android:left="2dip"/>
<item
android:drawable="@drawable/button_highlight_fore"
android:top="2dip"
android:right="2dip"
android:bottom="2dip"
android:left="2dip"/>
</layer-list>
button_highlight_back.xml中完成背景顏色的漸層
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="4dip"/>
<gradient
android:type="linear"
android:angle="270"
android:startColor="@color/highlight_button_start_color"
android:centerColor="@color/highlight_button_middle_color"
android:endColor="@color/highlight_button_end_color"/>
</shape>
button_highlight_fore是一張前景圖片,即按下時的頂部陰影:
至此,已完成高亮button的製作,接下來是普通button
button_normal_ctrl.xml中兩層圖
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/button_normal_back"
android:top="2dip"
android:right="2dip"
android:bottom="2dip"
android:left="2dip"/>
<item
android:drawable="@drawable/button_normal_fore"
android:top="2dip"
android:right="2dip"
android:bottom="1dip"
android:left="2dip"/>
</layer-list>
button_normal_back.xml和button_normal_fore處理類似高亮,不貼代碼了
下面是運行效果:
普通 高亮
當然前面不一定寫字元,可以是一張圖片。總之變化可以多樣,核心思想是一致的。