반응형
1. 개요
안드로이드 Jetpack Compose에서 키보드(IME)가 올라올 때 특정 뷰를 자동으로 올려 UI가 가려지지 않도록 하는 방법을 소개합니다. Compose의 WindowInsets 또는 Accompanist 라이브러리를 활용하여 키보드가 화면을 가리지 않도록 처리할 수 있습니다.
2. 기본적인 해결 방법 (WindowInsets 활용)
Jetpack Compose에서는 WindowInsets.ime을 사용하여 키보드 높이를 가져오고, 이를 padding()으로 적용하여 UI를 자동으로 이동시킬 수 있습니다.
📌 코드 예제
@Composable
fun KeyboardAwareScreen() {
val insets = WindowInsets.ime
val imeHeight by remember { derivedStateOf { insets.getBottom(LocalDensity.current) } }
Column(
modifier = Modifier
.fillMaxSize()
.padding(bottom = imeHeight) // 키보드 높이만큼 패딩 적용
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(50.dp))
Text(text = "키보드가 올라오면 뷰가 이동합니다.")
Spacer(modifier = Modifier.height(200.dp))
OutlinedTextField(
value = "",
onValueChange = {},
label = { Text("입력") },
modifier = Modifier.fillMaxWidth()
)
}
}
✅ 설명
- WindowInsets.ime.getBottom(LocalDensity.current)을 사용하여 키보드 높이를 가져옴
- padding(bottom = imeHeight)을 적용하여 뷰를 키보드 높이만큼 위로 이동
- verticalScroll()을 추가하여 내용이 스크롤 가능하도록 설정
3. Accompanist 라이브러리를 활용한 방법
Accompanist는 Jetpack Compose의 WindowInsets을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다.
📌 Accompanist 의존성 추가
dependencies {
implementation "com.google.accompanist:accompanist-insets:0.28.0"
}
📌 코드 예제
@Composable
fun KeyboardAwareScreenWithInsets() {
ProvideWindowInsets {
Column(
modifier = Modifier
.fillMaxSize()
.imePadding() // 키보드 높이만큼 자동 패딩 적용
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(50.dp))
Text(text = "Accompanist를 활용한 자동 뷰 이동")
Spacer(modifier = Modifier.height(200.dp))
OutlinedTextField(
value = "",
onValueChange = {},
label = { Text("입력") },
modifier = Modifier.fillMaxWidth()
)
}
}
}
✅ 설명
- ProvideWindowInsets {}를 사용하여 WindowInsets 지원 활성화
- imePadding()을 적용하면 키보드가 올라올 때 자동으로 패딩이 조정됨
- 추가적인 padding() 계산 없이 쉽게 키보드 대응 가능
4. 부드러운 애니메이션 적용 방법
Compose의 animateDpAsState()를 활용하면 키보드가 올라올 때 부드러운 이동 효과를 적용할 수 있습니다.
📌 코드 예제
@Composable
fun AnimatedKeyboardAwareScreen() {
val insets = WindowInsets.ime
val imeHeight by remember { derivedStateOf { insets.getBottom(LocalDensity.current) } }
val animatedPadding by animateDpAsState(targetValue = imeHeight, label = "imePadding")
Column(
modifier = Modifier
.fillMaxSize()
.padding(bottom = animatedPadding) // 부드러운 이동 적용
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(50.dp))
Text(text = "애니메이션 적용")
Spacer(modifier = Modifier.height(200.dp))
OutlinedTextField(
value = "",
onValueChange = {},
label = { Text("입력") },
modifier = Modifier.fillMaxWidth()
)
}
}
✅ 설명
- animateDpAsState()를 활용하여 imeHeight 값이 변경될 때 부드러운 애니메이션 적용
- 키보드가 올라오거나 내려갈 때 자연스러운 패딩 이동 효과 구현
5. imePadding() vs padding(bottom = imeHeight) 비교
방법 장점 단점
| imePadding() | Accompanist 라이브러리만 추가하면 자동 적용 | Accompanist 의존성 필요 |
| padding(bottom = imeHeight) | 추가 라이브러리 없이 기본 Compose 기능으로 구현 가능 | 직접 WindowInsets.ime.getBottom() 값을 계산해야 함 |
6. 결론
Jetpack Compose에서 키보드가 올라왔을 때 UI가 가려지지 않도록 하려면 Accompanist의 imePadding() 또는 WindowInsets.ime.getBottom()을 활용한 직접 패딩 조정 방법을 사용할 수 있습니다.
✔️ 추천 방법
- 간단한 해결책: imePadding() 사용 (Accompanist 필요)
- 추가 라이브러리 없이 구현: WindowInsets.ime.getBottom() 활용
- 부드러운 전환 효과: animateDpAsState()로 애니메이션 적용
🚀 최신 Compose 업데이트에서 Accompanist 기능이 기본 제공될 예정이므로, 가능하면 imePadding()을 사용하는 것이 가장 편리한 방법입니다.
반응형