最近要做一個仿網易嚴選的底部彈出式菜單,在彈出的菜單中可以選擇具體的要買的商品,比如規格和購買數量等等;做到這裏時筆者想着給規格按鈕選項設置點擊後改變字體顏色和邊框背景,用來顯示已選定的商品規格;
1、首先在values文件下新建一個style.xml,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="my_button_style" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/my_button_border</item>
<item name="android:textColor">@drawable/text_color</item>
</style>
</resources>
2、然後在drawable文件下新建my_button_border.xml和text_color.xml兩個選擇器,前者是在點擊button時用來改變邊框背景,後者是用來改變字體顏色;
my_button_border.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/border_selected" /> <!--點擊後邊框背景-->
<item android:drawable="@drawable/border_normal" /> <!--默認邊框背景-->
</selector>
text_color.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/red"></item> <!--點擊後字體顏色-->
<item android:color="@color/black"></item> <!--默認字體顏色-->
</selector>
3、在佈局文件中使用我們自己定義的style.xml樣式文件,方法如下代碼所示:
<Button
style="@style/my_button_style"
android:id="@+id/yuan_mu_se"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="原木色1400*820*750mm"
android:gravity="center"
android:padding="4dp"
android:textSize="14dp" />
還可以這樣使用我們設置的字體顏色和邊框背景,方法如下代碼所示:
<Button
android:id="@+id/tao_mu_se"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="@drawable/my_button_border"
android:text="桃木色1400*820*750mm"
android:padding="4dp"
android:textColor="@drawable/text_color"
android:gravity="center"
android:textSize="14dp" />
兩種方法都可以實現我們所需要效果,點擊文本框實現字體顏色和邊框背景的改變;
4、上面的my_button_border.xml選擇器是用改變邊框背景圖片的方式來實現改變邊框背景的,這裏最好使用.9圖,從而可以做到自適應的效果;下面不使用.9圖,使用shape來進行背景的繪製,新建button_border_focused.xml和button_border_normal.xml;
button_border_focused.xml的代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" /> <!--設置圓角的半徑-->
<stroke
android:width="2dip"
android:color="#ff0000" />
</shape>
button_border_normal.xml的代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="2dip"
android:color="#000000" />
</shape>
修改my_button_border.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_border_focused" /> <!--點擊後邊框背景-->
<item android:drawable="@drawable/button_border_normal" /> <!--默認邊框背景-->
</selector>
使用shape繪製的背景,效果如下所示:
與開始的那張演示動畫相比,shape繪製的背景效果更好一些,更美觀一些,也可能是筆者用畫圖工具的水平不夠,使用哪種看情況而定吧!