在Android中搭建图标+文字的按钮显示效果如下图:
添加图标:
使用RadoiGroup来包含三个RadioButton:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@drawable/bg_layout_border_top"
android:padding="5dp">
<!--主页-->
<RadioButton
android:id="@+id/rb_main_home"
android:checked="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/selector_name_rb_home"
android:textColor="@drawable/selector_main_rb_text"
android:button="@null"
android:textAlignment="center"
android:gravity="center"
android:text="主页"/>
属性说明:
设置头部边框:@drawable/bg_layout_border_top
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427191114394.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427191119766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODMwNw==,size_16,color_FFFFFF,t_70)
设置头部图标@drawable/selector_name_rb_home:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200427191129449.png)
设置字体@drawable/selector_main_rb_text:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020042719114667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODMwNw==,size_16,color_FFFFFF,t_70)
设置了了一个radioButton之后,复制添加另外两个图标即可;
android:button="@null" : 将图标的默认图案去除;
android:checked="true" : 设置为默认选项,需要先设置其id
android:textAlignment="center":设置文本居中,需gravity属性配合使用
android:gravity="center":配合textAlignment属性使用;