[Android] Modifier.imePadding() 깔끔하게 사용하기

#1 개요

Modifier.imePadding()을 통해서, BottomBar가 깔끔하게 동작하게 만드는 시행착오를 기록했다.

 

#2 시행착오 1

#2-1 코드

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
        MainTopBar()
    }
) { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
    ) {
        MainContent(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
        )
        MainBottomBar(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}

간단한 코드다. MainBottomBar()를 Scaffold의 프로퍼티에 넣지 않은 이유는, BottomSheetScaffold()를 사용할 수도 있기 때문이었다. BottomSheetScaffold()는 BottomBar를 받는 프로퍼티가 존재하지 않는다.

 

#2-2 스크린샷

TextField의 아래쪽 8.dp 패딩이 가려진다. 왜냐하면, 가상키보드(ime)가 TextField를 밀어올렸기 때문이다. TextField의 아래쪽 패딩은 TextField로 취급되지 않기 때문에 ime가 밀지 않고 그냥 가려버린다. 나는 이 부분이 마음에 들지 않았다. 게다가 Scaffold의 topBar 또한 밀려 올라가는게 싫었다.

 

#3 시행착오 2

#3-1 코드

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .imePadding(), /* 추가! */
    topBar = {
        MainTopBar()
    }
) { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
    ) {
        MainContent(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
        )
        MainBottomBar(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .padding(8.dp)
        )
    }
}

Scaffold의 modifier에 Modifier.imePadding()을 추가했다. ime만큼의 패딩을 줌으로써 Scaffold가 ime에 의해 밀려 올라가는게 아니라, Scaffold의 높이를 줄여 ime을 위한 공간을 비워두게 만든 것이다.

 

#3-2 스크린샷

스크린샷으로보면 깔끔하지만, 문제는 애니메이션이다. 아래 동영상을 보자.

 

#3-3 동영상

뭔가 Compose Runtime과 조화를 이루지 못하고 있다. #2-2에서 본 시스템적으로 ime가 TextField를 밀고 올라가는 동작과의 충돌이 일어난 모양새다. 왜냐하면 topBar가 몇 프레임 동안은 시스템창을 뚫고 올라가기 때문이다 (패딩을 설정하는 것만으로 그런 일이 일어날 순 없다). 이 기본 동작을 컨트롤해야 문제를 해결할 수 있을 것이다.

 

#4 해결

#4-1 코드

...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)
        setContent {
            ...
        }
    }
}

window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)을 통해서, 창(Window)이 ime 호출에 움직이지 않게 만들었다. 즉 #3-3의 기본 동작을 제거한 것이다.

 

#4-2 동영상

깔끔하게 동작한다.

 

#5 구조 공부 - Window

ViewGroup 이하의 이미지 출처: https://developer.android.com/develop/ui/views/layout/declaring-layout

Window와 Activity의 1:1 관계

하나의 Activity는 하나의 Window 객체를 통해 화면을 표시한다. 하나의 Activity가 하나의 Window 객체에 1:1 매칭된다. Window는 뷰 계층 구조의 최상위 컨테이너인 DecorView를 관리한다.

 

Window는 범용적인 단위

그렇다고 Window가 Activity의 전용 개념인 것은 아니다. Window는 UI를 화면에 표시하기 위한 단위일 뿐이고, 이 Window는 다양한 컴포넌트에서 사용된다. 가령 Toast 메시지, Dialog 등도 하나의 Window를 보유한다. WindowManager를 통해서 (Toast 메시지나 Dialog 등의) Window를 화면에 추가하거나 제거해본 기억이 있을 것이다.

 

WindowInsets

WindowInsets는 이미 표시된 Window 안의 View들이 시스템 UI로부터 침범(inset)당한 영역을 알 수 있게 해주는 정보를 담은 클래스다. 상태바나 네비게이션바가 예로 들 수 있다. Inset은 명사로는 '삽도'의 의미다. '삽도'란, 큰 지도 속에 있는 작은 지도를 의미한다. 우리나라 전도 속 을릉도ㆍ독도를 떠올리면 된다. 을릉도ㆍ독도는 종이의 자리가 부족해서 삽도로 표시하는 경우가 많다.

 

링크 모음

• android.view.Window
• android.view.WindowManager
• android.view.WindowInsets

공식 문서의 링크다.

 

#6 완성된 앱 (소스 코드)

android-practice/playground/ImePadding at master · Kanmanemone/android-practice

전체 소스 코드가 필요하다면 여기서 다운로드하자.