Android Toggle Button - Дизайн материалов

Как реализовать кнопки Toggle, как указано в руководстве по дизайну материалов здесь?

Доступно ли это из коробки из библиотеки поддержки дизайна Android или есть ли доступная сторонняя библиотека?

Ответ 1

Поддержка текущей библиотеки: Нет.

Как и в библиотеке поддержки v23.2, текущая реализация ToggleButton не ведет себя и не имеет стиля, как указано в ссылках на Руководство по разработке материалов.

Рекомендации по материалам:

образец Кнопка переключения материалов

Текущая поддержка библиотеки стилей:

текущая библиотека поддержки ToggleButton

Обратите внимание, что кнопки не встречаются вместе в группах, окруженных закругленными границами, вместо значков используется текст, а цвет акцента используется в качестве подчеркивания вместо затемненного фона для указания статуса 'on'.

Есть ли внешняя библиотека: еще нет.

Я не знаю какой-либо стандартной библиотеки defacto для реализации Material ToggleButton, но, вероятно, есть несколько небольших, едва протестированных, там? К сожалению, Stackoverflow обескураживает ответы, которые являются лишь ссылками на внешние сторонние библиотеки. Таким образом, вам нужно будет искать самостоятельно или создать собственное представление для реализации текущих руководств по разработке материалов.

Ответ 2

Я также давно ищу что-то вроде ToggleButtonBar.

Рекомендации по материалам: sample Material toggle button

Я смог добиться этого, используя RadioButtons:

enter image description here

Чтобы добиться этого единственного выбора 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 в качестве оболочки для группы, чтобы получить закругленные углы. К сожалению, в версиях Android ниже, чем Lollipop, закругленные углы приведут к заполнению CardView. Вы можете наверняка применить свой собственный стиль здесь с другими цветами или значками вместо текста или обоих. Просто создайте свои собственные StateLists для этих случаев.

Требования к кнопке переключения:

  • Иметь как минимум три кнопки в группе
  • Пометить кнопки текстом, значком или обоими

Рекомендуются следующие комбинации:

  • Многократный и невыбранный
  • Эксклюзив и не выбран
  • Только эксклюзив

ПРИМЕЧАНИЕ: для использования CardView вам нужно добавить его зависимость в ваш файл build.gradle приложений:

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

Ответ 3

Google наконец-то догнал нас, и теперь в библиотеке материалов появилась официальная группа переключения:

https://material.io/develop/android/components/material-button-toggle-group/

Старая почта:

Я создал библиотеку ToggleButton, которая соответствует рекомендациям по дизайну материалов:

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

enter image description here

Ответ 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

Вы можете использовать SwitchCompat, если ваша активность имеет обратную совместимость. См. ниже пример.

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

Счастливое кодирование: D