Android 切换按钮 - Material 设计

Question

如何实现 Material Design 指南 here 中指定的切换按钮?

它是从 Android 设计支持库中开箱即用的，还是有任何第三方库可用？

Answer 1

我也在寻找类似 ToggleButtonBar 的东西已经有一段时间了。

Material guidelines:

我能够通过滥用 RadioButtons 来实现它:

为了实现这个单选按钮栏，我为单选按钮创建了一个 ToggleButton 样式并创建了一个 RadioGroup。

将此添加到您的 res/values/styles.xml:

<style name="ToggleButton" parent="@android:style/Widget.CompoundButton.RadioButton">
    <item name="android:foreground">?android:attr/selectableItemBackground</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">32dp</item>
    <item name="android:background">@drawable/toggle_background</item>
    <item name="android:button">@null</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:paddingRight">8dp</item>
</style>

为背景 ColorStateList 创建一个 res/drawable/toogle_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_window_focused="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="false" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="true" android:state_focused="true">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_focused="true">
        <color android:color="@color/toggle_normal_off" />
    </item>
    <item android:state_checked="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true">
        <color android:color="@color/toggle_hover" />
    </item>
</selector>

将您的 res/values/colors.xml 附加到:

<color name="toggle_hover">@color/gray</color>
<color name="toggle_normal">@color/gainsboro</color>
<color name="toggle_active">@color/silver</color>
<color name="toggle_normal_off">@color/darkgray</color>

<color name="gainsboro">#DCdCdC</color>
<color name="silver">#C0C0C0</color>
<color name="darkgray">#a9a9a9</color>
<color name="gray">#808080</color>

在您的布局文件中，使用此代码 fragment 来创建 Material 切换按钮组。就我而言，它是 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp">

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                style="@style/ToggleButton"
                android:text="First" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Second" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Third" />

        </RadioGroup>

    </android.support.v7.widget.CardView>
</LinearLayout>

我使用 CardView 作为组的包装来实现圆角。不幸的是，在低于 Lollipop 的 Android 版本上，圆角会导致 CardView 出现填充。您肯定可以在此处使用其他颜色或图标而不是文本或两者都应用您自己的样式。只需为这些情况创建您自己的 StateList。

Toggle button requirements:

• Have at least three toggle buttons in a group
• Label buttons with text, an icon, or both

The following combinations are recommended:

• Multiple and unselected
• Exclusive and unselected
• Exclusive only

注意:要使用 CardView，您需要将它的依赖项添加到您的应用程序 build.gradle 文件中:

compile 'com.android.support:cardview-v7:25.0.1'