Memo

メモ > 技術 > IDE: AndroidStudio > アプリの作成（Jetpack Compose / 入力内容の表示）
アプリの作成（Jetpack Compose / 入力内容の表示）

前提知識として、「アプリの作成（Jetpack Compose） > Jetpack Composeの基本」の「ボタンをクリックしてUIを更新」を参照
以下のようにすると「ボタンを押すと、入力されたテキストをそのまま表示」ができる
「onValueChange」の内容は、テキストが変更される度に呼び出される（入力中もどんどん呼ばれる）

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    var inputText by remember { mutableStateOf(TextFieldValue("")) }
    var displayedText by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        OutlinedTextField(
            value = inputText,
            onValueChange = {
                inputText = it
            },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = {
            displayedText = inputText.text
        }) {
            Text("表示")
        }

        Spacer(modifier = Modifier.height(16.dp))

        Text("入力されたテキスト: " + displayedText)
    }
}


以下のようにすると「リアルタイムに、入力されたテキストをそのまま表示」ができる

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    var inputText by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        OutlinedTextField(
            value = inputText,
            onValueChange = {
                inputText = it
            },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        Text("入力されたテキスト: " + inputText.text)
    }
}


応用として、以下のようにすると「リアルタイムに、入力された西暦を和暦に変換して表示」ができる

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    var inputText by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text("和暦変換", fontSize = 30.sp)
        Spacer(modifier = Modifier.height(16.dp))
        Text("年月日を入力すると和暦で表示します。")
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = inputText,
            onValueChange = {
                inputText = it
            },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        if (inputText.text.length == 8 && inputText.text.toIntOrNull() != null) {
            val year  = inputText.text.substring(0, 4).toInt()
            val month = inputText.text.substring(4, 6).toInt()
            val day   = inputText.text.substring(6, 8).toInt()

            val (wareki_label, wareki_year) = getWareki(year, month, day)

            Text("和暦は${wareki_label}${wareki_year}年${month}月${day}日です。", fontSize = 20.sp)
        } else {
            Text("8桁の数字で入力してください。", fontSize = 20.sp)
        }
    }
}

fun getWareki(year: Int, month: Int, day: Int): Pair<String, Int> {
    val date = String.format("%04d%02d%02d", year, month, day).toInt()
    return when {
        date >= 20190501 -> Pair("令和", year - 2018)
        date >= 19890108 -> Pair("平成", year - 1988)
        date >= 19261225 -> Pair("昭和", year - 1925)
        date >= 19120730 -> Pair("大正", year - 1911)
        date >= 18680125 -> Pair("明治", year - 1867)
        else -> Pair("", year)
    }
}


JetpackCompose KeyBoard Options と Actions - Qiita
https://qiita.com/kk__777/items/cf124ad92e68b93c2acf
Memo

Advertisement
