https://developer.android.com/jetpack/compose

Material Compose #

• Text
• TextButton
• IconButton
• Column
• Row
• LazyColumn
• LazyRow
• TabRow
• ScrollableTabRow
• Scafflod
• TopAppBar
• BottomAppBar
• ExtendedFloatingActionButtion
• AleartDialog
• DropdownMenu
• DropdownMenuItem
• CircularProgressIndicator

リファレンスのページ #

androidx.compose.material | Android Developers

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#floatingactionbutton

変数はstate(状態)という扱いにする #

var kirokus by remember { mutableStateOf(
    listOf(Kiroku(id=0, name="test0"), Kiroku(id=1, name="test1"))
)
}

Rememberは再コンポーズされたときに実行されるのを防ぐ、

ByはsetValueとgetValueを書かなくて済むようになる。

Byにしないでで作ると、値はkirokus.valueのように.value要素にアクセスする必要がある

Columnをスクロール可能にする #

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {。。。}

テキストフィールドの例 #

onValueChangeで、mutableStateOfの変数を更新しないと、画面が再コンポーズされないため、入力した文字が見えない

ここではmemoメンバーのみ更新しているが、mutableStateOfになっているのはvm.kirokuEdittingなので、vm.kirokuEditting全部をコピーして、memoｍメンバーのみ、新しいあたらしい値にして更新している。(copy()使用)

OutlinedTextField(
    value = vm.kirokuEditting.value.memo,
    onValueChange = { newName: String ->
        vm.kirokuEditting.value = vm.kirokuEditting.value.copy(memo = newName)
    },
    label = { Text("メモ") },
)

Pick Image #

Pick Image from Gallery in Jetpack Compose | by Ngenge Senior | Medium

https://ngengesenior.medium.com/pick-image-from-gallery-in-jetpack-compose-5fa0d0a8ddaf

DropdownMenu #

Box () {
               IconButton(onClick = { expanded = true }) {
                   Icon(Icons.Default.Menu, contentDescription = null)
               }

               DropdownMenu(
                   expanded = expanded,
                   onDismissRequest = { expanded = false }
               ) {
                   DropdownMenuItem(onClick = {expanded=false; onSelected("a")}) {
                       Text("a")
                   }
                   DropdownMenuItem(onClick = {expanded=false; onSelected("b") }) {
                       Text("b")
                   }
                   DropdownMenuItem(onClick = {expanded=false; onSelected("c") }) {
                       Text("c")
                   }
                   DropdownMenuItem(onClick = {expanded=false; onSelected("d")}) {
                       Text("d")
                   }

                   for (idx in 1..20) {
                       DropdownMenuItem(onClick = { expanded = false; onSelected("$idx") }) {
                           Text("$idx")
                       }
                   }


               }
           }

Modifier #

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier

リソース #

https://developer.android.com/jetpack/compose/resources

Text( // a string without arguments text = stringResource(R.string.app_name) )

Text( // a string with arguments text = stringResource(R.string.greeting, “World”) )

IME開いたときにテキストフィールドが隠れてしまうのを見えるようにする（この方法はdeprecated RelocationRequester #

https://stackoverflow.com/questions/66249829/jetpack-compose-scroll-to-focused-composable-in-column

There is a new thing in compose called RelocationRequester. That solved the problem for me. I have something like this inside of my custom TextField.

val focused = source.collectIsFocusedAsState() val relocationRequester = remember { RelocationRequester() } val ime = LocalWindowInsets.current.ime if (ime.isVisible && focused.value) { relocationRequester.bringIntoView() }

BringIntoViewRequester使う #

https://stackoverflow.com/questions/68116203/textfield-is-hiding-under-the-keyboard-when-focused

https://developer.android.com/reference/kotlin/androidx/compose/foundation/relocation/BringIntoViewRequester

https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.Modifier).onFocusEvent(kotlin.Function1)

クリックしたときのエフェクトを無効にする #

Row(
    modifier = Modifier
        .clickable(
            indication = null,
            interactionSource = remember { MutableInteractionSource() } // This is mandatory
        ) {
            // action
        }
)