1. 程式人生 > >Android點選View改變字型顏色和邊框背景

Android點選View改變字型顏色和邊框背景

  最近要做一個仿網易嚴選的底部彈出式選單,在彈出的選單中可以選擇具體的要買的商品,比如規格和購買數量等等;做到這裡時筆者想著給規格按鈕選項設定點選後改變字型顏色和邊框背景,用來顯示已選定的商品規格;
  這裡寫圖片描述
  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繪製的背景效果更好一些,更美觀一些,也可能是筆者用畫圖工具的水平不夠,使用哪種看情況而定吧!