Android selector实现点选效果

大话swift

发布于 2019-10-22 15:25:48

8800

发布于 2019-10-22 15:25:48

文章被收录于专栏：大话swift

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

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

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

<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>

<?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 底部阴影实现

 <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按压时，页面展示时候的不同效果

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-10-20，如有侵权请联系 cloudcommunity@tencent.com 删除

ios