1. 程式人生 > >一起學Android之ToggleButton和Switch

一起學Android之ToggleButton和Switch

本文以一個簡單的小例子,簡述在Android開發中ToggleButton(開關按鈕)和Switch(開關)的簡單使用,僅供學習分享使用。

概述

ToggleButton是一個有兩種狀態(checked/unchecked)的按鈕,經常用於開/關等場景中,預設文字顯示(ON/OFF),Switch 是一個擁有兩種狀態的控制元件,具有滑動的效果。

ToggleButton

ToggleButton涉及知識點如下:

  1. android:textOff 設定未選中時顯示的文字內容,預設為OFF。
  2. android:textOn 設定選中時顯示的文字內容,預設為ON。
  3. android:disabledAlpha 控制元件禁用時的透明度,float型別,
  4. android:background 背景設定,可以用於設定一個圖片或者資原始檔
  5. setOnCheckedChangeListener 用於設定監聽狀態改變的事件
  6. OnCheckedChangeListener 狀態監聽事件,是一個介面,有一個函式需要實現
  7. onCheckedChanged(CompoundButton buttonView, boolean isChecked) 監聽事件需要實現的函式

ToggleButton示例效果圖如下:

ToggleButton原始碼

(xml)原始碼如下:

 1  <TextView
 2         android:id
="@+id/tv_toggle" 3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" 5 android:layout_below="@id/sp_info" 6 android:textSize="15dp" 7 android:layout_marginBottom="10dp" 8 android:text="@string/tv_toggle"/> 9 <ToggleButton
10 android:id="@+id/tb_info" 11 android:textOff="" 12 android:textOn="" 13 android:layout_marginBottom="10dp" 14 android:background="@drawable/toggle_selector" 15 android:layout_below="@id/tv_toggle" 16 android:layout_width="wrap_content" 17 android:layout_height="wrap_content"/>

關於toggle_selector資原始檔如下(資原始檔中的on和off對應圖片):

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3     <item android:state_checked="true" android:drawable="@drawable/on"></item>
4     <item android:state_checked="false" android:drawable="@drawable/off"></item>
5 </selector>

實現監聽事件的原始碼如下:

1 mToggleButton =(ToggleButton) this.findViewById(R.id.tb_info);
2         mToggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
3             @Override
4             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
5                 String info="當前狀態是:"+(isChecked?"開啟":"關閉");
6                 Toast.makeText(MainActivity.this,info,Toast.LENGTH_LONG).show();
7             }
8         });

Switch控制元件

Switch涉及知識點如下:

  1. android:textOff 設定未選中時顯示的文字內容,預設為OFF。
  2. android:textOn 設定選中時顯示的文字內容,預設為ON。
  3. android:thumb:滑塊的圖片
  4. android:showText:設定on/off的時候是否顯示文字,boolean
  5. android:splitTrack:是否設定一個間隙,讓滑塊與底部圖片分隔,boolean
  6. setOnCheckedChangeListener 用於設定監聽狀態改變的事件
  7. OnCheckedChangeListener 狀態監聽事件,是一個介面,有一個函式需要實現
  8. onCheckedChanged(CompoundButton buttonView, boolean isChecked) 監聽事件需要實現的函式

Switch示例效果圖如下:

Switch原始碼

xml原始碼如下(其中的toggle_selector和上面一樣,設定選中和未選中時的圖片):

1 <Switch
2         android:id="@+id/sw_info"
3         android:textOff=""
4         android:textOn=""
5         android:background="@drawable/toggle_selector1"
6         android:track="@drawable/toggle_selector1"
7         android:layout_below="@id/tb_info"
8         android:layout_width="wrap_content"
9         android:layout_height="wrap_content"/>

監聽事件原始碼如下:

1 mSwitch =(Switch)this.findViewById(R.id.sw_info);
2         mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
3             @Override
4             public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
5                 String info="當前狀態是:"+(isChecked?"開啟":"關閉");
6                 Toast.makeText(MainActivity.this,info,Toast.LENGTH_LONG).show();
7             }
8         });

備註

ToggleButton和Switch是很常見的基礎性控制元件,簡單易用,場景廣泛,本文旨在拋磚引玉,希望大家共同學習。