Android 中 RadioGroup 设置圆角
2018-04-28 本文已影响0人
uniapp
Android 开发中，我们常常会用到点击 Tab 切换显示 UI 的界面，如下图所示：转入、转出和记录三个按钮，在同一个时间只允许一个按钮置于选中状态。
设置圆角
Android 提供的 RadioGroup 控件，能够很好的实现上述需求。我们知道，点击按钮 RadioButton 时状态的切换，可以通过设置其 background 和 textColor 的属性来实现。如果简单设置 item 的 corners 标签，会出现如下折叠的效果：
折叠
为了解决上述折叠我们可以通过 layer-list 来实现，通过设置两层 shape 来相互叠加成想要的效果：
叠加
下面看具体代码：
1 左边 RadioButton 的 background 属性
transfer_left.xml 设置：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<layer-list>
<!--边距-->
<item>
<shape android:shape="rectangle">
<stroke android:color="@color/txtBlue" android:width="1dp"></stroke>
<corners android:bottomLeftRadius="2dp" android:topLeftRadius="2dp"
android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
<padding android:bottom="1dp" android:top="1dp" android:left="1dp" android:right="0dp"/>
</shape>
</item>
<!--实体-->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/txtWhite"/>
<corners android:bottomLeftRadius="2dp" android:topLeftRadius="2dp"
android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
<padding android:bottom="0dp" android:top="0dp" android:left="0dp" android:right="0dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list>
<!--边距-->
<item>
<shape android:shape="rectangle">
<stroke android:color="@color/txtBlue" android:width="1dp"></stroke>
<corners android:bottomLeftRadius="2dp" android:topLeftRadius="2dp"
android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
<padding android:bottom="1dp" android:top="1dp" android:left="1dp" android:right="0dp"/>
</shape>
</item>
<!--实体-->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/txtBlue"/>
<corners android:bottomLeftRadius="2dp" android:topLeftRadius="2dp"
android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
<padding android:bottom="0dp" android:top="0dp" android:left="0dp" android:right="0dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
2 中间 RadioButton 的 background 属性 tranfer_center.xml 设置：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<padding android:right="0dp" android:left="0dp" android:top="1dp" android:bottom="1dp"/>
<stroke android:color="@color/txtBlue" android:width="1dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<padding android:right="0dp" android:left="0dp" android:top="1dp" android:bottom="1dp"/>
<solid android:color="@color/txtBlue"/>
</shape>
</item>
</selector>
3 右边 RadionButton 的 background 属性 tranfer_right.xml 设置：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<layer-list>
<!--边距-->
<item>
<shape android:shape="rectangle">
<stroke android:color="@color/txtBlue" android:width="1dp"></stroke>
<corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
android:bottomRightRadius="2dp" android:topRightRadius="2dp"/>
<padding android:bottom="1dp" android:top="1dp" android:left="0dp" android:right="1dp"/>
</shape>
</item>
<!--实体-->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/txtWhite"/>
<corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
android:bottomRightRadius="2dp" android:topRightRadius="2dp"/>
<padding android:bottom="0dp" android:top="0dp" android:left="0dp" android:right="0dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="true">
<layer-list>
<!--边距-->
<item>
<shape android:shape="rectangle">
<stroke android:color="@color/txtBlue" android:width="1dp"></stroke>
<corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
android:bottomRightRadius="2dp" android:topRightRadius="2dp"/>
<padding android:bottom="1dp" android:top="1dp" android:left="0dp" android:right="1dp"/>
</shape>
</item>
<!--实体-->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/txtBlue"/>
<corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
android:bottomRightRadius="2dp" android:topRightRadius="2dp"/>
<padding android:bottom="0dp" android:top="0dp" android:left="0dp" android:right="0dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
然后统一设置 RadioButton 的文字颜色 textColor 属性:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/txtBlue" android:state_checked="false"/>
<item android:color="@color/txtWhite" android:state_checked="true"/>
</selector>
最后可以在 xml 布局中使用上述定义的属性内容：
<RelativeLayout ...>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_below="@+id/title_view"
android:layout_marginTop="30dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_width="match_parent"
android:layout_centerHorizontal="true"
android:layout_height="35dp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb1"
android:layout_width="0dp"
android:layout_weight="1"
android:button="@null"
android:text="转入"
android:textAlignment="center"
android:layout_height="30dp"
android:background="@drawable/tranfer_left"
android:textColor="@color/tranfer_text"
/>
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"
android:button="@null"
android:text="转出"
android:textAlignment="center"
android:layout_height="30dp"
android:background="@drawable/tranfer_center"
android:textColor="@color/tranfer_text"/>
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"
android:button="@null"
android:text="记录"
android:textAlignment="center"
android:layout_height="30dp"
android:background="@drawable/tranfer_right"
android:textColor="@color/tranfer_text"/>
</RadioGroup>
</RelativeLayout>
总结
RadioButton 的 background 属性是一层 layer ，不同形式和颜色的
layer 可以相互叠加。如果出现一个 layer 显示不出理想样式的情况，可以通过设置多个 layer 尝试实现。
github 源码： DrawCorners
