本文为 Nick Rout 发布于 Medium 的文章译文(Google 翻译)
原文链接为 Hands-on with Material Components for Android: Selection Controls
本文仅作为个人学习记录所用。如有涉及侵权,请相关人士尽快联系译文作者。
Android MDC 系列文章:
- 第一篇:【译】为Android设置Material Components主题
- 第二篇:【译】Android材质组件的动手实践:Bottom App Bar
- 第三篇:【译】Android材质组件的动手实践:Bottom Navigation
- 第四篇:【译】Android材质组件的动手实践:Bottom Sheet
- 第五篇:【译】Android材质组件的动手实践:Buttons
- 第六篇:【译】Android材质组件的动手实践:Chips
- 第七篇:【译】Android材质组件的动手实践:Cards
- 第八篇:【译】Android材质组件的动手实践:Dialogs
- 第九篇:【译】Android材质组件的动手实践:Selection Controls
这篇文章将介绍 Radio Button, Checkbox 和 Switch 组件的功能和API。要了解如何处理Android的Material Components的初始设置(包括Gradle依赖关系和创建应用程序主题),请参阅我的原始文章:
为Android设置Material Components主题
选择控件是用户需要选择选项或切换设置的方案的小组件。通常可以在设置屏幕和对话框中找到它们。
从设计的角度来看,可以在三种不同的情况下使用三种主要的选择控件:
- 单选按钮:具有两个可能状态的圆形控件;选择或未选择。在一组其他单选按钮中时具有单选行为(即一次只能选择一个控件)。
- 复选框:具有两个可能状态的方形控件;选中或未选中。在一组其他复选框中时具有多选行为(即一次可以选择多个控件)。
- 开关:包含拇指和轨迹的控件。有两种可能的状态;开启或关闭。
基本用法🏁
一 MaterialRadioButton,MaterialCheckBox 或者 SwitchMaterial 可以包含在你的布局像这样:
<LinearLayout
...>
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radio Button" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checkbox" />
<!-- Note: ID cannot be 'switch' as this is a Java keyword -->
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/switchMaterial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch" />
</LinearLayout>
设置并监听选中状态👂
所有选择控件都从基 CompoundButton 类扩展。因此,它们继承了可检查的行为,该行为可以通过编程方式或通过触摸交互进行切换。
可以通过编程方式切换选择控件:
radioButton.isChecked = true
checkbox.isChecked = true
switchMaterial.isChecked = true
侦听已检查/未检查状态的更改是这样的:
radioButton.setOnCheckedChangeListener { radioButton, isChecked ->
// Handle radio button checked/unchecked
}
checkbox.setOnCheckedChangeListener { checkbox, isChecked ->
// Handle checkbox checked/unchecked
}
switchMaterial.setOnCheckedChangeListener { switch, isChecked ->
// Handle switch checked/unchecked
}
分组选择控件👨👩👧👦
选择控件通常成组使用。严格来说,任何方法ViewGroup
都可以用来实现这一目标(例如a RecyclerView
)。话虽这么说, RadioGroup 该类的存在是为了专门处理MaterialRadioButton
s 的单选行为。
MaterialRadioButton
可将s与分组,RadioGroup
例如:
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/option1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Option" />
<com.google.android.material.radiobutton.MaterialRadioButton
android:id="@+id/option2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second Option" />
...
</RadioGroup>
存在许多用于以编程方式设置,获取和监听子 MaterialRadioButton
检查/未检查状态更改的API :
radioGroup.check(R.id.option1)
val checkedRadioButtonId = chipGroup.checkedRadioButtonId // Will return View.NO_ID if nothing checked
radioGroup.setOnCheckedChangeListener { group, checkedId ->
// Handle child MaterialRadioButton checked/unchecked
}
主题🎨
选择控件可以根据三个“材料主题”子系统来主题化:颜色,版式和形状。在实现全球定制MaterialRadioButton
,MaterialCheckBox
和SwitchMaterial
风格,引用它们与您的应用程序的主题radioButtonStyle
,checkboxStyle
并switchStyle
分别属性。
颜色
选择控件默认为颜色colorOnSurface
(选中),并colorControlActivated
即colorSecondary
在你的应用主题(选中)定义。为了在每个控件级别覆盖此设置,您将需要:
- 使用具有上述颜色属性的主题叠加层,将其应用于具有该颜色的窗口小部件
android:theme
。 - 设置
useMaterialThemeColors
属性设置为false,并应用自定义色彩ColorStateList
使用 CompoundButtonCompat#setButtonTintList。
版式
选择控件的文本标签将采用fontFamily
您的应用主题中定义的属性。为了以样式或在每个控件级别覆盖此android:textAppearance
属性,请使用属性。
形状
没有任何选择控件的任何方面都可以通过形状主题进行调整。
更多资源📚
我希望这篇文章对单选按钮,复选框和开关以及如何在您的Android应用程序中使用它们提供了一些见识。如果您有任何疑问,想法或建议,那么我很乐意收到您的来信!
在Twitter上找到我@ricknout