快捷導(dǎo)航

Android入門(mén)之SwitchButton的使用教程

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

SwitchButton是個(gè)什么樣的東西呢？其實(shí)它就是一個(gè)開(kāi)關(guān)。我們?cè)谑謾C(jī)應(yīng)用中經(jīng)常使用到的。本文就來(lái)聊聊Android中的SwitchButton的使用，需要的可以參考一下

介紹

SwitchButton是個(gè)什么樣的東西呢？其實(shí)它就是一個(gè)開(kāi)關(guān)。我們?cè)谑謾C(jī)應(yīng)用中經(jīng)常使用到的。我突然想到2012年我開(kāi)發(fā)Android時(shí)，竟然使用了RadioButton來(lái)做開(kāi)關(guān)這個(gè)梗。

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

課程目標(biāo)

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

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

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

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

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

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

自定義SwitchButton的Thumb和Track

自定義Thumb

它需要兩個(gè)xml文件：

thumb_on
thumb_off

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

在此，我們不會(huì)使用外部圖片.png等資源，而只用android里提供的簡(jiǎn)單的shape來(lái)作這個(gè)圖形的繪制，它相當(dāng)?shù)暮?jiǎn)單

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>

開(kāi)發(fā)這一塊代碼時(shí)我們使用Android Studio里的Split代碼與樣式預(yù)覽集成可以動(dòng)態(tài)看到我們?cè)诟拇a時(shí)右邊圖形發(fā)生的變化。

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

自定義Track

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

switch_custom_track_on.xml
switch_custom_track_off.xml

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

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)軌都定義好了，我們來(lái)看主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>

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

它在界面上會(huì)長(zhǎng)成這么個(gè)樣。

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

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

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

我們對(duì)SwitchButton的onCheckedChanged進(jìn)行了自定義，它運(yùn)行起來(lái)會(huì)是這樣的一個(gè)效果。