Android Selector的簡寫

摘要： 在Android中，我們需要實現一個View的點選或選中樣式的改變，大多數情況下我們都是使用 drawable 檔案，也就是 selector , shape 等組成的資原始檔。大致套路如下的常規寫法： 常規寫法 比如新建一個正常狀態下的shape檔案 sp_normal.xml...

在Android中，我們需要實現一個View的點選或選中樣式的改變，大多數情況下我們都是使用 drawable 檔案，也就是 selector , shape 等組成的資原始檔。大致套路如下的常規寫法：

常規寫法

比如新建一個正常狀態下的shape檔案 sp_normal.xml ，選中狀態的 sp_checked.xml ，組合兩個shape的 sr_default.xml 。

<?xml version="1.0" encoding="utf-8"?>
<!--sp_normal.xml-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/black" />
<corners android:radius="4dp" />
</shape>
複製程式碼

<?xml version="1.0" encoding="utf-8"?>
<!--sp_checked.xml-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_red_light" />
<corners android:radius="4dp" />
</shape>
複製程式碼

<?xml version="1.0" encoding="utf-8"?>
<!--sr_default.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/sp_normal" android:state_checked="false" />
<item android:drawable="@drawable/sp_checked" android:state_checked="true" />
</selector>
複製程式碼

然後將 sr_default.xml 設定給View的 background

<CheckedTextView
android:id="@+id/tv_normal_n"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:background="@drawable/sr_default"
android:checked="false"
android:padding="10dp"
android:text="普通的 checked == false"
android:textColor="@android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<CheckedTextView
android:id="@+id/tv_normal_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@drawable/sr_default"
android:checked="true"
android:padding="10dp"
android:text="普通的 checked == true"
android:textColor="@android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_normal_n" />
複製程式碼

顯示效果如下：

下面我們來看看怎麼簡寫這個樣式。

簡易寫法

我們只需要新建一個 sr_simplify.xml 檔案，父標籤是 selector ，子shape標籤用 item 標籤包裹。

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

<item android:state_checked="false">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/black" />
<corners android:radius="4dp" />
</shape>
</item>

<item android:state_checked="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_red_light" />
<corners android:radius="4dp" />
</shape>
</item>

</selector>
複製程式碼

佈局跟上面佈局差不多，直接看顯示效果：

總結

我們實踐發現兩種寫法都可以實現同樣的需求，但是具體要使用哪種可以依據自己的實際情況來抉擇。

• 方式一可以實現更好的解耦，shape檔案也可以複用
• 方式二寫起來更加簡單，也減少了樣式檔案

原始碼地址：https://github.com/simplepeng/AndroidExamples/tree/master/example_simplify_selector