Jetpack Compose + WindowInsets = 🤩 🥳

Jetpack Compose 에서 WindowInsets 사용하기

Photo by Oleg Laptev on Unsplash

올해 초에 키보드에 애니메이션을 적용하는 것으로 WindowInsets 에 대해 다룬적이 있습니다.

안드로이드 WindowInsets으로 키보드 애니메이션 구현하기 (1)

XML 에서 WindowInsets 을 사용하기 위해선 다 콜백으로 구현해야 했습니다. 하지만 Jetpack Compose 를 이용하면 대부분의 WindowInsets 들을 다 Modifier 로 사용할 수 있어서 아주 쉽게 WindowInsets 을 사용할 수 있습니다. 이 글에서는 Jetpack Compose 에서 WindowInsets 사용에 대해 다뤄 보겠습니다.

WindowInsets 의 개념에 대해선 다루지 않습니다. WindowInsets 이 처음이신 분은 올해 초에 올라온 게시글을 먼저 참고해 주세요.

먼저 DecorFitsSystemWindows 을 false 로 Insets 을 사용할 준비를 해주겠습니다.

IME Insets 을 사용하기 위해선 액티비티를 adjustResize 로 해야 하고, 위 영상속 액티비티는 adjustResize 로 설정돼 있습니다.

예상되로 WindowInsets 이 적용되지 않았기에 네비게이션바에 버튼이 가려지고, 키보드가 올라갔을 때 키보드에 컴포넌트들이 가려지게 됩니다.

상태바와 네비게이션바 만큼 패딩을 적용해 보겠습니다.

XML 에 비해 매우 간단하게 Modifier.windowInsetsPadding 을 이용해 가능합니다. Jetpack Compose 에서 WindowInsets 은 Insets 이 한 번 사용되면 추후 중복 적용을 방치하기 위해 자동으로 해당 Insets 이 consume 됩니다. 따라서 사용하지 않을 Insets 들은 제외시켜서 사용할 Insets 만 consume 시키는게 권장됩니다. 이를 위해 systemBars Insets 를 가져오고, only 확장 함수를 이용하여 상태바와 네비게이션바가 존재하는 Vertical 부분만 사용하겠다고 정의하였습니다. 이 결과로 아래 영상처럼 컴포넌트들이 네비게이션바 크기만큼 패딩되서 다 보이게 됩니다.

하지만 여전히 키보드가 올라오면 키보드에 의해 컴포넌트들이 다 가려집니다. 이를 해결하기 위해 IME Insets 패딩을 적용해 주겠습니다. 이번에도 아주 간단하게 Modifier.imePadding() 을 이용해 가능합니다.

키보드 애니메이션이 적용된 걸 확인할 수 있습니다. XML 에 비해 아주 쉬워졌습니다. (이런 편리함을 저만 누릴 순 없어서 이 글을 작성하게 됐습니다.)

Insets 을 바로 패딩으로 적용시키는게 아닌 사이즈만 단독으로 얻어올 수도 있습니다.

Insets 값은 픽셀(Int) 값으로 받아올 수 있습니다. 하지만 컴포즈에서는 Dp 단위를 자주 사용함으로 저는 toDp() 를 통해 Dp 로 변경해서 사용하고 있습니다.

여기까지가 주로 사용되는 WindowInsets 들 입니다. 이 밖에도 시스템 제스처를 비활성화 하는 Modifier.systemGestureExclusion() 와 같이 훨씬 많은 WindowInsets 들이 구현돼 있습니다. 자세한 내용은 공식 문서를 확인해 주세요.

한 가지 아쉬운 점은 모든 WindowInsets 들이 Jetpack Compose 로 제공되진 않습니다. 현재 이 글을 작성하는 시점 기준으로 isVisible, animationInProgress, animationFraction, layoutInsets/animatedInsets 이렇게 4가지의 Insets 은 제공되지 않습니다. [관련 이슈: 217770337]

끝!

원래 이 기능은 accompanist 를 통해 제공되고 있었지만, 컴포즈의 foundation 에 WindowInsets 제공이 추가되면서 기존 accompanist 는 deprecated 되었습니다. Jetpack Compose 는 여러모로 정말 편리한거 같습니다.

성빈랜드 안드로이드 놀이터

안드로이드 개발자 분들을 위한 카카오톡 오픈 채팅방을 운영하고 있습니다.