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

この記事からわかること
- Android Studio/KotlinのSwitchの実装方法と使い方
- ON/OFFを切り替えるビューの実装
- 切り替えイベントを取得するには?
- 切り替えに応じてテキストを入れ替える
- setOnCheckedChangeListenerメソッドの使い方
index
[open]
\ アプリをリリースしました /
環境
- 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時の処理
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。