Android selector实现点选效果

2019-10-22 15:25:48 浏览数 (1)

在做iOS的过程中实现点选效果一般采用layer外加逻辑判断等都是在代码中实现的,然而在Android很多东西都是通过xml进行配置进来的

我们为radio实现选中、非选中实现不同的UI外观展示

上图中,在一个radiogroup中我们设置了3个radiobutton,然后一个作为参照

代码语言:javascript复制
<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layer_selector_selected"
        android:checked="true"
        android:text="选中状态 底部的红线宽--5dp" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="默认是非选中的,没加背景" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="没有选中,底部红线窄,大概有--3dp"
        android:checked="false"
        android:background="@drawable/layer_selector_selected" />
</RadioGroup>
代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <color android:color="#f00" />
            </item>
            <item android:bottom="5dp">
                <color android:color="#fff" />
            </item>

        </layer-list>
    </item>
    <item android:state_checked="false">
        <layer-list>
            <item>
                <color android:color="#f00"/>

            </item>
            <item android:bottom="2dp">
                <color android:color="#fff"/>
            </item>
        </layer-list>
    </item>
</selector>

代码中我们看到,1 3按钮设置了我们的selector作为背景,我们分析一下过程

1 底部阴影实现

代码语言:javascript复制
 <item android:state_checked="false">
        <layer-list>
            <item>
                <color android:color="#f00"/>

            </item>
            <item android:bottom="2dp">
                <color android:color="#fff"/>
            </item>
        </layer-list>
    </item>

我们的selector中有两个item,内部分别采用layer-list实现图层的叠加,然后顶部item填充的时候留白,即实现出底部的颜色线条

2 根据状态不同selector自动判断加载item

在本例selector中的外出item的state_checked的状态与radiobutton的选中非选中状态对应,然后加载不同item,而每个item每部基本相同,只是留白范围不同造成选中给选中的视觉差,从而区分

扩展思考

在selector中还可以设置其他的状态--按压 获取焦点等状态,大家可以结合这些即可实现UI按压时,页面展示时候的不同效果

0 人点赞