iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

android studio 30天初學筆記系列 第 14

Android Studio初學筆記-Day14-Switch和Toggle Button

Switch和Toggle Button

今天要講兩個簡單的元件,在還沒碰到這兩個元件之前,想要做到開關的效果可能會用到兩個Button來達成,雖然說也能達到功能,也有些設計者比較喜歡Button的效果,不過我覺得接下來這兩個元件可以達到的變化更多,甚至可以設計出獨一無二的樣式。接下來就讓我來介紹這兩個元件的用法及效果:

介面程式碼

<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/st1"
        android:layout_marginTop="150dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="true"
        android:textOff="關"
        android:textOn="開" />
    <TextView
        android:id="@+id/tx1"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:text="禁用" />
    <ToggleButton
        android:id="@+id/tg1"
        android:layout_gravity="center"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:textOff="關燈"
        android:textOn="開燈"
        android:textSize="25sp"
        android:enabled="false"
        android:disabledAlpha="@android:integer/config_longAnimTime" />
    <TextView
        android:id="@+id/tx2"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:text="關" />

</LinearLayout>
  • Switch和ToggleButton中都有屬性textOn和textOff,很直觀的就是設定當開關打開或關閉時的文字,不過在Switch中需要加一行android:showText=”true”才能將文字顯示在按鈕上。
  • 而在ToggleButton中還有一行disabledAlpha的屬性,其功能是設定當此ToggleButton沒有被致能時的透明度。

接著來看一下開關的功能設定

MainActivity程式碼

public class MainActivity extends AppCompatActivity {
    private ToggleButton toggleButton;
    private Switch st1;
    private TextView tx1;
    private TextView tx2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toggleButton = (ToggleButton)findViewById(R.id.tg1);
        st1 = (Switch)findViewById(R.id.st1);
        tx1 = (TextView)findViewById(R.id.tx1);
        tx2 = (TextView)findViewById(R.id.tx2);

        st1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                tx1.setText(isChecked?"啟用":"禁用");
                toggleButton.setEnabled(isChecked);
            }
        });
        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                tx2.setText(isChecked?"開":"關");
            }
        });

    }
}

這裡有趣的是兩個的開關事件都是透過setOnCheckedChangeListener(),接著用setOnCheckedChange()函數來放置想要的功能,而這裡面放的引數是CompoundButton,而屬於CompoundButton的關鍵是其按鈕功能要是有兩種狀態(選中及未選中),且按鈕按下後會自動變更狀態,而後面的布林變數isChecked便是代表現在的狀態,可以透過此變數來取得現在的狀態後再設定其功能。

成果

https://ithelp.ithome.com.tw/upload/images/20210907/20139136PukFTqVf5Z.png
https://ithelp.ithome.com.tw/upload/images/20210907/201391366Bz7RgdEVL.png
今天Switch和Toggle Button就講到這,謝謝大家~/images/emoticon/emoticon41.gif


上一篇
Android Studio初學筆記-Day13-ScrollView
下一篇
Android Studio初學筆記-Day15-ListView
系列文
android studio 30天初學筆記30

尚未有邦友留言

立即登入留言