1. 程式人生 > Android入門教學 >開關控制元件ToggleButton/Switch

開關控制元件ToggleButton/Switch

1. 開關控制元件的功能

首先我們來看一張圖感受一下開關控制元件是啥:

ToggleButton

沒錯,Android 系統的下拉選單裡“WLAN”、“藍芽”、“4G”、“飛航模式”等等所有的開關都可以用開關控制元件來實現。所以它的功能就很好理解,如同名字一樣幫我們完成一個開關控制。

2. 開關控制元件的屬性

這兩個開關控制元件和 RadioButton、Checkbox 的繼承關係一樣,都是由 Button 派生而來,所以 Button 所有的屬性及功能開關控制元件都有。這裡只列舉 ToggleButton / Switch 的重要及常用屬性,當然還有很多比較特殊和罕見的屬性及方法可以通過第六節中給出的中文官網查閱到。

2.1 ToggleButton 的屬性

  • android:disabledAlpha:
    設定當開關關閉的時候,ToggleButton 的透明度值,用來更好的區分開關狀態。
  • android:textOff:
    開關關閉的時候控制元件展示的文字提示。
  • android:textOn:
    開關開啟的時候控制元件展示的文字提示。

ToggleButton 比較簡單,這 3 個屬性也很好理解,相比之下 Switch 會更復雜一些。

2.2 Switch 的屬性

  • android:textOff: 開關關閉的時候控制元件展示的文字提示,同 ToggleButton。
  • android:textOn: 開關開啟的時候控制元件展示的文字提示,同 ToggleButton。
  • android:showText: 設定是否顯示文字提示。
  • android:splitTrack: 是否在滑塊和文字之間保留間隙。
  • android:switchMinWidth: 設定開關的最小寬度。
  • android:switchPadding: 設定文字和開關的間距。
  • android:switchTextAppearance: 設定開關的文字樣式。
  • android:textStyle: 文字字型風格。
  • android:track: 開關底部的圖片。
  • android:thumb: 開關滑塊的圖片。

3. 開關控制元件的用法

其實可以發現,開關控制元件和上一節講到的選擇框很類似,每一個選擇框也是有兩種狀態——“選中、未選中”。開關控制元件的“開、關”狀態和它非常類似,我們可以借鑑 RadioButton 及 Checkbox 的例子。
首先按照第 2 小節介紹的屬性編寫佈局檔案:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff=""
        android:textOn="" />

    <Switch
        android:id="@+id/switch_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:switchMinWidth="56dp"
        android:showText="true"
        android:text="WLAN"
        android:switchPadding="10dp"
        android:textOff="OFF"
        android:textOn="ON" />

    <Button
        android:id="@+id/getBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="獲取狀態" />

</LinearLayout>

我們在佈局中放置了 3 個控制元件,前兩個分別是本節的主角——ToggleButton 和 Switch,用來控制兩個開關值,而第三個是一個Button控制元件,用來隨時獲取開關的狀態。
接著編寫 Java 程式碼,通過兩種方式來接收開關狀態,一種是開關變化的時候主動回撥,另一種是點選 Button 去查詢開關狀態:

package com.emercy.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends Activity implements CompoundButton.OnCheckedChangeListener, View.OnClickListener {

    ToggleButton mToggleButton;
    Switch mSwitchButton;
    Button mButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToggleButton = findViewById(R.id.toggle_button);
        mSwitchButton = findViewById(R.id.switch_button);
        mButton = findViewById(R.id.getBtn);

        mToggleButton.setOnCheckedChangeListener(this);
        mSwitchButton.setOnCheckedChangeListener(this);
        mButton.setOnClickListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()) {
            case R.id.toggle_button:
                Toast.makeText(this, "toggle state changed : " + isChecked, Toast.LENGTH_SHORT).show();
                break;
            case R.id.switch_button:
                Toast.makeText(this, "wlan state changed : " + isChecked, Toast.LENGTH_SHORT).show();
                break;
            default:
                Toast.makeText(this, "no state changed", Toast.LENGTH_SHORT).show();

        }
    }

    @Override
    public void onClick(View v) {
        String toggle = (mToggleButton.isChecked() ?
                mToggleButton.getTextOn() : mToggleButton.getTextOff()).toString();
        String wlan = (mSwitchButton.isChecked() ?
                mSwitchButton.getTextOn() : mSwitchButton.getTextOff()).toString();

        Toast.makeText(this, "toggle is : " + toggle + "\n" + "wlan is :" + wlan, Toast.LENGTH_SHORT).show();
    }
}

我們的 Activity 實現了OnCheckedChangeListenerOnClickListener,前者用來接收 ToggleButton / Switch 的切換回調,後者用來監聽 Button 的點選從而獲取開關狀態。例子比較簡單,效果如下:

開關控制元件的用法

4. 小結

本節介紹了兩個實用的開關控制元件,非常適合於在開關切換的場景下使用,其中 ToggleButton 的屬性比較簡潔,Switch 相對更復雜、屬性也豐富一些。

其實第 3 和 4 這兩節所學的控制元件都是從 Button 派生而來,都是在 Button 的基礎上做了一些定製化,涉及的業務比較具體,只要掌握了 Button,相信這些都不在話下。

下一節我們將介紹一個全新的控制元件,它和 TextView 一樣是一個基礎控制元件,很多控制元件都是從它派生而來,大家要重點掌握哦!