[kotlin] Jetpack Compose에서 키보드 관리하기

11 Dec 2023

kotlin

Jetpack Compose는 Android 앱을 빌드하기 위한 새로운 방식을 제공하는 UI 툴킷입니다. 이 툴킷은 강력한 기능을 제공하며, 사용자 경험을 향상시키는데 도움이 됩니다. 이번에는 Jetpack Compose에서 키보드를 관리하는 방법에 대해 알아보겠습니다.

1. 입력란에 포커스 주기

Jetpack Compose에서 키보드를 관리하기 위해서는 먼저 사용자가 입력을 할 수 있는 UI 요소에 포커스를 줘야 합니다. 이를 위해 TextField나 BasicTextField와 같은 Compose에서 제공하는 입력 요소들을 사용할 수 있습니다. 예를 들어, 다음과 같이 TextField를 사용하여 입력란에 포커스를 줄 수 있습니다.

import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.ui.text.input.ImeAction

BasicTextField(
    value = text,
    onValueChange = { newText -> text = newText },
    keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(onDone = { /* 키보드에서 완료 버튼을 누를 때 실행될 동작 */ })
)

2. 키보드 관련 이벤트 처리

입력 요소에 포커스를 주었다면, 키보드 관련 이벤트를 처리할 수 있습니다. 예를 들어, TextField의 onImeActionPerformed를 사용하여 특정 키보드 동작에 대한 이벤트를 처리할 수 있습니다.

TextField(
    value = text,
    onValueChange = { newText -> text = newText },
    onImeActionPerformed = { action, controller -> /* 특정 키보드 동작에 대한 이벤트 처리 */ }
)

3. 레이아웃 조정

키보드가 나타날 때 UI를 고려하여 레이아웃을 조정해야 합니다. Scaffold나 ConstraintLayout과 같은 Compose에서 제공하는 레이아웃 요소를 사용하여 키보드가 나타났을 때 UI를 조정할 수 있습니다.

ConstraintLayout(
    Modifier
        .fillMaxSize()
        .padding(LocalWindowInsets.current.systemBars.toPaddingValues())
        .onSizeChanged { constraints, insets ->
            val keyboardHeight = insets.ime.height.toDp()
            // 키보드가 나타날 때 UI 조정
        }
) {
    // UI 구성 요소들
}

Jetpack Compose를 사용하는 앱에서 키보드 관리는 사용자 경험을 향상시키는데 중요한 요소입니다. 앞서 소개한 방법을 활용하여 효과적으로 키보드를 관리하고, 사용자의 편의성을 높일 수 있습니다.

더 많은 정보를 보시려면, Jetpack Compose 공식 문서를 참고하시기 바랍니다.