우리가 컴포넌트를 구성할 때, 텍스트필드처럼 사용자에게 입력 값을 받아야하는 경우가 종종 있다.
그런 경우 Box, Row, Column 과 같은 Layout Composable 안에 텍스트필드를 놓을텐데 이 때, 텍스트 필드의 포커스가 주어지면 키보드가 올라오면서 하단에 위치하면 컴포넌트를 가리게 되는 경우가 있을 것이다.
이런 경우 개인 프로젝트라면 큰 문제가 없겠지만, 실 서비스 프로젝트인 경우 UX 에 영향을 끼치므로 좋지 않은 사용자 환경이 만들어지게 된다.
이러한 상황을 대비하기 위해 나온 것이 ImePadding 이다.
ImePadding 이란?
기존 XML 을 사용하던 시절에서는 키보드 높이에 맞춰 뷰의 영역을 수정해주려면 WindowInset 에서 키보드 영역을 구하고, 이를 다시 계산하여 뷰에 Padding 을 추가적으로 입혀주는 등 복잡한 로직을 추가해줘야 했다.
하지만 Jetpack Compose 에서는 이 모든 것을 종합한 하나의 Modifier 속성을 추가해주어 Composable Modifier 에 imePadding 속성만 추가해주면 해결되도록 만들어주었기에 손쉽게 키보드 높이를 대응할 수 있게 되었다.
예시로 코드를 하나 만들어보자
Colum 내부에 TextField, LazyColumn, Button 을 놓았다.
만약 여기서 TextField 에 포커스를 주게 된다면 키보드가 올라올텐데 이 경우 어떤 식으로 보여지게 될까?
@Composable
fun Test(modifier: Modifier){
var textFieldValue by remember { mutableStateOf(TextFieldValue()) }
Column(
modifier = modifier
.fillMaxSize()
) {
TextField(
modifier = Modifier.fillMaxWidth(),
value = textFieldValue,
onValueChange = { textFieldValue = it },
placeholder = {
Text(text = "Type something here")
}
)
LazyColumn(
modifier = Modifier.weight(1f),
reverseLayout = true
) {
items(100) { index ->
Text(text = "Item $index", modifier = Modifier
.padding(16.dp)
.fillMaxWidth())
}
}
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {}
){}
}
}
키보드에 의해 아이템, 버튼이 가려지는 모습
키보드가 올라오는 경우 위의 이미지처럼 키보드에 의해 UI 가 가려지는 상황이 발생하게 된다.
그럼 이제 imePadding() 속성을 추가하기 전, Android Manifest 로 이동하여 Activity 에 다음과같이 adjustResize 를 선언해준다.
그 다음 Column 의 Modifier 에 imePadding() 를 추가해주도록 하자
@Composable
fun Test(modifier: Modifier){
var textFieldValue by remember { mutableStateOf(TextFieldValue()) }
Column(
modifier = modifier
.fillMaxSize()
.imePadding()
) {
TextField(
modifier = Modifier.fillMaxWidth(),
value = textFieldValue,
onValueChange = { textFieldValue = it },
placeholder = {
Text(text = "Type something here")
}
)
LazyColumn(
modifier = Modifier.weight(1f),
reverseLayout = true
) {
items(100) { index ->
Text(text = "Item $index", modifier = Modifier
.padding(16.dp)
.fillMaxWidth())
}
}
Button(
modifier = Modifier.fillMaxWidth(),
onClick = {}
){}
}
}
이번에는 키보드에 의해 가려지지 않게 되었다.
이미지처럼 키보드 높이에 맞춰 LazyColumn 및 Button 에 imePadding 이 적용되었다.
혹시나 정상 적용이 되지 않았다면 아래 두 개 중 하나를 선언 후 사용해보도록 하자.
enableEdgeToEdge()
WindowCompat.setDecorFitsSystemWindows(window, false)
