🤖

Jetpack ComposeでSwitchを使ってみた

に公開
Android
Jetpack Compose
tech

スイッチを使う

詳解 Jetpack Compose ── 基礎から学ぶAndroidアプリの宣言的UIを読んで学習しておりますが、結構躓くところがあった。

Android Studioが🐞のせいではないようだ？
レイアウトの問題なのか。。。。

https://developer.android.com/develop/ui/compose/components/switch?hl=ja

https://youtube.com/shorts/2yR7G7UtXDg

以下の修正を行いました：

  1. レイアウトの改善:
    Columnに中央寄せの設定を追加
    ScaffoldのinnerPaddingを適切に処理

  2. Switch機能の改善:
    Switchの状態に応じて "ON" または "OFF" のテキストを表示
    onCheckedChangeの処理をchecked = itに変更（これはchecked = !checkedと同じ効果です）

  3. コンポーネントの配置:
    テキストとSwitchを縦方向に中央配置
    画面全体を使用するように設定
    これで以下のように動作するはずです：

  • Switchを切り替えると状態が変化します
  • 現在の状態が "ON" または "OFF" のテキストで表示されます
  • コンポーネントが画面中央に配置されます
package com.example.composetour

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composetour.ui.theme.ComposeTourTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeTourTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    SwitchSample()
                }
            }
        }
    }
}

@Composable
fun SwitchSample() {
    var checked by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = if (checked) "ON" else "OFF")
        Switch(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }
}

感想

Jetpack Composeはそのままのレイアウトだと動作が確認しずらいのかもしれない？
部品１個のときは中央寄せが良いかもしれない。

Discussion