【问题标题】：Android Toggle Button - Material DesignAndroid 切换按钮 - 材料设计
【发布时间】：2016-06-28 16:03:39
【问题描述】：

如何实现材料设计指南here 中指定的切换按钮？

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

【问题讨论】：

标签： android button material-design android-button android-togglebutton

【解决方案1】：

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

材料指南：

我能够通过滥用 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>

在您的布局文件中使用此代码 sn-p，创建材质切换按钮组。就我而言，它是 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。

切换按钮要求：

在一个组中至少有三个切换按钮

带有文本、图标或两者的标签按钮

推荐以下组合：

多个且未选中

独家且未选中

仅限独家

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

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

【讨论】：

styles.xml 中的以下行将不会构建： ?attr/selectableItemBackground Android Studio 将 ?attr/selectableItemBackground 显示为红色。说“无法解析符号”知道这里发生了什么吗？
是的，有些东西变了，现在需要在 attr/ 前面使用 android 命名空间 => "?android:attr/selectableItemBackground" 相应地更新了答案...

【解决方案2】：

Google 终于赶上了我们，现在材料库中有一个官方切换组：

https://material.io/components/buttons#toggle-button

旧帖：

我创建了一个符合 Material Design 指南的 ToggleButton 库：

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

【讨论】：

它看起来不会低于 21。需要做一些兼容的事情。查看CardView。 ATM 我在 21+ 应用程序中使用它，所以我没有移植兼容代码，但它并不是很难，尽管它是丑陋的意大利面条代码。
我已将其移植到 2.0 版的 API 9。
material.io/develop/android/components/… 页面不存在了... :(

【解决方案3】：

更新：现在有官方支持！有关链接/用法，请参阅下面的其他答案。

原帖：

当前库支持：否。

从支持库 v23.2 开始，当前的 ToggleButton 实现不不按照参考的材料设计指南中所述的方式进行操作。

材料指南：

当前支持库样式：

请注意，按钮不会以圆形边框包围的组中组合在一起，使用文本而不是图标，并且使用强调色作为下划线而不是深色背景来指示“开启”状态。

是否有外部库：还没有。

我不知道有任何事实上的标准库来实现 Material ToggleButton，但我希望那里可能有一些小的、几乎没有经过测试的库？不幸的是，Stackoverflow 不鼓励仅链接到外部第三方库的答案。因此，您需要自行搜索，或自己创建自定义视图来实施当前的 Material 设计指南。

【讨论】：

再说一次，不鼓励链接到各种第三方库，但到目前为止我找到的最接近的第三方库是github.com/jlhonora/multistatetogglebutton

【解决方案4】：

希望对你有帮助！

http://takeoffandroid.com/android-views/material-toggle-switch-using-appcompat-v7/

导入：

import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;

swt = (SwitchCompat)findViewById(R.id.Switch);
swt.setOnCheckedChangeListener (this);
swt.setChecked (true);

听众：

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    switch (buttonView.getId()) {

        case R.id.Switch:

            if(!isChecked){

                Toast.makeText (SwitchActivity.this,"Err Switch is off!!",Toast.LENGTH_SHORT).show ();
            }else{
                Toast.makeText (SwitchActivity.this,"Yes Switch is on!!",Toast.LENGTH_SHORT).show ();

            }
            break;

        default:
            break;
    }
}

xml：

<android.support.v7.widget.SwitchCompat
    android:id="@+id/Switch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textOff=""
    android:text="Toggle Switch"
    android:background="@android:color/transparent"
    android:textColor="@color/secondary_text"
    android:textOn=""
    android:button="@null"
    android:padding="20dp"/>

【讨论】：

【解决方案5】：

借助材料组件库，您可以使用 MaterialButtonToggleGroup。

类似：

 <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            style="?attr/materialButtonOutlinedStyle"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

【讨论】：

有没有办法调整按钮间距？

【解决方案6】：

如果您的活动具有向后兼容性，您可以使用SwitchCompat。请参见下面的示例。

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

编码愉快：D

【讨论】：