Android使用选择器selector

 

• 前期工作

1、自定义图形shape

有适合的背景图片可以忽略这一步。

在目录res--->drawable上右键，然后如图所示创建文件，选择Root element 为shape。这样就创建好了一个文件。现在需要自定义图形了

自定义简单图形的代码很简单，无非就是选择图形的形状，然后设置背景颜色、边框之类的。

默认背景：我这里是选择的矩形，设置背景颜色为白色，边框为黑色，边框的宽度为1dp；设置30dp的圆角效果。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--rectangle：设置一个矩形-->
    <!--设置背景颜色-->
    <solid android:color="@color/white"/>
    <!--设置边框-->
    <stroke android:color="@color/black" android:width="1dp"/>
    <!--设置圆角效果-->
    <corners android:radius="30dp"/>
</shape>

选中背景：和默认背景类似，将背景颜色、边框设置为蓝色，边框的宽度为1dp；设置30dp的圆角效果。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--rectangle：设置一个矩形-->
    <!--设置背景颜色-->
    <solid android:color="@color/powderblue"/>
    <!--设置边框-->
    <stroke android:color="@color/blue" android:width="1dp"/>
    <!--设置圆角效果-->
    <corners android:radius="30dp"/>
</shape>

1. 设置选择器

创建文件和自定义图形的步骤差不多，区别在于选择Root element 为selector。

2.1、文本选择器

设置选中时的文本颜色为红色，未选中和默认时的颜色都为黑色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中的颜色-->
    <item android:state_checked="true" android:color="@color/red"/>
    <!--未选中的颜色 -->
    <item android:state_checked="false" android:color="@color/black"/>
   <!--默认的颜色-->
    <item android:color="@color/black" />
</selector>

2.1、背景选择器

设置选中、未选中和默认时的背景为均为前面自定义的不同图形

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--单选按钮选中时的背景-->
    <item android:state_checked="true" android:drawable="@drawable/radio_background_checked"/>
   <!--单选按钮未选中的背景-->
    <item android:state_checked="false" android:drawable="@drawable/radio_background"/>
    <!--单选按钮默认的背景-->
    <item android:drawable="@drawable/radio_background"/>
</selector>

• 使用选择器selector

使用线性布局的纵向布局，设置背景颜色为白色。

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

<!--使用单选按钮组，为确保只能单选，使用纵向布局-->
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:orientation="vertical">

<!--设置单选按钮的高度自适应，宽度占满、文本、字体大小为20sp；设置文本颜色为之前定义的文本选择器（textColor="@drawable/checked_text"）；背景为之前定义的背景选择器（background="@drawable/checked_background"）；去掉单选按钮的小圆圈（button="@null"）；设置内外边距，使布局更好看-->
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="选项一"
            android:textSize="20sp"
            android:textColor="@drawable/checked_text"
            android:background="@drawable/checked_background"
            android:button="@null"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingLeft="20dp"
            android:layout_marginBottom="15dp"/>
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="选项二"
            android:textSize="20sp"
            android:textColor="@drawable/checked_text"
            android:background="@drawable/checked_background"
            android:button="@null"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingLeft="20dp"
            android:layout_marginBottom="15dp"/>
    </RadioGroup>
</LinearLayout>