Android开发教程：自定义切换按钮与开关组件的实现方法和代码示例

2 年 ago

宇, 华

3 minutes

这是文章《安卓切换按钮，开关示例》的第1部分（共1部分）。

内容片段: 今天我们将学习安卓应用中的切换按钮(Toggle Button)和开关(Switch)。我们将讨论和实现应用中的开关按钮小部件和切换按钮小部件。

安卓切换按钮

安卓切换按钮用于在按钮上显示开启和关闭状态。自安卓4.0以来，切换开关是另一种主要使用的切换按钮类型。安卓切换开关提供滑块控制。切换按钮(ToggleButton)和开关(Switch)都是复合按钮(CompoundButton)类的子类。以下是用于定义切换按钮的XML属性。

android:disabledAlpha: 当按钮禁用时应用的透明度
android:textOff: 当按钮未被选中时的文本
android:textOn: 当按钮被选中时的文本

为了以编程方式修改切换按钮，使用了以下方法。

getTextOff方法返回按钮未被选中时的文本。
getTextOn方法返回按钮被选中时的文本。
setChecked方法改变按钮的选中状态。

安卓开关

安卓开关(Switch)或开关兼容(SwitchCompat)小部件（AppCompat库的一部分，为低版本的安卓版本提供向后兼容性，直到安卓API v7）是一种自定义的开关滑块，常见于手机设置中。安卓开关小部件的优点有：

这是复选框和单选按钮的最佳替代品
实施只需不到一分钟
无需使用大量的可绘制和其他资源

下面是开关兼容(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="开关示例"
        />

android:text 用于在滑动开关按钮旁边显示文本。

安卓切换按钮和开关示例

本应用程序中，我们将显示两个切换按钮和一个开关按钮。当点击浮动操作按钮(FloatingActionButton)时，切换按钮的状态将显示在提示条(SnackBar)中。当点击提示条的操作按钮时，开关按钮的状态将更改为true。或者通过滑动开关来显示其状态在提示条中。

安卓切换按钮和开关项目结构

安卓切换按钮的代码

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.Olivia.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="切换按钮 1"
        android:textOff="关闭"
        android:textOn="开启" />

    <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="切换按钮 2"
        android:textOff="关闭"
        android:textOn="开启" />

    <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="开关示例"
        />


</RelativeLayout>

以下给出MainActivity.java的代码：

package com.Olivia.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("切换按钮1 : ").append(tb1.getText());
                result.append("\n切换按钮2 : ").append(tb2.getText());

               Snackbar snackbar= Snackbar.make(view, result.toString(), Snackbar.LENGTH_LONG)
                        .setAction("开启开关", 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, "开关状态 "+isChecked, Snackbar.LENGTH_LONG)
                        .setAction("操作",null).show();
            }
        });



    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 加载菜单；如果存在则将其添加到操作栏
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 处理操作栏项点击
        int id = item.getItemId();

        // 简化if语句
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

用一个字符串构建器(StringBuilder)来获得当前开关按钮的状态，并将它们添加到提示条(Snackbar)中进行显示。开关按钮作为复合按钮(CompoundButton)的子类，上述代码中实现了一个选中状态改变监听器(OnCheckChangeListener)。下面的输出是应用程序的运行结果。这就结束了关于安卓切换按钮和开关的教程。你可以从下面的链接下载最终的安卓切换和开关项目。

下载安卓切换和开关项目

参考：切换按钮(ToggleButton)安卓文档

#Android开发 #UI组件 #切换按钮 #开关控件 #移动开发