Android selector属性实例详解

Android selector属性实例详解

简介

在Android项目中，我们都会大量使用selector状态选择器，使控件配合用户的操作展示不同的状态，提升用户的体验效果。一般体现在字体，背景的切换方面，我们可以动态的使用代码去设置，也可以使用selector状态选择器去快速实现，推荐使用selector状态选择器，因为它简单方便，复用性强。
项目地址：DrawableDemo

创建方式：

1、以Xml方式写出状态选择器，然后将我们写好的selector状态器存在放res - drawable 或 res - color 文件夹下，较为常用
2、在代码中动态创建selector，实现不如前者简单，但胜在灵活，一般用在选择器状态改变频繁的情况下
前期注意（请格外注意）：
设置 bankground的时候，我们的selector状态选择器存放在res - drawable目录下
设置TextColor属性的时候，我们的selector状态选择器存放在res - color目录下
状态设置类型：

常用类型

//设置是否按压状态，true表示已按压状态，默认为false，主要用于需要点击事件处理的按钮类控件
android:state_pressed
//设置是否选中状态，true表示已选中，false表示未选中，此为view的一种状态
android:state_selected
//设置是否勾选状态，主要用于CheckBox和RadioButton，true表示已被勾选，false表示未被勾选
android:state_checked
//设置勾选是否可用状态，类似state_enabled，只是state_enabled会影响触摸或点击事件，state_checkable影响勾选事件
android:state_checkable
//设置是否获得焦点状态，true表示获得焦点，默认为false表示未获得焦点
android:state_focused
//设置触摸或点击事件是否可用状态，默认false表示不可用状态
android:state_enabled

较少使用类型

//设置当前窗口是否获得焦点状态，true表示获得焦点,false 表示未获得焦点，例如拉下通知栏或弹出对话框时， 当前界面就会失去焦点；另外，ListView的ListItem获得焦点时也会触发true状态，可以理解为当前窗口就是ListItem本身
android:state_window_focused
//设置是否被激活状态，true表示被激活，false表示未激活，API Level 11及以上才支持，可通过代码调用控件的
android:state_activated
//方法设置是否激活该控件
setActivated(boolean)
//设置是否鼠标在上面滑动的状态**，true表示鼠标在上面滑动，默认为false，API Level 14及以上才支持
selector标签下有两个比较有用的属性要说一下，添加了下面两个属性之后，则会在状态改变时出现淡入淡出效果，
//但必须在API Level 11及以上才支持
android:state_hovered
//状态改变时，旧状态消失时的淡出时间，以毫秒为单位
android:exitFadeDuration
//状态改变时，新状态展示时的淡入时间，以毫秒为单位
android:enterFadeDuration

源码

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:clickable="true"
                android:gravity="center"
                android:text="点击改变文字颜色"
                android:textAlignment="gravity"
                android:textColor="@color/btn_color_bg_selector"
                android:textSize="25sp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:background="@drawable/btn_bg_seletor"
                android:text="点击改变背景颜色"
                android:textColor="@color/colorAccent" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:background="@drawable/btn_bg_seletor"
                android:text="点击改变背景和文字颜色"
                android:textColor="@color/btn_color_bg_selector" />

            <CheckBox
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/check_bg_seletor"
                android:gravity="center"
                android:text="Checked：点击改变背景" />

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="45dp"
                android:layout_marginTop="10dp"
                android:button="@drawable/check_icon_bg"
                android:gravity="center"
                android:text="Checked：点击改变图片" />

            <RadioGroup
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/radio_btn_1"
                    style="@style/RadioStyle"
                    android:checked="true"
                    android:text="A" />

                <RadioButton
                    android:id="@+id/radio_btn_2"
                    style="@style/RadioStyle"
                    android:text="B" />

                <RadioButton
                    android:id="@+id/radio_btn_3"
                    style="@style/RadioStyle"
                    android:text="C" />

                <RadioButton
                    android:id="@+id/radio_btn_4"
                    style="@style/RadioStyle"
                    android:text="D" />

                <RadioButton
                    android:id="@+id/radio_btn_5"
                    style="@style/RadioStyle"
                    android:text="E" />
            </RadioGroup>

            <RadioGroup
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal">

                <RadioButton
                    android:id="@+id/radio_1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/tab_state_selector"
                    android:button="@null"
                    android:checked="true"
                    android:text="Tab1" />

                <RadioButton
                    android:id="@+id/radio_2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/tab_state_selector"
                    android:button="@null"
                    android:text="Tab2" />

                <RadioButton
                    android:id="@+id/radio_3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/tab_state_selector"
                    android:button="@null"
                    android:text="Tab3" />

                <RadioButton
                    android:id="@+id/radio_4"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/tab_state_selector"
                    android:button="@null"
                    android:text="Tab4" />
            </RadioGroup>

            <com.example.drawabledemo.TextViewSelected
                android:id="@+id/tv_selected"
                android:layout_width="wrap_content"
                android:layout_height="150dp"
                android:layout_margin="10dp"
                android:background="@drawable/selected_selector"
                android:gravity="center"
                android:padding="10dp"
                android:text="TextView+Selected"
                android:textAlignment="gravity"
                android:textColor="@color/black"
                android:textSize="25sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_seletor_enable"
                    android:enabled="false"
                    android:padding="5dp"
                    android:text="按钮点击+Unenable"
                    android:textColor="@color/btn_enable_seletor"
                    android:textSize="20sp" />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_seletor_enable"
                    android:enabled="true"
                    android:padding="5dp"
                    android:text="按钮点击+Enable"
                    android:textColor="@color/btn_enable_seletor"
                    android:textSize="20sp" />
            </LinearLayout>

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foucs状态器"
                android:textColor="@color/foucs_color_seletor" />
        </LinearLayout>
    </ScrollView>


</LinearLayout>

资源目录：

btn_color_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_pressed="true"/>
    <item android:color="@color/colorAccent" />
</selector>

btn_bg_seletor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorGrayLight" android:state_pressed="true"/>
    <item android:drawable="@color/colorGray" />
</selector>

check_bg_seletor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" android:state_checked="true"/>
    <item android:drawable="@color/colorAccent" />
</selector>

check_icon_bg.xml

<?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/cb_true"/>
    <item android:drawable="@drawable/cb_false" android:state_checked="false"/>
</selector>

RadioStyle

<style name="RadioStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">30dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textColor">@color/radio_color_bg</item>
        <item name="android:background">@drawable/radio_bg_selector</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:textAlignment">gravity</item>
    </style>

radio_color_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_checked="true"/>
    <item android:color="@color/white" />
</selector>

radio_bg_selector.xml

<?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_bg_checked"/>
    <item android:state_checked="false" android:drawable="@drawable/radio_bg_unchecked"/>
</selector>

radio_bg_checked.xml

<?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_bg_checked"/>
    <item android:state_checked="false" android:drawable="@drawable/radio_bg_unchecked"/>
</selector>

radio_bg_unchecked.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充 -->
    <solid android:color="@color/colorGray" />
    <!-- 圆角 -->
    <corners android:radius="5dp" />
</shape>

tab_state_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一种加载方式 -->
    <!--<item android:drawable="@drawable/bg_tab_selected" android:state_checked="true" />-->
    <!-- 第二种加载方式 -->
    <item android:state_checked="true">
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="4dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- 红色背景 -->
            <item>
                <color android:color="#E4007F" />
            </item>
            <!-- 白色背景 -->
            <item android:bottom="1dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>
</selector>

selected_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <stroke android:width="2dp" android:color="@color/colorAccent" />
            <solid android:color="#0000" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="#0000" />
        </shape>
    </item>
</selector>

btn_seletor_enable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" android:state_enabled="true" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="false" android:state_enabled="true" />
    <item android:state_enabled="false" android:state_pressed="false" android:drawable="@color/colorGray"/>
</selector>

foucs_color_seletor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_focused="true"/>
    <item android:color="@color/colorAccent" />
</selector>