【译】Android材质组件的动手实践：Selection Controls

本文为 Nick Rout 发布于 Medium 的文章译文（Google 翻译）
原文链接为 Hands-on with Material Components for Android: Selection Controls
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。

Android MDC 系列文章：

这篇文章将介绍 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 该类的存在是为了专门处理MaterialRadioButtons 的单选行为。

与RadioGroup分组的MaterialRadioButtons

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容