Question

如何实现Material Design准则here中指定的切换按钮？

是否可以从Android设计支持库开箱即用，或者是否有可用的第三方库？

Answer 1

我也在寻找像ToggleButtonBar这样的东西很长一段时间。

材料指南：

我能够实现它滥用RadioButtons：

为了实现这个单选ButtonBar，我为单选按钮创建了一个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>

在您的布局文件中使用此代码段，以创建材质切换按钮组。就我而言，它是 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的填充。您可以使用其他颜色或图标而不是文本或两者来应用您自己的样式。只需为这些情况创建自己的StateLists。

切换按钮要求：


组中至少有三个切换按钮

带有文字，图标或两者的标签按钮


建议使用以下组合：


多个未选中

独家和未选中

仅限独家

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

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

Answer 2

我已经创建了符合Material Design准则的ToggleButton库：

curry

def updateSubtitle(subtitleId: String...): Subtitle

https://github.com/rcketscientist/ToggleButtons

Answer 3

当前图书馆支持：否。

从支持库v23.2开始，当前的ToggleButton实现不的行为也没有按参考的“材料设计指南”中所述进行样式设置。

材料指南：

当前的支持库样式：

请注意，这些按钮不会在由圆形边框包围的组中聚集在一起，而是使用文本代替图标，并且强调颜色用作下划线而不是黑暗背景以指示＆＃39;上＆＃39;状态。

是否有外部库：尚未。

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

Answer 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"/>

Answer 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>

Answer 6

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

<table border="2" cellpadding="4">
  <tbody>
    <tr>
      <td id="cell1"> one </td>
      <td id="cell2"> two </td>
      <td id="cell3"> three </td>
    </tr>
    <tr>
      <td id="cell4"> four </td>
      <td id="cell5"> five </td>
      <td id="cell6"> six </td>
    </tr>
  </tbody>
</table>

快乐编码：D

Android Toggle Button - Material Design

6 个答案:

当前图书馆支持：否。

是否有外部库：尚未。