Android入門之SwitchButton的使用教程

Posted on by

介紹

SwitchButton是個什麼樣的東西呢？其實它就是一個開關。我們在手機應用中經常使用到的。我突然想到2012年我開發Android時，竟然使用瞭RadioButton來做開關這個梗。

其實SwitchButton文如其名，它就是一個“開”和“關”兩個狀態事件存在時使用的，最典型的SwitchButton長下面這麼個樣子。

課程目標

制作一個類似於IOS裡的SwitchButton效果的按鈕。並且打印出它當前的狀態。

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

其實美化不用太精致，必竟我們不是專業UI，因此開發者們一定不要一開始沉醉於界面樣式的太Beautiful，我們主要核心就是把Android開發全給掌握瞭，並且它是為我們本身的JAVA中臺、大數據、AI開發能力來服務的。因為你開發的很多後臺功能，如果對於一些大領導或者是業務型領導，他們是看不到你的“真實能力的”，他們更多關註的是“功能長什麼樣”，因此如果直接可以讓他們看到在手機裡運行起來這個人臉、這個物品識別、這個用手機設藍牙鎖開鎖等過程你可以省卻很多無用的BLA BLA。同時還能為自己將來進一步通往IOT領域打下堅實的基礎。因此在我的教程裡不會太多講如何的專業UI。

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

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

我們自定義這兩個UI部分即可實現。

自定義SwitchButton的Thumb和Track

自定義Thumb

它需要兩個xml文件：

  • thumb_on
  • thumb_off

然後把這兩個xml文件合到一個selector的xml文件內申明成on時用哪個文件、off時用哪個文件就能起到switch button的這個圓點點樣式的自定瞭。

在此，我們不會使用外部圖片.png等資源，而隻用android裡提供的簡單的shape來作這個圖形的繪制，它相當的簡單

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>

開發這一塊代碼時我們使用Android Studio裡的Split代碼與樣式預覽集成可以動態看到我們在改代碼時右邊圖形發生的變化。

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

自定義Track

導軌我們也使用藍色，它同樣也是分成：

  • switch_custom_track_on.xml
  • switch_custom_track_off.xml

然後同樣也在一個selector xml文件內申明成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>

好，我們以上把按鈕和導軌都定義好瞭，我們來看主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文件。

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

我們來看這個按鈕的事件是如何響應的。

SwitchButton交互事件發生時的代碼

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進行瞭自定義，它運行起來會是這樣的一個效果。

運行效果

開關off時

開關on時

到此這篇關於Android入門之SwitchButton的使用教程的文章就介紹到這瞭,更多相關Android SwitchButton內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：