Android/Jetpack Compose
Jetpack Compose 화면 시작 시 키보드 올리기
loppav6
2022. 11. 7. 18:31
안드로이드 참 불친절 하다.
컴포저블 호출 시, TextField에 자동으로 Focus주고 키보드 띄워주는 기능
SDK에서 기능을 제공해주면 얼마나 줗으려나.
어쨌든, 커스텀하게 작성해야 한다. 그래도 방식은 간단하다.
LaunchedEffect를 이용해서 FocusRequester.requestFocus()를 주면 Focus가 On 되면서 키보드가 올라온다.
다만 delay가 없으면 실행이 안된다. Composition이 발생하고 그 끝나는 시점을 모르기 때문에 delay를 주는 것으로 해결했다.
delay는 100ms에서 동작하지만 조금 러프하게 300ms로 주었다.
val focusRequester = remember { FocusRequester() }
TextField(value = "", onValueChange = {},
modifier = Modifier.focusRequester(focusRequester))
LaunchedEffect(Unit) {
delay(300)
focusRequester.requestFocus()
}
ReComposition시 영향은 없을까 하여 간단하게 테스트 해보았다.
val booleanValue = rememberSaveable { mutableStateOf(false) }
Button(modifier = Modifier
.fillMaxWidth(),
onClick = { booleanValue.value = !booleanValue.value }) {
Text(text = "booleanValue: ${booleanValue.value}")
}
문제 없다. 결과는 아래와 같다.
전체소스
@Composable
fun MainView() {
val focusRequester = remember { FocusRequester() }
val textValue = remember { mutableStateOf("") }
val booleanValue = rememberSaveable { mutableStateOf(false) }
LaunchedEffect(Unit) {
delay(300)
focusRequester.requestFocus()
}
Column(
modifier = Modifier
.fillMaxSize()
.windowInsetsPadding(
WindowInsets.systemBars.only(
WindowInsetsSides.Vertical
)
), verticalArrangement = Arrangement.spacedBy(
space = 15.dp, alignment = Alignment.Bottom
)
) {
TextField(modifier = Modifier
.fillMaxWidth()
.focusRequester(focusRequester),
value = textValue.value,
onValueChange = {
textValue.value = it
})
Button(modifier = Modifier
.fillMaxWidth(),
onClick = { booleanValue.value = !booleanValue.value }) {
Text(text = "booleanValue: ${booleanValue.value}")
}
}
}