• 2023/10/12
• 3分

【Kotlin/Android Studio】Switchの使い方！ON/OFF切り替えイベントの取得

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

公式リファレンス：Switch

環境

• Android Studio：Flamingo
• Kotlin：1.8.20

AndroidでSwitchの実装方法

何らかの設定や項目のON/OFFを切り替えるようなスイッチはAndroidではSwitchウィジェットで実装することができます。XML側では以下のように実装します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

これで以下のようにタップするとスイッチが動作するUIを構築することができます。

初期値をチェック状態にする

最初からチェック状態にするにはandroid:checked属性にtrueを渡します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:checked="true"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Kotlinコードで実装

switch.isChecked = true

テキストをつける

スイッチの横にテキストを付与したい場合はandroid:text属性を追加します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="スイッチ"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Kotlinコードで実装

switch.setText("スイッチ")

ON/OFFを表示する

スイッチのON/OFFを表示するにはandroid:showText属性にtrueを渡します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:showText="true"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Kotlinコードで実装

switch.showText = true

ON/OFFの文字を変更する

表示させたON/OFFの文字を変更するにはtextOnとtextOffにそれぞれ指定します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textOn="1"
  android:textOff="0"
  android:showText="true"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Kotlinコードで実装

switch.textOn = "1"
switch.textOff = "0"

色を変える

スイッチの色を変更するには android:thumbTint属性にカラーコードを指定します。

<Switch
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:thumbTint="#DD4147"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.5"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.5" />

Kotlinコードで実装

switch.thumbTintList = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.black))

スイッチが切り替わったイベントを取得する

スイッチが切り替わった際にそれぞれ処理を実行するにはsetOnCheckedChangeListenerメソッドを使用します。2つ目の引数からチェックされているかどうかをBoolean型で取得することができるのでその値によって処理を分岐させることができます。

switch.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
        // ON時の処理
    } else {
        // OFF時の処理
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。