快捷導(dǎo)航

Android入門之SwitchButton的使用教程

更新時間：2022年11月09日 14:35:04 作者：TGITCIC

SwitchButton是個什么樣的東西呢？其實它就是一個開關(guān)。我們在手機應(yīng)用中經(jīng)常使用到的。本文就來聊聊Android中的SwitchButton的使用，需要的可以參考一下

介紹

SwitchButton是個什么樣的東西呢？其實它就是一個開關(guān)。我們在手機應(yīng)用中經(jīng)常使用到的。我突然想到2012年我開發(fā)Android時，竟然使用了RadioButton來做開關(guān)這個梗。

其實SwitchButton文如其名，它就是一個“開”和“關(guān)”兩個狀態(tài)事件存在時使用的，最典型的SwitchButton長下面這么個樣子。

課程目標(biāo)

制作一個類似于IOS里的SwitchButton效果的按鈕。并且打印出它當(dāng)前的狀態(tài)。

Android Studio自帶的SwitchButton樣式非常的難看，達(dá)不到我們要的效果，它如果直接拖到我們的Android Studio里是一個灰白色的按鈕。我們這次把這個按鈕美化一下。

其實美化不用太精致，必竟我們不是專業(yè)UI，因此開發(fā)者們一定不要一開始沉醉于界面樣式的太Beautiful，我們主要核心就是把Android開發(fā)全給掌握了，并且它是為我們本身的JAVA中臺、大數(shù)據(jù)、AI開發(fā)能力來服務(wù)的。因為你開發(fā)的很多后臺功能，如果對于一些大領(lǐng)導(dǎo)或者是業(yè)務(wù)型領(lǐng)導(dǎo)，他們是看不到你的“真實能力的”，他們更多關(guān)注的是“功能長什么樣”，因此如果直接可以讓他們看到在手機里運行起來這個人臉、這個物品識別、這個用手機設(shè)藍(lán)牙鎖開鎖等過程你可以省卻很多無用的BLA BLA。同時還能為自己將來進(jìn)一步通往IOT領(lǐng)域打下堅實的基礎(chǔ)。因此在我的教程里不會太多講如何的專業(yè)UI。

為了滿足我們基本的UI，我們需要知道SwitchButton的外觀受以下幾個事件的影響，它們是：

android:thumb，SwithButton上的這個“圓點點”的外觀，再分on時長什么樣、off時長什么樣；
android:track，SwitchButton圓點點的背后一個長橢圓型的導(dǎo)軌的樣式，再分按鈕是on時導(dǎo)軌是綠的、off時導(dǎo)軌是淺灰的；

我們自定義這兩個UI部分即可實現(xiàn)。

自定義SwitchButton的Thumb和Track

自定義Thumb

它需要兩個xml文件：

thumb_on
thumb_off

然后把這兩個xml文件合到一個selector的xml文件內(nèi)申明成on時用哪個文件、off時用哪個文件就能起到switch button的這個圓點點樣式的自定了。

在此，我們不會使用外部圖片.png等資源，而只用android里提供的簡單的shape來作這個圖形的繪制，它相當(dāng)?shù)暮唵?/p>

switch_custom_thumb_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#94C5FF" />
    <size
        android:width="40dp"
        android:height="40dp" />
</shape>

switch_custom_thumb_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#AAA" />
    <size
        android:width="40dp"
        android:height="40dp" />
</shape>

switch_custom_thumb_selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_custom_thumb_on" android:state_checked="true" />
    <item android:drawable="@drawable/switch_custom_thumb_off" android:state_checked="false" />
</selector>

開發(fā)這一塊代碼時我們使用Android Studio里的Split代碼與樣式預(yù)覽集成可以動態(tài)看到我們在改代碼時右邊圖形發(fā)生的變化。

這邊的thumb就是給你的“手指”按的圓點點我們使用的是android:shape="oval"，藍(lán)色。

自定義Track

導(dǎo)軌我們也使用藍(lán)色，它同樣也是分成：

switch_custom_track_on.xml
switch_custom_track_off.xml

然后同樣也在一個selector xml文件內(nèi)申明成on時用哪個文件、off時用哪個文件。

switch_custom_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#B6D6FE" />
    <stroke
        android:width="5dp"
        android:color="#00000000" />
    <corners android:radius="20dp" />
</shape>

switch_custom_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#E3E3E3" />
    <stroke
        android:width="5dp"
        android:color="#00000000" />
    <corners android:radius="20dp" />
</shape>

switch_custom_track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_custom_track_on" android:state_checked="true" />
    <item android:drawable="@drawable/switch_custom_track_off" android:state_checked="false" />
</selector>

好，我們以上把按鈕和導(dǎo)軌都定義好了，我們來看主UI界面。

主UI界面activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <Switch android:id="@+id/switchBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:thumb="@drawable/switch_custom_thumb_selector"
            android:track="@drawable/switch_custom_track_selector" />
    </LinearLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

看，以上代碼里我們對android:thumb和android:track使用了這兩個自定義on/off樣式的xml文件。

它在界面上會長成這么個樣。

我們來看這個按鈕的事件是如何響應(yīng)的。

SwitchButton交互事件發(fā)生時的代碼

MainActivity.java

package org.mk.android.demo;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.util.Log;
import android.widget.CompoundButton;
import android.widget.Switch;
 
public class MainActivity extends AppCompatActivity {
    private Switch btnSwitch;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnSwitch = (Switch) findViewById(R.id.switchBtn);
        btnSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    Log.i("app", ">>>>>>switched is on");
                } else {
                    Log.i("app", ">>>>>>switched is off");
                }
            }
        });
    }
}

我們對SwitchButton的onCheckedChanged進(jìn)行了自定義，它運行起來會是這樣的一個效果。