Open1

ダイヤログボックスで入力処理

Kotlin
Android Studio
Jetpack Compose
入力画面
るるすたるるすた

汎用ダイアログとは？

こんな感じのものです。
入力ボックスを設置すれば、ちょっとした入力画面に使えます！

ダイアログの枠を作成

ダイアログ用のコンポーズ関数を作成
AlertDialogを組み込む。
各プロパティの意味はコメントの通り。

@Composable
fun EditProfile(
    initialName: String, //プロフィールの初期値
    onConfirm: (String) -> Unit, //プロフィールの更新(viewModelで処理)
    onDismiss: () -> Unit, //キャンセル時の処理（ダイアログを消す）
){
        var text by remember { mutableStateOf(initialName) }//初期値を現在の名前にする

    AlertDialog(
        onDismissRequest = { } ,    //ダイアログをキャンセルしようとしたときの処理
        title = { },                //ダイアログのタイトル
        text = {},                  //本体
        confirmButton = {},         //OKボタン
        dismissButton = {},         //キャンセルボタン
    )
}

ダイアログの詳細を作成

ダイアログがキャンセルされたときの処理とタイトル

  • onDismissRequestにはダイアログを消したときの処理を入れます。
    例えば、ダイアログ以外の場所をタップしたとか、戻るボタンをタップしたとかにより
    ダイアログが消える場合です。
  • タイトルはダイアログのタイトルを設定します。
  • 本体には入力ボックスを設定しています。
  • cnfirmButtonにはわかりやすくOKボタンを配置。
    クリックしたときの処理は、呼び出し元からonConfirmを受け取って処理。
    呼び出し元ではviewModelにあるupdateName関数を設定しています。
  • dismissButtonも同様に線だけのキャンセルボタンを配置。
    これもクリックしたときの処理は、呼び出し元からもらいます。
    呼び出し元では、クリックするとshowDialogをfalseに設定。
@Composable
fun EditProfile(
    initialName: String, //プロフィールの初期値
    onConfirm: (String) -> Unit, //プロフィールの更新(viewModelで処理)
    onDismiss: () -> Unit, //キャンセル時の処理（ダイアログを消す）
){
    var text by remember { mutableStateOf(initialName) }    //初期値を現在の名前にする

    AlertDialog(
        onDismissRequest = onDismiss ,    //ダイアログをキャンセルしようとしたときの処理
        title = { Text(stringResource(R.string.profile_name) + stringResource(R.string.icon_edit)) },  //ダイアログのタイトル
        text = {   //本体
            OutlinedTextField(  //入力ボックス
                value = text,
                onValueChange = { text = it },
                label = { Text(stringResource(R.string.profile_name)) }
            )
        },
        confirmButton = {   //OKボタン
            Button(
                onClick = { onConfirm(text) },
            ){
                Text(text = stringResource(R.string.icon_OK))
            }
        },
        dismissButton = {        //キャンセルボタン
            OutlinedButton(onClick = onDismiss ){
                Text(text = stringResource(R.string.icon_cancel))
            }
        },
    )
}

呼び出し元

ダイアログを表示するかどうかは、変数showDaialogで制御。
普段はfalseになっており、編集ボタンをタップするとshowDaialogがtrueに変わる。
これがtrueのとき、この例の場合、EditProfileという関数が呼ばれる仕組み。

@Composable
fun ProfileScreen(
    modifier: Modifier = Modifier,
    profile: ProfileEntity?,
    viewModel: ProfileViewModel,
){
    //省略
            IconButton(
                onClick = { showDialog = true },
                modifier = Modifier
            ){
                Icon(
                    imageVector = Icons.Filled.Edit,
                    contentDescription = stringResource(R.string.icon_edit),
                    tint = MaterialTheme.colorScheme.primary
                )
            }
        //省略

    if (showDialog) {
        EditProfile(
            initialName = profile?.name ?: "ななしさん",
            onConfirm = { newName ->
                profile?.let {
                    viewModel.updateName(newName)
                }
                showDialog = false
            },
            onDismiss = { showDialog = false }
        )
    }
}