⚙ [트러블 슈팅] IME Padding

IME Padding 적용 개요

위의 설명 추가, Chip 부분에서 TextField, BasicTextField를 사용해서 구현하고 있다.

여기서 KeyBoard가 올라올 때 설명 추가와 Chip이 가려지는 현상이 발생하여 이를 해결하고자 Window Inset을 적용하였다.

먼저 Component에 KeyBoard 만큼의 Padding을 추가해주어야 한다.

IME(Input Method Editor)

ime는 화면 상에 나타나는 키보드를 나타낸다. 사용자가 텍스트를 입력하는 데 사용하는 이터페이스로, 모바일 장치에서 키보드가 나타날 때 발생한다.

WindowInsets.ime 는 화면의 키보드 영역에 대한 insets 정보를 제공한다. 즉, 키보드가 화면에서 차지하는 높이나 위치를 확인할 수 있다.

WindowInsetes.ime.getBottom(LocalDensity.current) 를 사용하면 키보드가 차지하는 높이를 dp 단위로 구할 수 있다. 화면 아래에서 키보드가 차지하는 공간의 높이를 반환한다. LocalDensity.current 는 화면의 밀도 정보를 제공하며, 실제 dp 값으로 변환하는 데 필요하다.

imePadding() 는 키보드가 올라올 때 컴포넌트가 키보드에 가려지지 않도록 자동으로 패딩을 추가하는 Modifier이다. 키보드가 화면에 올라올 때, 그 공간만큼 자동으로 UI 레이아웃을 위로 밀어주어, 입력 필드가 키보드에 의해 가려지지 않도록 한다.

적용하기

스크롤이 적용되어 있기 때문에 imePadding() 을 이용하여 패딩을 추가하고 ime가 발생할 때 가장 하단으로 scroll 하게 하여 문제를 해결할 수 있다.

val scrollState = rememberScrollState()
val imeHeight = WindowInsets.ime.getBottom(LocalDensity.current)
val coroutineScope = rememberCoroutineScope()

LaunchedEffect(imeHeight) {
    coroutineScope.launch {
        scrollState.scrollTo(scrollState.maxValue)
    }
}

imeHeight가 변경되는 것을 감지하여 scroll 하게 하고,

UploadContent(
    imgUri = imgUri,
    modifier = Modifier
        .weight(1f)
        .fillMaxSize()
        .verticalScroll(scrollState)
        .imePadding(),

UploadContent에 imePadding()을 적용하여 키보드 만큼 공간을 확보하고 스크롤하게 하면 된다.

⚠️ 문제 상황1

TextField를 클릭하면 키보드가 올라오고 Component와 StatusBar 가 겹치는 현상이 발생하였다.

❓ 문제의 이유1

Compose가 키보드가 올라오는 이벤트에 대하여 기본적인 UI 조정을 처리하지 않기 때문에 이를 해결해주어야 한다.

✔️ 해결1

Compose가 키보드가 올라오는 이벤트에 대한 기본적인 UI 조정을 처리하지 않기 때문에 이를 해결해주어야 한다.

Manifest에 android:WindowSoftInputMode="adjustResize" 를 설정하면 이 문제를 해결할 수 있다. 이는 키보드가 화면에 올라올 때 레이아웃을 자동으로 조정하는 방법이다.

adjustResize ⇒ 키보드가 올라올 때, 시스템은 화면 레이아웃을 조정하여 키보드가 화면의 일부와 겹쳐지지 않게 한다. 키보드가 올라올 때, 레이아웃의 크기를 변경하여 화면 일부가 키보드와 겹쳐지지 않도록 한다. 입력 필드가 가려지지 않도록 자동으로 조정한다.

이 과정을 통해서 UI 레이아웃이 자동으로 조정되어 Component들이 statusbar와 겹쳐지는 것을 방지할 수 있다.