안드로이드 WindowInsets으로 키보드 애니메이션 구현하기 (1)
#1 — WindowInsets 개념 익히기
우리는 안드로이드 앱을 만들면서 EditText를 필수적으로 UI에 사용합니다. 하지만 필자의 경우 매번 애니메이션 없이 키보드 처리를 하다 보니, 항상 아쉬운 부분이 있었습니다. 또한 adjust~ 옵션으로 키보드에 따른 뷰 높이 처리를 해주어도 매끄럽지 않게 딱딱하게 작동되는 부분이 마음이 들지 않았습니다. 이러면 불편함이 점점 쌓여가던 중에, 안드로이드 11 개발자 프리뷰 2에서 IME 동기화 애니메이션에 대해 공개되었습니다. (2020년 3월 18일)
공개된지 현재 2년 가까이 됐지만, 관련 주제로 구글에 검색해 보았을 때
아직 한국에는 올라온 글이 없는거 같아 작성하게 됐습니다. 첫 번째로 보이는 자연스러운 키보드 변경 처리하기 라는 글은 ObjectAnimator 로 뷰 사이즈를 조절하는 것이며, 이 글에서 다룰 애니메이션과는 다른 주제 입니다.
우리는 이 글의 제목에서도 알 수 있드시 WindowInsets을 사용할 것입니다. WindowInsets는 API 20에 추가됐지만 처음 들어보는 분들도 있을 것입니다. 저 또한 그랬으므로 WindowInsets에 대해서 먼저 설명하겠습니다.
WindowInsets
WindowInsets를 공식문서는 다음과 같이 설명하고 있습니다.
Describes a set of insets for window content.
window 컨텐츠에 대한 insets집합을 설명합니다.
Insets
새로운 키워드인 Insets가 나왔습니다. 공식문서에서는 Insets를 다음과 같이 설명하고 있습니다.
An Insets instance holds four integer offsets which describe changes to the four edges of a Rectangle. By convention, positive values move edges towards the centre of the rectangle.
Insets 인스턴스는 Rectangle의 네 모서리에 대한 변경 사항을 설명하는 네 개의 정수 오프셋을 보유합니다. 규칙에 따라 양수 값은 모서리를 사각형의 중심으로 이동합니다.
즉, Insets는 Rectangle의 네 모서리의 크기를 갖고 있는 객체이며, 우리가 사용할 WindowInsets에는 다음과 같은 총 4가지의 Insets가 포함돼 있습니다.
- System window insets
- Tappable element insets
- Gesture insets
- Stable insets
이 중에서 우리는 System window insets를 사용하여 멋진 애니메이션을 구현할 것입니다. 말로만 봐서는 이 Insets가 무엇을 하는 얘인지 이해가 잘 되지 않습니다. 아래 그림을 봅시다.
AVD 를 처음 실행했을때 나오는 화면 입니다. 이 화면에서 모든 모서리를 영역으로 나타내 보면 위와 같이 총 4가지 영역이 나오게 됩니다. 이 영역에서 System window insets를 구하게 된다면, 안드로이드 시스템의 윈도우 부분인 상태바와 네비게이션 바의 높이가 다음과 같이 Insets에 담겨서 나오게 됩니다.
Insets{left=0, top=66, right=0, bottom=132}이러한 방법으로 키보드의 높이 또한 구할 수 있습니다. 우리는 키보드의 높이를 얻어서 키보드 위에 있는 뷰의 위치를 움직이며 자연스럽게 애니메이션 처리를 해주기 위해 WindowInsets를 사용하게 됩니다.
WindowInsetsAnimationCallback
그렇다면 애니메이션 처리는 어떻게 해줄까요? WindowInsets는 위에서 다룬 Insets를 구하는것 의외에도 Insets의 변화를 애니메이션(한 틱 단위로)으로 감지할 수 있는 콜백을 제공합니다. 이런 콜백을 제공해 주는 WindowInsetsAnimationCallback을 공식문서에서는 다음과 같이 설명하고 있습니다.
Interface that allows the application to listen to animation events for windows that cause insets.
어플리케이션이 insets을 유발하는 window에 대한 애니메이션 이벤트를 수신할 수 있도록 하는 인터페이스입니다.
지금까지 WindowInsets에 대해 알아보았습니다. 글이 너무 길어지면 지루하므로 글을 2편으로 나눠서 쓰게 되었습니다. 2편에서는 키보드 애니메이션을 구현해 보도록 하겠습니다. 감사합니다.
2편이 작성되었습니다. 2편 바로가기:
모바일(Android/iOS) 개발자 분들을 위한 카카오톡 오픈 채팅방을 운영하고 있습니다.
