iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Mobile Development

Android Studio 30天自我挑戰系列 第 20

[Android Studio 30天自我挑戰] Switch 元件介紹

這篇的Switch button與前幾篇的ToggleButton很類似,
但ToggleButton為點擊後切換,而Switch則可以明顯的看出開關的移動

Switch元件常用屬性

android:splitTrack	//設定文字與開關之間的距離
android:switchMinWidth	//設定開關的最小寬度
android:switchPadding	//設定Switch內文字的間隔
android:switchTextAppearance  //設定Switch的文字外觀
android:textOff	//當按鈕沒被打開時的文字
android:textOn	//當按鈕被開啟時的文字
android:textStyle	//文字樣式
android:track	//Switch底部的圖片
android:thumb	//Switch滑動的圖片
android:typeface //設定文字樣式

簡單的範例如下:
先在activity_main.xml檔下插入一個Switch

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:showText="true"
        android:text="開關燈"
        android:textOff="關"
        android:textOn="開"
        android:textSize="30dp"
        android:textStyle="bold"
        android:thumb="@drawable/switchthumb"
        android:track="@drawable/switchtrack" />
</LinearLayout>

如果想要變更Switch的圖案,就在drawable下新增thumb和track樣式的xml檔
thumb樣式:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">

        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <size android:height="40dp"
                android:width="50dp"/>
            <corners android:radius="40dp"/>
            <stroke android:width="2dp"
                android:color="@color/black"/>
        </shape>
    </item>
    <item android:state_checked="false">

        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <size android:height="40dp"
                android:width="50dp"/>
            <corners android:radius="40dp"/>
            <stroke android:width="2dp"
                android:color="#cdcdcd"/>
        </shape>
    </item>
</selector>

track樣式:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">

        <shape android:shape="rectangle">
            <solid android:color="@color/black"/>
            <corners android:radius="200dp"/>
        </shape>
    </item>
    <item android:state_checked="false">

        <shape android:shape="rectangle">
            <solid android:color="#cdcdcd"/>
            <corners android:radius="200dp"/>
        </shape>
    </item>

</selector>

設定好樣式後打開MainActivity.java設定打開時會跳出Toast提示目前電源開關資訊

package com.example.itt;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.Switch;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements OnCheckedChangeListener {
    private Switch aSwitch;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        aSwitch = (Switch) findViewById(R.id.switch1);
        aSwitch.setOnCheckedChangeListener(this);
    }
    @Override
    public void onPointerCaptureChanged(boolean hasCapture) {
    }

    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

        String state = compoundButton.isChecked() ? "開燈" :"關燈";
        Toast.makeText(this,"電源目前狀態:"+state,Toast.LENGTH_SHORT).show();
    }
}

APP成功畫面:
https://ithelp.ithome.com.tw/upload/images/20211005/20139258A5JXWjwAk2.png
https://ithelp.ithome.com.tw/upload/images/20211005/20139258svcI2BKhya.png


上一篇
[Android Studio 30天自我挑戰] 透過Banner來輪播廣告資訊
下一篇
[Android Studio 30天自我挑戰] ListView 元件介紹
系列文
Android Studio 30天自我挑戰30

尚未有邦友留言

立即登入留言