Кнопка переключения Android, пример переключения

Сегодня мы узнаем о Android Toggle Button и Switch в приложении для Android. Мы обсудим и реализуем виджет кнопки переключения и виджет ToggleButton в нашем приложении.

Кнопка переключения Android

Android Toggle Button используется для отображения включенного и выключенного состояния кнопки. Переключатель — это еще один тип кнопки-переключателя, который в основном используется, начиная с Android 4.0. Android Switch предоставляет ползунок. И ToggleButton, и Switch являются подклассами класса CompoundButton. XML-атрибуты, используемые для определения ToggleButton, описаны ниже.

android:disabledAlpha: альфа-канал, применяемый к индикатору, когда он отключен.
android:textOff: текст для кнопки, когда она не отмечена
android:textOn: текст кнопки, когда она отмечена галочкой

Для программного изменения ToggleButton используются следующие методы.

CharSequence getTextOff(): возвращает текст, когда кнопка не находится в отмеченном состоянии
CharSequence getTextOn(): возвращает текст, когда кнопка находится в отмеченном состоянии
void setChecked(boolean checked): изменяет состояние проверки этой кнопки

Переключатель Android

Виджет Android Switch или SwitchCompat (часть библиотеки AppCompat, которая обеспечивает обратную совместимость для более ранних версий Android вплоть до Android API v7) — это настраиваемый ползунок включения-выключения, который обычно можно увидеть в настройках телефона. Преимущества виджета Android Switch:

Это лучшая замена флажкам и переключателям.
Внедрение занимает меньше минуты
Нет необходимости использовать много рисунков и других ресурсов.

Макет xml SwitchCompat приведен ниже:

<android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />

android:text используется для отображения текста помимо кнопки переключения ползунка.

Кнопка переключения Android и пример переключателя

В этом приложении мы отобразим две кнопки ToggleButton и одну кнопку Switch. Состояние кнопок переключения будет отображаться в SnackBar при нажатии FloatingActionButton. Состояние кнопки Switch изменяется на true всякий раз, когда нажимается кнопка действия панели закусок. Или состояние отображается в закусочной, сдвинув переключатель.

Кнопка переключения Android и структура проекта переключения

Код кнопки переключения Android

activity_main.xml остается прежним. content_main.xml содержит две кнопки-переключателя и переключатель, по умолчанию отмеченный как false, как показано во фрагменте кода ниже:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.journaldev.switchandtoggle.MainActivity"
    tools:showIn="@layout/activity_main">

    <ToggleButton
        android:id="@+id/tb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="ToggleButton 1"
        android:textOff="Off"
        android:textOn="On" />

    <ToggleButton
        android:id="@+id/tb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/tb1"
        android:layout_alignBottom="@+id/tb1"
        android:layout_toRightOf="@+id/tb1"
        android:text="ToggleButton 2"
        android:textOff="Off"
        android:textOn="On" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:checked="false"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />


</RelativeLayout>

MainActivity.java приведен ниже:

package com.journaldev.switchandtoggle;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    ToggleButton tb1, tb2;
    SwitchCompat switchCompat;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                StringBuilder result = new StringBuilder();
                result.append("ToggleButton1 : ").append(tb1.getText());
                result.append("\nToggleButton2 : ").append(tb2.getText());

               Snackbar snackbar= Snackbar.make(view, result.toString(), Snackbar.LENGTH_LONG)
                        .setAction("SWITCH ENABLE", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                switchCompat.setChecked(true);
                            }
                        });

                snackbar.setActionTextColor(Color.RED);
                snackbar.show();
            }
        });

        tb1= (ToggleButton)findViewById(R.id.tb1);
        tb2=(ToggleButton)findViewById(R.id.tb2);
        switchCompat=(SwitchCompat)findViewById(R.id.switchButton);

        switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                Snackbar.make(buttonView, "Switch state checked "+isChecked, Snackbar.LENGTH_LONG)
                        .setAction("ACTION",null).show();
            }
        });



    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Скачать Android Switch and Toggle Button Project

Ссылка: ToggleButton Android Doc

Кнопка переключения Android, пример переключения