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