Android 切换按钮,开关示例

今天我们将学习关于 Android 应用中的 Android 切换按钮(Toggle Button)和开关(Switch)。我们将讨论并实现应用程序中的开关按钮小部件和 ToggleButton 小部件。

Android 切换按钮

Android 切换按钮用于在按钮上显示开和关的状态。开关(Switch) 是另一种类型的切换按钮,自 Android 4.0 以来被广泛使用。Android 开关提供了一个滑块控制。ToggleButton 和 Switch 都是 CompoundButton 类的子类。用于定义 ToggleButton 的 XML 属性如下。

  1. android:disabledAlpha: 当禁用时应用于指示器的 alpha 值
  2. android:textOff: 未选中时按钮的文本
  3. android:textOn: 选中时按钮的文本

要以编程方式修改 ToggleButton,可以使用以下方法。

  1. CharSequence getTextOff(): 返回按钮未选中时的文本
  2. CharSequence getTextOn(): 返回按钮选中时的文本
  3. void setChecked(boolean checked): 更改此按钮的选中状态

安卓开关

安卓开关或SwitchCompat小部件(是AppCompat库的一部分,为较低的Android版本提供向后兼容性,直到Android API v7)是一种常见于手机设置中的自定义开关。 Android开关小部件的优势:

  1. 它是复选框和单选按钮的最佳替代品
  2. 实现仅需不到一分钟
  3. 无需使用大量的可绘制资源和其他资源

SwitchCompat的XML布局如下:

<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切换按钮和开关示例

在此应用中,我们将显示两个切换按钮和一个开关按钮。当按下FloatingActionButton时,将在SnackBar中显示切换按钮的状态。单击SnackBar的操作按钮时,将开关按钮的状态更改为true。或通过滑动开关在SnackBar中显示状态。

Android 切换按钮和开关项目结构

Android 切换按钮代码

activity_main.xml 保持不变。 content_main.xml 包含两个切换按钮和一个默认关闭的开关,如下代码片段所示:

<?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);
    }
}

A String builder is used to get the current state of the toggle buttons and append them to display in the snackbar. Switch button being a subclass of Compound Button, an OnCheckChangeListener is implemented as shown in the code above. The output below is the app in action. This brings an end to android toggle button and switch in android tutorial. You can download the final Android SwitchAndToggle Project from the link below.

下载 Android 开关和切换按钮项目

参考:ToggleButton Android 文档

Source:
https://www.digitalocean.com/community/tutorials/android-toggle-button-switch-example