Selection Controls¶

Check Box¶

摘自 google material design 文档

Checkboxes允许用户从一组选项中选择多个选项。如果你有多个选项出现在列表中,你可以通过使用 Checkboxes 代替 on/off Switches 来节省空间。如果你只有一个选项，避免使用一个 Checkbox，但是可以使用一个 on/off switch。

如何添加?¶

I. 在你的 build.grade 文件末尾添加 appcompat 库。

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}

II. 让你的 Activity 继承自 android.support.v7.app.AppCompatActivity。

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在 layout.xml 文件内任一位置声明你的 CheckBox

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Check Box"/>

如何设置样式?¶

I. 在 styles.xml 文件内声明你的自定义样式.

<style name="MyCheckBox" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

II. 将这个样式通过 android:theme 属性应用到你的 CheckBox.

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Check Box"
    android:theme="@style/MyCheckBox"/>

Radio Button¶

摘自 google material design 文档

Radio buttons 允许用户从一组选项中选择一个选项。如果你觉得用户需要并排看到所有可选项，并用 radio buttons 从中选择唯一的一个选项。那么，可以考虑用一个下拉菜单，相对于显示所有选项会占用更少的空间。

如何添加?¶

I. 在你的 build.grade 文件末尾添加 appcompat库.

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}

II. 让你的 activity 继承自 android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在 layout.xml 文件内任意位置声明你的 RadioButton

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Radio Button"/>

如何设置样式?¶

I. 在 styles.xml 文件内声明你的自定义样式.

<style name="MyRadioButton" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>

II. 通过 android:theme 属性将这个样式应用到你的 RadioButton .

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Radio Button"
    android:theme="@style/MyRadioButton"/>

Switch¶

摘自 google material design 文档

On/off Switches 切换可以设置单选状态。开关控制的选项，以及它所处的状态，应该通过与它对应一致的内部标签明确地展示出来，以达到与 radio button（单选按钮）相同的视觉效果。 on/off 滑动开关用文字标示 “on” 和 “off” 的做法已被弃用。请用文首所示图例来代替。

如何添加?¶

I. 在你的 build.grade 文件末尾添加 appcompat 库。

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
}

II. 让你的 activity 继承自 android.support.v7.app.AppCompatActivity。

public class MainActivity extends AppCompatActivity {
    ...
}

III. 在任意的 layout.xml 文件内声明你的 SwitchCompat 。

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true" />

SwitchCompat 是 Switch 控件的向下兼容版本。

如何设置样式?¶

I. 在你的 styles.xml 文件内声明自定义样式。

<style name="MySwitch" parent="Theme.AppCompat.Light">
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/indigo</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/pink</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">@color/grey</item>
</style>

II. 在你的 SwitchCompat 声明里设置 android:theme 的属性值为你自定义的样式。

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:theme="@style/MySwitch" />

备注

Android 会自动给 SwitchCompat 的 colorControlActivated 和 android:colorForeground 增加 30% 的透明度。

翻译水平有限，欢迎批评指正

原文作者：Dmytro Danylyk 原文链接：Selection Controls