Android Selector的簡寫

simplepeng發表於2019-01-22
Android

在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" />
複製程式碼

顯示效果如下：

Android Selector的簡寫

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

簡易寫法

我們只需要新建一個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>
複製程式碼

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

Android Selector的簡寫

總結

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

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

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

相關文章