Android-UI-项目中遇到的坑-RadioButton和TableLayout

本文链接： https://blog.csdn.net/qq_38376757/article/details/80931902

先看一下主图

默认状态：

选中状态：

先看一下样式：

首先想到的是绘制圆角背景，设置text颜色和选择器来实现

先看默认状态：圆角，背景透明，字体黑色。

如何实现？

绘制默认状态背景图：在drawable→radio_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 内部颜色，透明色 -->
    <solid android:color="#00000000" />
    <!-- 边缘线条颜色 -->
    <stroke
        android:width="1dp"
        android:color="#FFCCCCCC" />
    <!-- 圆角的弧度 -->
    <corners
        android:bottomLeftRadius="8dip"
        android:bottomRightRadius="8dip"
        android:topLeftRadius="8dip"
        android:topRightRadius="8dip" />
</shape>

注释很明显了，不做细讲。

这样绘制出来的xml就等于说是一张图片，可以做背景图设置在RadioButton的background中。

同理，绘制选中状态背景图：drawable→radio_bg_checked.xml

<!-- 内部颜色，蓝色 -->
<solid android:color="#FF279CFE" />

仅需稍作修改即可，其他不变，复制粘贴都不会我也没办法了。

至此，默认状态的背景图和选中状态的背景图算是绘制完成了。

接下来就用到selector选择器了！

同样，还是在drawable→radio_bg_selector.xml

中设置它的选择器，设置它的默认状态和选中状态。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中状态的bg-->
    <item android:drawable="@drawable/radio_bg_checked" android:state_checked="true" />
    <!--默认状态的bg-->
    <item android:drawable="@drawable/radio_bg" />
</selector>

这里引用的drawable就是刚才绘制的两张背景图，后边的state_checked="true"就是选中状态的设置。

到了这里，bg基本做完了，但是一看，还有个字体颜色啊

默认状态：黑色

选中状态：白色

看懂上面代码的小伙伴已经应该想到解决办法了，如法炮制

不会的看下来：

在color→radio_text_color_selector.xml（这里的color文件夹是在res下面的，和drawable同级，没有的自行创建。）

中创建一个RadioButton的字体颜色选择器。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中状态的字体颜色-->
    <item android:color="#FFFFFFFF" android:state_checked="true" />
    <!--默认状态的字体颜色-->
    <item android:color="#FF333333" />
</selector>

和radio_bg_selector的代码很相似吧，只是把属性改成了color然后赋值对应的值而已。

至此，背景图和文字颜色的选择器都已经弄好了，就要放到Radio上感受感受了。

<RadioButton
    android:layout_width="70dp"
    android:layout_height="28dp"
    android:layout_margin="13dp"
    android:background="@drawable/radio_bg_selector"
    android:button="@null"
    android:gravity="center"
    android:text="哈哈哈"
    android:textColor="@color/radio_text_color_selector" />

主要看他的background和textcolor都是引入的我们刚才创建的两个选择器。

值得一提的是：既然自定义了，就把button给设置成@null否则，还会引用默认样式。

可以先看一下效果：

很炫酷吧，至此，需要的效果都已经实现，仅仅实现这个效果的可以就此打住了！

进阶

接下来，再看一下主图

大概是6个RadioButton和1个EditText。

我首先想到了LinearLayout中放置3个RadioButton，放置两行LinearLayout

可是，很难看。并且：监听checked事件无效，查阅之后发现：

RadioButton需要在RadioGroup中才能使用，并且RadioGroup下只能有直接子级RadioButton，即RadioGroup中不能嵌套任何布局，也就是说，RadioGroup只能写成（个人理解，大神勿喷）

<RadioGroup>

    <RadioButton/>

    <RadioButton/>

    <RadioButton/>

    <RadioButton />
    
</RadioGroup>

这样，哇，很难受。而我的RadioGroup中放置了2个LinearLayout，每个LinearLayout再放置3个RadioButton

所以嵌套的RadioButton就是无效的。

接着，我搜到了一个自定义RadioGroup，《自动换行的RadioGroup》（这里最后放弃了这个方案，感兴趣的自行搜索，这里不细讲！）

哇，兴高采烈，效果是出来了，6个RadioButton整整齐齐的排列着，很带劲

但是一细看，下面还有一个EditText，我靠，并且是对齐的。

我尝试着将EditText放了进去了，结果可想而知，我为我的愚蠢感到绝望。

接着，我想到了TableLayout，这可是个好东西啊。

哎，很成功。给大家放一下基本布局。

<TableLayout>
    <TableRow>
        <RadioButton />
        <RadioButton />
        <RadioButton />
    </TableRow>
    <TableRow>
        <RadioButton />
        <RadioButton />
        <RadioButton />
    </TableRow>
    <TableRow>
        <EditText android:layout_span="2" />
    </TableRow>
</TableLayout>

注意这里的span=2，这里让EditText占用两格实现上上方radioButton自动对齐。

哈哈，我稍微骄傲了一下，就马上发现，这RadioGroup只能放RadioButton呀，然后就废掉了《自动换行的RadioGroup》

最后我还是查阅资料后，想出了一个相对完美的解决方案。

将RadioButton改成CheckBox，不受RadioGroup的约束，在逻辑代码里实现CheckBox的单选。

这只是一个思路，如何实现。

请看下一篇：还没写，233。

有错请指出！

Android-UI-项目中遇到的坑-RadioButton和TableLayout

猜你喜欢