先看一下主图
默认状态:
选中状态:
先看一下样式:
首先想到的是绘制圆角背景,设置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。
有错请指出!