Today's

길을 나서지 않으면 그 길에서 만날 수 있는 사람을 만날 수 없다

모바일 앱(안드로이드)

제트팩 구성에서 스크롤 효과가 있는 무너지는 앱바 생성 ... 퍼옴

Billcorea 2025. 4. 18. 15:27
반응형

제트팩 구성에서 스크롤 효과가 있는 무너지는 앱바 생성

앱 개발 해 보기 (feat ChatGPT)


• 이 기사는 사용자 스크롤링에 동적으로 응답하는 현대 모바일 앱의 인기 있는 UI 요소인 제트팩 컴포즈에서 접히는 앱바의 구현을 자세히 설명합니다.

• 설계에는 두 개의 TopAppBar가 포함됩니다. 하나는 접힌 상태(필수 정보만 표시)를 위한 것이고 다른 하나는 확장된 상태(헤더 및 자세한 내용 표시)를 위한 것입니다.

• 스캐폴드는 메인 화면 컨테이너로 사용되어 스낵바 및 플로팅 액션 버튼과 같은 다른 UI 구성 요소를 쉽게 통합할 수 있습니다.

• 확장된 AppBar의 높이는 사용자 정의 가능하며(이 예에서 180.dp), 'windowInsets = WindowInsets(0)'는 상태 표시줄에서 추가 패딩을 제거합니다.

• ‘LazyVerticalGrid’는 사진 아이템을 표시하고, ‘TopAppBarDefaults.exitUntilCollapsedScrollBehavior()’는 스크롤을 기반으로 부드러운 붕괴와 확장을 보장합니다.

• 애니메이션(fadeIn 및 fadeOut)은 AppBar의 붕괴 및 확장 중 시각적 경험을 향상시키기 위해 ‘AnimatedVisibility’를 사용하여 구현됩니다.

• 마지막으로, 스크롤링 콘텐츠 헤더에 드래그 제스처 검출기가 추가되어 사용자가 접히고 확장되는 동작을 수동으로 제어할 수 있게 되어 보다 상호작용적이고 직관적인 사용자 경험을 만들 수 있다.

https://medium.com/@danimahardhika/collapsing-appbar-with-scroll-effect-in-jetpack-compose-04f5b82f386b

 

Collapsing AppBar with Scroll Effect in Jetpack Compose

Learn how to create a modern profile screen with a smooth collapsing AppBar and scroll interaction using Jetpack Compose

medium.com

 

반응형