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

來源：https://juejin.im/post/5c46b5d3e51d4507fb1d7ea5

相關文章