Compose NestedScrollConnection으로 딜허브 UI를 구현하는 방법!
by DD
7개월 전
조회수 19
Android Compose 환경에서 NestedScrollConnection을 커스텀하여 딜허브 화면의 독특한 탭 인터랙션을 구현함
HorizontalPager와 Collapsing Tab을 결합하여 탭의 Icon 영역만 접히는 UI를 구현하고, onPreScroll과 onPostFling을 활용함
LazyColumn과 stickyHeader를 사용하여 캘린더 노출/미노출 인터랙션을 구현하고, NestedScrollConnection의 enable 상태를 제어함
NestedScrollConnection을 이용한 Collapsing Tab 구현
NestedScrollConnection을 커스터마이징하여 onPreScroll에서 스크롤 방향에 따라 offset을 조절한다. 구체적으로, HorizontalPager의 스크롤 이벤트 발생 전에 offset을 변경하여 Tab의 Icon 영역을 접거나 펼치는 효과를 낸다. 따라서, Collapsing Tab과 HorizontalPager 간의 유기적인 인터랙션을 구현한다.
onPreScroll과 onPostFling을 활용한 인터랙션 제어
onPreScroll을 통해 자식 스크롤 전에 offset을 변경하여 Collapsing 처리를 수행한다. onPostFling에서는 플링 후 스냅 애니메이션을 적용하여 자연스러운 UI를 제공한다. 반면, 스냅 애니메이션 부재 시, 스크롤 중단 시 어색한 UI가 발생할 수 있다. 따라서, 플링 감속 애니메이션을 사용하여 부드러운 전환을 구현한다.
LazyColumn과 stickyHeader를 이용한 캘린더 인터랙션
LazyColumn 내 stickyHeader를 활용하여 캘린더를 구현하고, NestedScrollConnection의 enable 상태를 제어한다. 구체적으로, isSticky 상태에 따라 offset 변경 여부를 결정하여 캘린더의 노출/미노출을 구현한다. 결과적으로, 스크롤 방향에 따라 캘린더가 나타나거나 사라지는 인터랙션을 구현한다.
