フォームUIの作成（ボタン、テキストフィールド、チェックボックス）【Jetpack Compose入門⑥】

フォームUIとは？
1. フォームの役割
2. Jetpack ComposeにおけるフォームUI
ボタンの作成
1. 基本的なボタン
2. カスタムスタイルのボタン
テキストフィールドの作成
1. 基本的なテキストフィールド
2. プレースホルダーとスタイルの適用
チェックボックスの作成
1. 基本的なチェックボックス
2. カスタムスタイルのチェックボックス
フォームUIの組み合わせ
まとめ

フォームUIとは？

フォームの役割

フォームUIは、ユーザーがデータを入力し、アプリに情報を送信するための重要な要素です。例えば、ログイン画面や検索機能、アンケートフォームなど、さまざまな場面で使用されます。

Jetpack ComposeにおけるフォームUI

Jetpack Composeでは、従来のXMLレイアウトではなく、KotlinコードのみでフォームUIを作成できます。直感的でシンプルな記述が可能なため、開発の効率が向上します。

本記事では、フォームUIの基本となる「ボタン」「テキストフィールド」「チェックボックス」の作成方法を詳しく解説します。

ボタンの作成

基本的なボタン

Jetpack Composeでは、Buttonコンポーネントを使用してボタンを作成できます。

@Composable
fun SimpleButton() {
    Button(onClick = { /* ボタンがクリックされた時の処理 */ }) {
        Text(text = "クリック")
    }
}

Button：クリック可能なボタンを定義
onClick：クリック時の動作を定義
Text：ボタン内に表示するテキスト

カスタムスタイルのボタン

ボタンの背景色や角丸デザインを変更することも可能です。

@Composable
fun StyledButton() {
    Button(
        onClick = { /* ボタンの処理 */ },
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue),
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(text = "カスタムボタン", color = Color.White)
    }
}

backgroundColor：ボタンの背景色を指定
shape：ボタンの角を丸める
Textのcolor：テキストの色を変更

テキストフィールドの作成

基本的なテキストフィールド

ユーザーからの入力を受け付けるには、TextFieldを使用します。

@Composable
fun SimpleTextField() {
    var text by remember { mutableStateOf("") }
    
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("入力してください") }
    )
}

value：現在の入力値
onValueChange：入力値の変更を監視
label：フィールドのラベルを設定

プレースホルダーとスタイルの適用

placeholderを追加することで、未入力時にガイドテキストを表示できます。

@Composable
fun StyledTextField() {
    var text by remember { mutableStateOf("") }
    
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("名前を入力") },
        placeholder = { Text("例: 山田太郎") },
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.LightGray)
    )
}

placeholder：未入力時に表示される補助テキスト
textFieldColors：背景色のカスタマイズ

チェックボックスの作成

基本的なチェックボックス

Checkboxを使って、ユーザーが選択できるUIを作成できます。

@Composable
fun SimpleCheckbox() {
    var checked by remember { mutableStateOf(false) }
    
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
        Text(text = if (checked) "選択済み" else "未選択")
    }
}

checked：チェックボックスの状態（選択済み or 未選択）
onCheckedChange：チェック状態の変更を監視

カスタムスタイルのチェックボックス

チェックボックスの色を変更するには、colorsを指定します。

@Composable
fun StyledCheckbox() {
    var checked by remember { mutableStateOf(false) }
    
    Row(verticalAlignment = Alignment.CenterVertically) {
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it },
            colors = CheckboxDefaults.colors(checkedColor = Color.Green)
        )
        Text(text = if (checked) "承認済み" else "未承認")
    }
}

checkedColor：チェック時の色を変更

フォームUIの組み合わせ

ボタン、テキストフィールド、チェックボックスを組み合わせて、簡単なフォームを作成してみましょう。

@Composable
fun SimpleForm() {
    var name by remember { mutableStateOf("") }
    var agreed by remember { mutableStateOf(false) }
    
    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("名前") }
        )
        
        Row(verticalAlignment = Alignment.CenterVertically) {
            Checkbox(
                checked = agreed,
                onCheckedChange = { agreed = it }
            )
            Text(text = "利用規約に同意します")
        }
        
        Button(onClick = { /* 送信処理 */ }) {
            Text(text = "送信")
        }
    }
}