Compose 키보드가 화면을 가리는 문제

개요

 

위와 같이 여러개의 텍스트 필드가 화면에 배치되게 되면

키보드가 올라올 때 하단에 위치한 텍스트 필드를 가리게 되는 문제가 발생한다.

 

이를 방지하기 위해 키보드 스크롤 설정을 해줘야 한다.

 

 

매니패스트 설정

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize" // 이 구문 추가
    android:theme="@style/Theme.EscapeAnchovy">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

메인 액티비티 부분에 해당 구문을 추가한다.

 

 

UI 구조

@Composable
fun ContentResizingScreen(
    contentColumn: @Composable ColumnScope.() -> Unit,
    bottomRow: @Composable RowScope.() -> Unit
) {
    val focusManager = LocalFocusManager.current
    val scrollState = rememberScrollState()

    Column(
        modifier = Modifier
            .padding(start = 40.dp, end = 40.dp)
            .imePadding()
            .pointerInput(Unit) {
                detectTapGestures(onTap = { focusManager.clearFocus() })
            }
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .verticalScroll(scrollState)
        ) { contentColumn() }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 28.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) { bottomRow() }
    }
}

공통적으로 사용할 UI구조를 선언해준다.

 

최상단 컬럼의 Modifier에 imePadding()을 추가하고,

그 자식 컬럼은 남은 영역을 꽉 채우고 스크롤이 가능하도록 설정한다.

 

하단 영역에는 패딩 정도만 주면 된다.

 

 

imePadding이란?

소프트 키보드(IME: Input Method Editor)가 화면에 나타날 때,

그로 인해 UI 요소가 가려지지 않도록 패딩을 추가하는 역할을 한다.

 

 

주의사항

imePadding은 텍스트필드의 높이를 기반으로 주어지는 값이기에

만약 BasicTextField를 이용해 커스텀 텍스트필드를 선언했다면

높이를 padding으로 주는 것이 아닌 Modifier.height로 줘야 패딩이 제데로 적용된다.

 

이걸 몰라서 내가 3시간을 삽질했다.. 이건 검색해도 안나와서....