摘要：本文面向 Android 新手，系统讲解原生 UI 控件的核心用法，全程零依赖、纯代码可落地。内容涵盖 Drawable 图形绘制、九宫格拉伸、CheckBox/Switch、RadioButton、EditText、TextWatcher、AlertDialog、日期选择器，并通过「找回密码」「用户注册」两大实战案例串联全部知识点，助你快速构建稳定美观的原生界面。📑 目录① 图形 Drawable 资源定义与形状绘制② 九宫格图片拉伸与状态列表图形应用③ 复选框 CheckBox 与开关 Switch 基础用法④ 单选按钮 RadioButton 分组逻辑实现⑤ 编辑框 EditText 输入限制与焦点监听⑥ 文本变化监听器实时验证输入内容⑦ 提醒对话框 AlertDialog 多按钮交互设计⑧ 日期与时间选择器 Dialog 调用方法⑨ 综合实战：找回密码流程界面搭建⑩ 常见控件报错排查与适配注意事项⑪ 实战综合案例：用户注册表单完整搭建⑫ 实战总结在开发 Android 应用时，我们常常会遇到这样的场景：设计稿上的按钮圆角精致、背景渐变细腻，但代码里直接放一张 PNG 图片却在不同分辨率屏幕上变得模糊或变形；或者用户输入密码时忘了格式要求，提交后才报错，体验极差。这些看似细碎的问题，实则直接影响应用的质感与可用性。很多开发者初期容易忽略系统提供的原生控件能力，转而依赖第三方库或硬编码样式，结果导致包体积增大、维护成本上升。其实，Android 框架内建的 Drawable 资源机制、状态列表以及各类交互控件，已经能覆盖绝大多数 UI 需求。关键在于如何正确理解并组合使用它们。本文将围绕从图形绘制到复杂交互的完整链条，带你一步步掌握原生控件的核心用法，最终通过一个“找回密码”的真实流程，把所有知识点串联起来，让你不再被基础界面问题卡住。① 图形 Drawable 资源定义与形状绘制Android 中的 Drawable 不仅仅是一张图片，它更像是一个可绘制的抽象层。除了常见的位图（Bitmap），我们还可以用 XML 定义矢量形状、渐变、图层叠加等效果。这种方式的优势在于完全由代码控制，无需额外图片资源，适配各种屏幕密度时也不会失真。下面我们从最常用的shape标签入手，逐步掌握形状绘制的核心技巧。比如，要画一个带圆角和边框的蓝色矩形背景，传统做法是让设计师切图，而现在只需创建一个res/drawable/rounded_box.xml文件：shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"solidandroid:color="#E3F2FD"/cornersandroid:radius="12dp"/strokeandroid:width="1dp"android:color="#90CAF9"/paddingandroid:left="8dp"android:top="8dp"android:right="8dp"android:bottom="8dp"//shape这段代码定义了一个实心填充、圆角为 12dp、带有浅蓝边框的矩形，并设置了内部留白。在布局中直接通过android:background="@drawable/rounded_box"引用即可。如果需要线性渐变，可以将solid替换为gradient，指定起始色、结束色和方向。这种纯 XML 定义的图形不仅轻量，还能在运行时动态修改颜色或尺寸，非常适合主题切换或夜间模式支持。除了矩形，shape还支持圆形、椭圆和线条等形状。下面是一个圆形按钮背景的示例，常用于头像占位、角标或悬浮按钮：!-- res/drawable/circle_button.xml --shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"solidandroid:color="#FF7043"/strokeandroid:width="2dp"android:color="#FFFFFF"/sizeandroid:width="48dp"android:height="48dp"//shape将android:shape设为oval并让宽高相等，即可得到一个正圆形。配合size指定固定尺寸，再通过stroke添加白色描边，一个简洁的圆形按钮背景就完成了。若宽高不等，则会自动渲染为椭圆。再看一个更复杂的场景——图层叠加（Layer List）。当我们需要在一个背景上同时呈现多个图形（比如底部阴影 + 顶部圆角卡片）时，可以用layer-list把多个 drawable 按顺序叠放：!-- res/drawable/card_shadow.xml --layer-listxmlns:android="http://schemas.android.com/apk/res/android"!-- 底层：模拟阴影的深色圆角矩形 --itemandroid:left="0dp"android:top="4dp"android:right="0dp"android:bottom="0dp"shapeandroid:shape="rectangle"solidandroid:color="#33000000"/cornersandroid:radius="12dp"//shape/item!-- 顶层：实际卡片内容背景 --itemandroid:left="0dp"android:top="0dp"android:right="0dp"android:bottom="4dp"shapeandroid:shape="rectangle"solidandroid:color="#FFFFFF"/cornersandroid:radius="12dp"//shape/item/layer-listlayer-list中的 item 按照从上到下的顺序绘制，后面的 item 会覆盖在前面的 item 之上。通过调整每个 item 的left/top/right/bottom偏移，可以制造出卡片浮起的阴影效果，无需引入任何图片资源。此外，shape还支持gradient实现丰富的渐变效果。除了常见的线性渐变（linear），还有径向渐变（radial）和扫描渐变（sweep）。例如，一个从左上到右下的线性渐变背景：!-- res/drawable/gradient_bg.xml --shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"gradientandroid:startColor="#FF9800"android:endColor="#F44336"android:angle="45"/cornersandroid:radius="16dp"//shapeandroid:angle控制渐变方向，必须是 45 的倍数（0 表示从左到右，90 表示从下到上）。配合圆角，一个漂亮的渐变按钮背景就完成了。这些 XML 定义的图形资源都可以直接作为android:background使用，也能在代码中通过ContextCompat.getDrawable()动态获取并修改，灵活度非常高。② 九宫格图片拉伸与状态列表图形应用当背景需要包含不可拉伸的区域（如按钮的圆角或图标）时，普通缩放会导致边缘变形。此时九宫格（NinePatch）图片就派上用场了。九宫格是一种特殊的 PNG 格式，文件名以.9.png结尾，其四周有一圈黑色像素标记出可拉伸区域和内容安全区。下面我们先从原理讲起，再给出一个完整的实战示例。制作九宫格图可以使用 Android Studio 自带的 Draw 9 Patch 工具。加载普通 PNG 后，在左侧和上侧黑边处点击划定拉伸范围，右侧和下侧则定义内容显示区域。保存后系统会自动识别并在不同尺寸视图中智能拉伸中间部分，保留四角不变形。为了更直观地理解，我们看一个典型的九宫格按钮背景。假设设计稿给了一张带圆角和渐变阴影的按钮图，我们希望它在不同文字长度下都能保持四角圆润、中间平滑拉伸。制作时只需在左侧和上侧各画一条黑线标记可拉伸区域，右侧和下侧标记内容安全区即可：!-- res/drawable/btn_bg.9.png 的引用方式 --Buttonandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/btn_bg"android:text="登录"/这里btn_bg.9.png被系统自动识别为九宫格，无论按钮宽度如何变化，四角的圆角都不会被拉伸变形，中间的渐变区域则平滑铺满。相比普通 PNG，九宫格在适配不同屏幕宽度时表现更稳定，是按钮、气泡、输入框背景的首选方案。更进一步，我们可以结合状态列表（State List Drawable）让同一个背景根据控件状态自动切换。例如，一个按钮在按下、聚焦、禁用时显示不同颜色。下面是一个完整的selector示例，它把九宫格背景与状态切换结合起来，实现点击态、聚焦态、禁用态和默认态的自动切换：!-- res/drawable/btn_selector.xml --selectorxmlns:android="http://schemas.android.com/apk/res/android"!-- 按下态：使用按下时的九宫格背景 --itemandroid:state_pressed="true"android:drawable="@drawable/btn_bg_pressed"/!-- 聚焦态：键盘或遥控器聚焦时 --itemandroid:state_focused="true"android:drawable="@drawable/btn_bg_focused"/!-- 禁用态：控件不可用时 --itemandroid:state_enabled="false"android:drawable="@drawable/btn_bg_disabled"/!-- 默认态：必须放在最后 --itemandroid:drawable="@drawable/btn_bg_normal"//selector在布局中直接引用这个 selector 即可：Buttonandroid:id="@+id/btn_submit"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/btn_selector"android:text="提交"/系统将按顺序匹配条件，一旦满足即应用对应 drawable。最后一个 item 作为默认状态必须放在最后。这种机制广泛用于按钮、文本框等交互元件，极大提升了 UI 的动态反馈能力。这里有两个新手容易踩的坑需要提醒：一是顺序问题，state_pressed和state_focused等条件必须放在默认 item 之前，否则永远匹配不到；二是状态叠加，比如按钮在按下时同时处于聚焦状态，系统会按从上到下的顺序匹配第一个满足条件的 item，所以通常把state_pressed放在最前面，确保按下反馈优先。此外，state_enabled="false"的 item 要放在默认态之前，否则禁用态会被默认态覆盖。掌握了九宫格与状态列表的组合用法，你就能在不引入任何第三方库的情况下，做出点击反馈清晰、适配各种屏幕的原生按钮。这也是后续综合实战中“找回密码”页面按钮背景的实现基础。③ 复选框 CheckBox 与开关 Switch 基础用法多选场景下，CheckBox 是最常用的控件。它的核心在于监听选中状态变化。在布局中声明后，可通过setChecked()设置初始状态，用isChecked()获取当前值。关键是要绑定OnCheckedChangeListener来响应用户操作。下面先看一个完整的布局声明示例：!-- 布局中的 CheckBox 声明 --CheckBoxandroid:id="@+id/agree_checkbox"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="false"android:text="我已阅读并同意用户协议"/!-- 布局中的 Switch 声明 --Switchandroid:id="@+id/notify_switch"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:text="接收消息通知"/android:checked用于设置初始选中状态，true表示默认选中，false表示默认未选中。在代码中，setChecked()可动态改变状态，isChecked()则用于读取当前值。下面通过 Java 代码演示如何监听 CheckBox 的状态变化：CheckBoxagreeBox=findViewById(R.id.agree_checkbox);agreeBox.setOnCheckedChangeListener((buttonView,isChecked)-{if(isChecked){// 用户同意协议，启用提交按钮submitBtn.setEnabled(true);}else{submitBtn.setEnabled(false);}});对应的 Kotlin 版本如下，借助setOnCheckedChangeListener的 SAM 转换，代码更加简洁：valagreeBox=findViewByIdCheckBox(R.id.agree_checkbox)agreeBox.setOnCheckedChangeListener{_,isChecked-// 用户同意协议，启用提交按钮submitBtn.isEnabled=isChecked}这里有两个 Kotlin 的典型优势：一是监听器简写，Kotlin 对 Java 单方法接口（SAM）自动支持 lambda 转换，(buttonView, isChecked) -可省略为{ _, isChecked - }，未使用的参数用下划线占位；二是空安全，findViewByIdCheckBox返回可空类型，配合!!或?可显式处理空引用，避免 Java 中隐式的NullPointerException。此外，setEnabled(true/false)在 Kotlin 中直接写作属性赋值isEnabled = isChecked，语义更直观。注意避免在监听器内部再次调用setChecked()，否则会触发无限循环。对于 Switch 控件，用法几乎一致，只是视觉风格更现代化，常用于设置项中的开关控制。下面是一个 Switch 的独立监听示例：SwitchnotifySwitch=findViewById(R.id.notify_switch);notifySwitch.setOnCheckedChangeListener((buttonView,isChecked)-{if(isChecked){// 开启通知，更新通知相关配置enableNotifications();}else{// 关闭通知disableNotifications();}});对应的 Kotlin 版本同样简洁：valnotifySwitch=findViewByIdSwitch(R.id.notify_switch)notifySwitch.setOnCheckedChangeListener{_,isChecked-if(isChecked)enableNotifications()elsedisableNotifications()}两者都支持自定义 thumb 和 track 的 drawable，实现品牌化样式。例如，可以通过android:thumb和android:track属性指定自定义 drawable，或使用android:button替换 CheckBox 的默认勾选图标。在代码中也可通过setButtonDrawable()动态设置，让控件外观与整体 UI 风格保持一致。为了帮助你在实际项目中快速选型，下面从适用场景、视觉风格、自定义能力、监听方式等维度对两者进行对比：对比维度CheckBoxSwitch适用场景表单勾选、协议确认、多选列表设置项开关、功能启停、实时切换视觉风格经典方形勾选样式，偏传统表单感现代化滑块样式，更贴近系统设置自定义能力可自定义 button drawable、文字颜色可自定义 thumb 和 track drawable监听方式OnCheckedChangeListenerOnCheckedChangeListener（用法一致）交互反馈点击后立即勾选/取消，适合批量操作滑动或点击切换，适合即时生效典型场景注册协议、多选偏好、批量选择消息通知、深色模式、自动更新简单来说，需要用户明确“同意/选择”某个选项时优先用 CheckBox，比如注册协议、多选偏好；需要用户“开启/关闭”某项功能时优先用 Switch，比如消息通知、深色模式。两者监听方式完全一致，切换成本极低，选型时主要看交互语义是否符合用户预期。④ 单选按钮 RadioButton 分组逻辑实现单选需求通常出现在性别选择、支付方式等互斥选项中。RadioButton 必须配合 RadioGroup 使用，否则无法实现互斥效果。RadioGroup 作为一个容器，自动管理其子项的选择状态——同一时间只能有一个被选中。下面先看一个完整的布局声明示例，包含性别选择与支付方式两组单选：!-- 性别选择组 --RadioGroupandroid:id="@+id/gender_group"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"RadioButtonandroid:id="@+id/rb_male"android:text="男"/RadioButtonandroid:id="@+id/rb_female"android:text="女"//RadioGroup!-- 支付方式组 --RadioGroupandroid:id="@+id/payment_group"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"RadioButtonandroid:id="@+id/rb_alipay"android:text="支付宝"/RadioButtonandroid:id="@+id/rb_wechat"android:text="微信支付"/RadioButtonandroid:id="@+id/rb_card"android:text="银行卡"//RadioGroupandroid:orientation控制单选按钮的排列方向：horizontal横向排列适合选项较少的场景（如性别），vertical纵向排列适合选项较多或文字较长的场景（如支付方式）。每个 RadioGroup 内部是独立的互斥范围，不同组之间互不影响。布局结构如下：RadioGroupandroid:id="@+id/gender_group"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"RadioButtonandroid:id="@+id/rb_male"android:text="男"/RadioButtonandroid:id="@+id/rb_female"android:text="女"//RadioGroupJava 代码中监听整个组的变更：RadioGroupgenderGroup=findViewById(R.id.gender_group);genderGroup.setOnCheckedChangeListener((group,checkedId)-{Stringselected="";if(checkedId==R.id.rb_male){selected="male";}elseif(checkedId==R.id.rb_female){selected="female";}// 将 selected 存入数据模型});对应的 Kotlin 版本如下：valgenderGroup=findViewByIdRadioGroup(R.id.gender_group)genderGroup.setOnCheckedChangeListener{_,checkedId-valselected=when(checkedId){R.id.rb_male-"male"R.id.rb_female-"female"else-""}// 将 selected 存入数据模型}Kotlin 的when表达式替代了 Java 的if-else链，分支更清晰且无需break。同时，val selected声明为不可变变量，编译器会强制保证它在赋值后不再被修改，减少因误改状态引入的 bug。监听器同样通过 SAM 转换简写为 lambda，未使用的group参数用_占位，代码更聚焦于业务逻辑。这种方式比单独监听每个 RadioButton 更简洁，也避免了状态不同步的风险。若需程序化选中某一项，调用radioGroup.check(R.id.rb_male)即可；若要清除当前选中（回到无选中状态），调用radioGroup.clearCheck()。注意，check()传入的 id 必须是该 RadioGroup 内某个 RadioButton 的 id，否则会抛出异常。此外，RadioButton 也支持自定义样式。可以通过android:button属性替换默认的圆形选中图标，例如传入一个自定义的 selector drawable，实现品牌化的选中效果；也可通过android:buttonTint调整选中时的颜色。在代码中，setButtonDrawable()可动态更换图标，让单选控件与整体 UI 风格保持一致。⑤ 编辑框 EditText 输入限制与焦点监听EditText 是用户输入的主要入口，合理限制输入类型能减少错误数据进入系统。通过inputType属性可预设键盘样式，如textPassword隐藏字符、numberDecimal仅允许数字和小数点。此外，还可添加过滤器进一步约束。下面先看一个完整的布局声明示例，包含手机号、密码和邮箱三个输入框：!-- 手机号输入框：仅允许数字，最多 11 位 --EditTextandroid:id="@+id/phone_input"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入手机号"android:inputType="phone"android:maxLength="11"/!-- 密码输入框：隐藏字符 --EditTextandroid:id="@+id/password_input"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="请输入密码"android:inputType="textPassword"/!-- 邮箱输入框：自动弹出邮箱键盘 --EditTextandroid:id="@+id/email_input"android:layout_width