1. 从一个被低估的控件说起做 Android 开发这些年如果要我列一个被新手低估、被老手忽视的控件排行榜RadioButton绝对能排进前三。很多人第一次接触它就是在布局文件里拖几个出来配个RadioGroup跑起来能选中、能切换然后就觉得这玩意儿我会了转头去研究 RecyclerView 和 Compose 了。结果真到了项目里产品经理甩过来一张设计稿——圆角胶囊状的选项卡、带图标的分段选择器、选中时边框渐变、未选中时灰色描边——瞬间就懵了回头翻文档发现RadioButton原生样式根本撑不起这个需求。这篇内容就是冲着这个痛点来的。我会把RadioButton从最基础的用法一路讲到高级样式的定制包括button属性、selector状态选择器、自定义Drawable、RadioGroup的OnCheckedChangeListener与OnClickListener的区别、动态添加与移除、以及几个我在实际项目里踩过的坑。适合刚入门 Android 一两周的新手也适合做了两三年但一直没系统整理过这个控件的朋友。看完之后你应该能独立做出设计稿里 90% 以上的单选类 UI而不是每次都去网上抄一段看不懂的 XML。先说清楚一个概念RadioButton本质上是CompoundButton的子类和CheckBox是亲兄弟区别在于它默认和RadioGroup配合使用时具备互斥特性——同一组里只能选一个。这个互斥不是RadioButton自己实现的而是RadioGroup在背后做管理。理解这一点非常关键后面讲动态添加、讲监听器差异的时候全都绕不开它。2. 基础用法与核心机制拆解2.1 最简可用的一套写法先给一个能直接跑起来的最小示例布局文件里这样写RadioGroup android:idid/rg_gender android:layout_widthwrap_content android:layout_heightwrap_content android:orientationhorizontal RadioButton android:idid/rb_male android:layout_widthwrap_content android:layout_heightwrap_content android:text男 / RadioButton android:idid/rb_female android:layout_widthwrap_content android:layout_heightwrap_content android:text女 / /RadioGroup代码里获取选中值RadioGroup rgGender findViewById(R.id.rg_gender); rgGender.setOnCheckedChangeListener((group, checkedId) - { if (checkedId R.id.rb_male) { // 选中了男 } else if (checkedId R.id.rb_female) { // 选中了女 } });这段代码没什么难度但有几个细节新手经常忽略。第一RadioGroup的orientation默认是vertical如果你想要横排必须显式写horizontal。第二RadioButton的id必须设置否则checkedId拿不到有效值监听器里判断会失效。第三如果你在 XML 里给某个RadioButton设置了android:checkedtrue那么它所在的RadioGroup会以它作为初始选中项但如果你给多个都设了true只有最后一个生效——这个行为在不同版本上表现略有差异稳妥做法是只给一个设true或者干脆在代码里用check()方法指定。2.2 RadioGroup 到底做了什么很多人以为互斥是RadioButton自带的其实不是。RadioGroup继承自LinearLayout它重写了addView方法在子 View 被添加时检查是不是RadioButton如果是就给它设置一个内部的OnCheckedChangeListener。当某个子按钮被选中时RadioGroup会遍历所有子按钮把其他的checked状态置为false从而实现互斥。这个机制带来两个实际影响。一是如果你把RadioButton放在RadioGroup外面它就不会互斥可以同时选中多个这时候它表现得就像个CheckBox。二是如果你动态往RadioGroup里addView一个RadioButton互斥逻辑依然生效因为addView被重写了。但如果你用removeView移除当前选中的那个RadioGroup的checkedId会变成 -1监听器会回调一次checkedId -1这个坑后面会细说。还有一个容易混淆的点RadioGroup的check()方法会触发OnCheckedChangeListener而clearCheck()也会触发回调的checkedId是 -1。如果你在监听器里做了网络请求或者页面跳转一定要先判断checkedId ! -1否则会出现莫名其妙的空指针或者重复请求。2.3 两种监听器的本质区别这是新手最容易搞混的地方我单独拎出来讲。RadioGroup有两个监听器接口OnCheckedChangeListener和OnClickListener继承自 View。它们的触发时机完全不同。OnCheckedChangeListener只在选中状态发生变化时触发。也就是说如果某个按钮已经是选中状态用户再点它一次这个回调不会触发。而OnClickListener是每次点击都触发不管状态有没有变。这个差异在什么场景下重要举个例子你做了一个性别选择用户已经选了男又点了一次男如果你用OnCheckedChangeListener什么都不会发生如果你用OnClickListener会再触发一次。再比如你做的是一个确认提交类的单选用户重复点击同一个选项可能意味着我确认这个选择那你就需要OnClickListener。实际项目里我的建议是单纯获取选中值用OnCheckedChangeListener需要响应每次点击比如埋点、动画、二次确认用OnClickListener。两个可以同时设置互不干扰。3. 高级样式定制的完整路径3.1 为什么原生样式不够用原生RadioButton在 Material 主题下长这样左边一个圆形图标选中时填充主题色未选中时灰色描边右边是文字。这个样式在大多数场景下够用但设计稿往往不满足于此。常见的定制需求有这么几类把圆形图标换成自定义图标比如对勾、星星、心形选中和未选中用不同的背景色或边框整个按钮变成一个胶囊状的选项卡图标和文字居中去掉原生图标只用背景色区分选中状态选中时文字颜色也跟着变这些需求的核心都指向同一个技术点状态选择器StateListDrawable。Android 的Drawable体系支持根据 View 的状态state_checked、state_pressed、state_enabled等自动切换不同的资源RadioButton的android:button和android:background都支持这种选择器。3.2 用 selector 替换默认圆点先做最简单的把默认圆点换成一个自定义的对勾图标。在res/drawable/下新建rb_check_selector.xml?xml version1.0 encodingutf-8? selector xmlns:androidhttp://schemas.android.com/apk/res/android item android:state_checkedtrue android:drawabledrawable/ic_check_on / item android:state_checkedfalse android:drawabledrawable/ic_check_off / /selector然后在布局里RadioButton android:idid/rb_option android:layout_widthwrap_content android:layout_heightwrap_content android:buttondrawable/rb_check_selector android:text选项一 /这里有个细节要注意android:button控制的是左侧那个图标android:background控制的是整个按钮的背景。很多人第一次改样式会误以为改background就能换掉圆点结果发现圆点还在背景多了一层就是这个原因。另外state_checked的顺序很重要。selector是从上往下匹配的一旦匹配到就停止。所以state_checkedtrue必须写在state_checkedfalse前面否则永远匹配不到选中状态。这个规则对所有状态选择器都适用包括state_pressed、state_selected等。3.3 胶囊选项卡样式的完整实现这是设计稿里出现频率最高的一种样式我把它拆成三步来做。第一步准备两个背景 Drawable。选中态bg_tab_selected.xml?xml version1.0 encodingutf-8? shape xmlns:androidhttp://schemas.android.com/apk/res/android android:shaperectangle solid android:color#3F7EF7 / corners android:radius24dp / /shape未选中态bg_tab_normal.xml?xml version1.0 encodingutf-8? shape xmlns:androidhttp://schemas.android.com/apk/res/android android:shaperectangle solid android:color#F2F3F5 / corners android:radius24dp / /shape第二步写背景选择器bg_tab_selector.xml?xml version1.0 encodingutf-8? selector xmlns:androidhttp://schemas.android.com/apk/res/android item android:state_checkedtrue android:drawabledrawable/bg_tab_selected / item android:drawabledrawable/bg_tab_normal / /selector注意这里第二个item没有写state_checkedfalse这是有意为之——作为兜底项任何未匹配到的状态都用它。这种写法比显式写false更稳妥因为RadioButton还有state_pressed、state_focused等状态显式写false可能导致按下时背景闪一下。第三步文字颜色也要跟着变。在res/color/下新建text_tab_selector.xml?xml version1.0 encodingutf-8? selector xmlns:androidhttp://schemas.android.com/apk/res/android item android:state_checkedtrue android:color#FFFFFF / item android:color#333333 / /selector布局里这样用RadioButton android:idid/rb_tab_a android:layout_width0dp android:layout_height48dp android:layout_weight1 android:backgrounddrawable/bg_tab_selector android:buttonnull android:gravitycenter android:text选项A android:textColorcolor/text_tab_selector /关键点在于android:buttonnull这一句把原生圆点彻底去掉。如果不写这句圆点会叠在背景上非常难看。另外android:gravitycenter让文字居中配合layout_weight1实现等分宽度这是做选项卡的标准套路。3.4 带图标的分段选择器有些设计稿要求选项里既有图标又有文字选中时图标和文字都变色。这种需求比纯文字复杂一点因为 Android 原生不支持直接给drawableStart设置颜色选择器。我的做法是用drawableTintAPI 23配合textColor选择器。RadioButton android:idid/rb_with_icon android:layout_width0dp android:layout_heightwrap_content android:layout_weight1 android:backgrounddrawable/bg_tab_selector android:buttonnull android:drawableStartdrawable/ic_star android:drawablePadding6dp android:drawableTintcolor/text_tab_selector android:gravitycenter android:paddingVertical10dp android:text收藏 android:textColorcolor/text_tab_selector /drawableTint直接复用文字颜色的选择器这样图标和文字会同步变色省去单独写一套图标选择器的麻烦。如果你的minSdk低于 23需要用AppCompatRadioButton配合app:drawableTint或者用DrawableCompat.setTintList()在代码里处理。提示drawableTint在部分国产 ROM 的低版本系统上有兼容性问题如果发现图标不变色优先检查是否用了AppCompatRadioButton以及主题是否继承自Theme.AppCompat或Theme.MaterialComponents。4. 动态管理与实战场景4.1 动态添加 RadioButton 的正确姿势实际项目里选项往往来自接口返回数量不固定这时候就需要动态创建。标准写法是这样RadioGroup rg findViewById(R.id.rg_dynamic); rg.removeAllViews(); for (int i 0; i dataList.size(); i) { RadioButton rb new RadioButton(this); rb.setId(View.generateViewId()); rb.setText(dataList.get(i).getName()); rb.setTag(dataList.get(i).getId()); RadioGroup.LayoutParams lp new RadioGroup.LayoutParams( RadioGroup.LayoutParams.MATCH_PARENT, RadioGroup.LayoutParams.WRAP_CONTENT); lp.bottomMargin dp2px(8); rb.setLayoutParams(lp); rg.addView(rb); }这里有几个坑必须说清楚。第一setId一定要用View.generateViewId()不要用循环变量i因为i从 0 开始而 0 是View.NO_ID会导致checkedId判断异常。第二LayoutParams要用RadioGroup.LayoutParams用LinearLayout.LayoutParams在大多数情况下也能跑但类型不匹配可能在某些定制 ROM 上出问题。第三如果数据是复用的比如列表滚动记得先removeAllViews()否则会越加越多。4.2 动态添加后如何恢复选中状态这是动态场景里最容易被忽略的一步。假设用户选了第二项然后列表滚动导致 View 复用或者页面重建选中状态就丢了。解决办法是在添加完所有按钮后根据保存的数据手动checkfor (int i 0; i rg.getChildCount(); i) { View child rg.getChildAt(i); if (child instanceof RadioButton) { Object tag child.getTag(); if (tag ! null tag.equals(selectedId)) { ((RadioButton) child).setChecked(true); break; } } }注意这里用的是setChecked(true)而不是rg.check(id)。两者都能选中但rg.check()会触发OnCheckedChangeListener而setChecked()在RadioGroup内部也会触发。如果你在监听器里做了业务逻辑恢复状态时可能会误触发一次。稳妥做法是加一个标志位private boolean isRestoring false; rg.setOnCheckedChangeListener((group, checkedId) - { if (isRestoring) return; // 正常业务逻辑 }); // 恢复时 isRestoring true; rb.setChecked(true); isRestoring false;这个模式我在多个项目里用过非常稳。标志位的命名建议统一方便团队协作时一眼看懂。4.3 移除选中项引发的空指针前面提过removeView移除当前选中的RadioButton时RadioGroup的checkedId会变成 -1监听器会回调。如果你的监听器里直接拿checkedId去查数据就会拿到 null。处理方式很简单rg.setOnCheckedChangeListener((group, checkedId) - { if (checkedId View.NO_ID) { // 当前没有选中项直接返回 return; } // 正常逻辑 });View.NO_ID的值就是 -1用常量比直接写 -1 更规范。这个判断建议作为模板代码每次写OnCheckedChangeListener都加上能省掉很多排查时间。4.4 一个完整的收货地址选择实战我把上面这些点串起来做一个模拟的收货地址选择场景。需求是地址列表从接口获取单选选中项高亮支持动态刷新。布局部分RadioGroup android:idid/rg_address android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationvertical /代码部分private void renderAddressList(ListAddress list, String selectedId) { RadioGroup rg findViewById(R.id.rg_address); rg.setOnCheckedChangeListener(null); // 先解绑避免刷新时误触发 rg.removeAllViews(); for (Address addr : list) { RadioButton rb new RadioButton(this); rb.setId(View.generateViewId()); rb.setTag(addr.getId()); rb.setText(addr.getName() addr.getPhone()); rb.setButton(null); rb.setBackgroundResource(R.drawable.bg_address_selector); rb.setPadding(dp2px(16), dp2px(12), dp2px(16), dp2px(12)); RadioGroup.LayoutParams lp new RadioGroup.LayoutParams( RadioGroup.LayoutParams.MATCH_PARENT, RadioGroup.LayoutParams.WRAP_CONTENT); lp.bottomMargin dp2px(10); rb.setLayoutParams(lp); if (addr.getId().equals(selectedId)) { rb.setChecked(true); } rg.addView(rb); } rg.setOnCheckedChangeListener((group, checkedId) - { if (checkedId View.NO_ID) return; RadioButton checked group.findViewById(checkedId); if (checked ! null checked.getTag() ! null) { String id checked.getTag().toString(); // 处理选中逻辑 } }); }这段代码里有三个我特意加的处理。第一刷新前先setOnCheckedChangeListener(null)避免removeAllViews触发回调。第二setButton(null)去掉原生圆点用背景选择器区分选中态。第三setTag存业务 id比用checkedId反查更可靠因为checkedId是动态生成的每次刷新都变。5. 常见问题与排查速查5.1 高频问题对照表现象可能原因解决方式多个 RadioButton 能同时选中没有放在 RadioGroup 里用 RadioGroup 包裹监听器不触发id 未设置或重复每个按钮设置唯一 id选中状态丢失View 复用或页面重建手动恢复 checked 状态圆点去不掉只改了 background设置android:buttonnull文字颜色不变用了 color 而非 color selector用 selector 引用动态添加后越加越多未 removeAllViews添加前先清空移除选中项后崩溃checkedId 为 -1 未判断加View.NO_ID判断图标不变色未用 AppCompat 或 tint 不兼容用AppCompatRadioButton5.2 几个文档里不会写的经验第一个经验是关于padding和minHeight的。原生RadioButton有一个默认的minHeight和minWidth大约是 48dp这是为了满足触摸目标的最小尺寸要求。如果你做的是紧凑型选项卡设置layout_height36dp会发现实际高度还是 48dp原因就在这里。解决办法是设置android:minHeight0dp和android:minWidth0dp但要注意触摸区域会变小用户体验上要权衡。第二个经验是关于RadioGroup嵌套的。RadioGroup继承自LinearLayout理论上可以嵌套但嵌套后互斥逻辑只在各自的组内生效。如果你想要一级分类 二级分类的联动选择不要用嵌套RadioGroup而是用两个独立的RadioGroup在代码里手动清空另一个。嵌套RadioGroup在测量和布局上容易出问题尤其是配合ScrollView使用时。第三个经验是关于性能的。如果一个页面里有几十个RadioButton每个都配了复杂的selector和shape首次渲染会明显卡顿。优化方式是把shape的corners和solid尽量简化避免使用gradient因为渐变在低端机上绘制开销较大。如果选项超过 20 个建议改用RecyclerView配合单选逻辑而不是全部塞进RadioGroup。5.3 关于状态选择器的顺序陷阱再强调一次selector的匹配顺序因为这个问题我见过太多次了。假设你写了这样一个选择器selector item android:state_pressedtrue android:drawabledrawable/bg_pressed / item android:state_checkedtrue android:drawabledrawable/bg_checked / item android:drawabledrawable/bg_normal / /selector用户按下已选中的按钮时会匹配到state_pressed显示按下态这是对的。但如果顺序反过来state_checked写在前面那么按下已选中的按钮时会直接匹配state_checked按下态永远不显示。所以顺序原则是越具体的状态越靠前越通用的状态越靠后。state_pressed通常比state_checked更具体所以放前面。6. 写在最后的一点个人习惯做 Android 这些年我养成了一个习惯每做一个自定义样式的控件就把它的 selector、shape、color 三件套整理到一个独立的目录或者命名前缀下比如rb_开头。这样下次遇到类似需求直接复制改改就能用不用重新写一遍。RadioButton的样式定制尤其如此因为它的状态组合就那么几种整理一次能复用很久。另外如果你的项目已经迁移到 Material Components可以试试MaterialRadioButton和TabLayout的组合。TabLayout本质上就是一个高级版的单选组很多原本用RadioButton硬做的选项卡用TabLayout会更省事自带滑动指示器、水波纹、图标文字联动。但TabLayout的定制自由度不如手写RadioButton具体用哪个看设计稿的复杂度和团队的技术栈。最后分享一个小技巧调试selector的时候可以在item里临时加一个显眼的颜色比如亮红色跑起来看哪个状态匹配到了比对着代码猜快得多。调完再换回正式颜色。这个方法我在调state_pressed、state_focused、state_enabled组合的时候用过无数次屡试不爽。