Android開發 如何使用選擇器(selector) 來實現點選按鈕變色

馬.發表於2019-02-26

如何使用選擇器(selector)來實現點選按鈕變色 簡單的選擇器操作



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 我們先寫一個按鈕 -->
    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="點選按鈕" />

</LinearLayout>

在values資料夾下新建個color.xml檔案,用來設定要顯示的顏色

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<!-- 設定顏色值 -->
    <color name="red">#FF0000</color>
    <color name="green">#00FF00</color>

</resources>

在drawable資料夾下新建一個選擇器,如圖
在這裡插入圖片描述
在選擇器裡面設定顏色值

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- pressed為true時,是按下按鈕,反則相反。drawable是選擇在values裡的顏色值 -->

    <item android:drawable="@color/green" android:state_pressed="true"></item>
    <item android:drawable="@color/red" android:state_pressed="false"></item>

</selector>

最後一步在按鈕控制元件里加上這段程式碼就可以了

 android:background="@drawable/background"

下面是佈局頁面的程式碼


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!--按鈕 -->

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:text="點選按鈕" />

</LinearLayout>

設定顏色的頁面

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<!-- 設定顏色值 -->
    <color name="red">#FF0000</color>
    <color name="green">#00FF00</color>

</resources>

設定選擇器的頁面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- pressed為true時,是按下按鈕,反則相反。drawable是選擇在values裡的顏色值 -->

    <item android:drawable="@color/green" android:state_pressed="true"></item>
    <item android:drawable="@color/red" android:state_pressed="false"></item>

</selector>

效果圖
在這裡插入圖片描述
在這裡插入圖片描述

相關文章