Android/Jetpack Compose (38) 썸네일형 리스트형 [Compose] Canvas로 도형 그리기와 애니메이션 기초를 알아보자 필자가 Compose로 화면을 구성하다 보면, 기본 컴포저블만으로는 표현하기 어려운 그래픽 요소가 종종 필요해진다. 커스텀 진행 표시기, 파도 모양, 회전하는 도형 같은 것들이 그 예시이다. 이런 경우에 사용할 수 있는 것이 Compose의 Canvas 컴포저블이다.이번 글에서는 Canvas를 이용한 기본 도형 그리기부터, 그라디언트, Path, 그리고 간단한 애니메이션까지 한 번에 정리해 보고자 한다.Canvas 컴포저블이란Compose의 Canvas는 DrawScope를 람다로 제공하는 컴포저블이다. 이 안에서 drawCircle, drawRect, drawPath 같은 함수를 호출하면, 해당 영역에 직접 그래픽을 그릴 수 있다.전통적인 안드로이드의 View에서 onDraw를 오버라이드하던 것과 비슷.. [Compose] TopAppBarScrollBehavior로 Fancy TopAppBar를 구현해보자 필자가 최근 Compose 관련 블로그를 확인하다가, Medium의 How to Implement a Fancy TopAppBar on Compose Multiplatform라는 글을 보게 되었다. Google Photos나 Gmail 같은 앱에서 흔히 보이는, 스크롤할 때 자연스럽게 접히거나 사라지는 TopAppBar를 Material 3에서는 어떻게 구현하는지 설명된 글이었다.이전 글(heegs.tistory.com/193)에서는 RecyclerView 스크롤 이벤트를 받아 Custom TopAppBarScrollBehavior를 직접 구현하는 방식을 다뤘는데, 이번에는 반대로 Material 3가 기본적으로 제공하는 TopAppBarScrollBehavior들을 활용해 간단하게 Collapsing .. [Compose] Quick Settings Tile로 마이크로 인터랙션 패턴을 구현해보자 필자가 최근 안드로이드 관련 기술 블로그를 보다가, Quick Settings Tile을 활용한 마이크로 인터랙션 패턴이라는 글을 발견하였다. Quick Settings Tile은 알림 패널을 내려서 볼 수 있는 Wi-Fi, Bluetooth 같은 빠른 설정 타일을 말하는데, 이 타일을 커스텀으로 만들어 앱을 열지 않고도 특정 기능을 빠르게 실행할 수 있다는 것이다.실제로 사용해보니 앱을 열어서 특정 화면까지 이동할 필요 없이, 알림 패널에서 한 번의 탭으로 기능을 실행할 수 있어서 상당히 편리했다. 이번 글에서는 Quick Settings Tile의 기본 구조부터 카운터, 토글, 타이머, 메모 입력까지 5가지 마이크로 인터랙션 패턴을 구현하는 방법을 정리해보고자 한다.Quick Settings Tile.. [Compose] 커스텀 TopAppBarScrollBehavior 구현하기 - 부분 렌더링 없는 부드러운 숨김/표시 필자가 회사에서 RecyclerView와 Compose를 혼합하여 사용하는 프로젝트를 진행하던 중, TopAppBar가 스크롤에 따라 숨겨지거나 나타나는 동작을 구현해야 하는 상황이 있었다. Compose에서 기본 제공하는 TopAppBarDefaults.enterAlwaysScrollBehavior()를 사용해봤지만, RecyclerView의 스크롤 이벤트와 연동할 때 TopAppBar가 반쯤 걸친 상태로 멈추는 부분 렌더링 문제가 발생하였다.이 문제를 해결하기 위해 TopAppBarScrollBehavior를 직접 커스텀으로 구현하는 방법을 찾게 되었고, 단계별로 개선하면서 최종적으로 부드럽고 안정적인 구현에 도달하게 되었다. 이번 글에서는 커스텀 TopAppBarScrollBehavior를 3단계에.. [Compose] Compose 1.10 retain API로 ViewModel 없이 상태를 보존하는 방법 필자가 Compose 프로젝트에서 상태 관리를 할 때, 대부분의 경우 ViewModel을 사용해왔다. 화면 회전 같은 Configuration Change에서 상태를 보존하려면 사실상 ViewModel이 유일한 선택지였기 때문이다. 그런데 Compose 1.10에서 retain API라는 것이 도입되면서, ViewModel 없이도 Configuration Change에서 상태를 보존할 수 있게 되었다는 소식을 접하게 되었다.처음에는 "ViewModel을 왜 대체해야 하지?"라는 생각이 들었지만, retain API의 구조를 살펴보니 ViewModel이 가지고 있던 불필요한 보일러플레이트를 상당 부분 줄여주는 것을 확인할 수 있었다. 이번 글에서는 retain API가 무엇인지, ViewModel과 어떤 .. [Compose] CompositionLocal의 Composition Tree 동작 원리를 시각화해보자 필자가 Compose 프로젝트를 진행하면서 CompositionLocal을 자주 사용하게 되었는데, 사용법 자체는 익숙해졌지만 내부적으로 데이터가 어떻게 전달되는지에 대해서는 막연하게만 이해하고 있었다. "Provider로 감싸면 자식이 쓸 수 있다" 정도로만 알고 있었던 것이다. 그러다 Composition Tree 관점에서 CompositionLocal의 동작을 설명하는 글을 보게 되었고, 실제로 데이터가 자식에게 복사되는 것이 아니라 룩업으로 찾는다는 사실을 알게 되었다.이번 글에서는 CompositionLocal이 Composition Tree에서 어떻게 동작하는지를 4가지 관점에서 정리해보고자 한다. 트리 구조, 룩업 메커니즘, 섀도잉, 그리고 리컴포지션 범위까지 단계별로 살펴볼 예정이다.Com.. [Android] Android의 Embedded Photo Picker를 알아보자 필자가 실무에서 사진 선택 기능을 구현하다 보면, 기존의 Photo Picker는 전체 화면으로 전환되기 때문에 사용자가 앱을 벗어나는 느낌을 줄 수밖에 없었다. 이런 부분에서 항상 아쉬움을 느끼고 있었는데, Android에서 Embedded Photo Picker라는 것을 제공하기 시작했다는 것을 알게 되었다.이번 글에서는 Embedded Photo Picker의 개념과 주요 API, 그리고 동일한 UX 패턴을 Compose로 직접 구현한 4가지 데모에 대하여 작성해보고자 한다.Embedded Photo Picker란?Embedded Photo Picker는 기존의 전체 화면 Photo Picker와 달리, 앱의 UI 안에 직접 임베드되어 사용자가 앱을 떠나지 않고도 사진과 영상을 선택할 수 있게 해주.. [Android] Compose NestedScroll 완벽 분석 - 실시간 스크롤 처리 순서 시각화 Jetpack Compose에서 복잡한 스크롤 동작을 구현할 때 NestedScrollConnection을 사용하는 경우가 많다. 하지만 필자는 이 API의 동작 순서와 각 함수를 어떻게 호출해서 활용해야하는지 정확히 이해하기는 쉽지가 않았다.따라서, 이번 글에서는 실시간으로 스크롤 처리 과정을 시각화하여 NestedScroll의 동작 원리를 완벽하게 파악할 수 있는 예제를 구현해 NestedScroll이 어떻게 동작하는지 알아보도록 하자.우선,NestedScrollConnection을 사용하는 방식은 다음과 같이 아주 간단하기 때문에 사용 방식은 넘어가도록 하겠다.Box( modifier = Modifier .fillMaxSize() .nestedScroll(nestedS.. 이전 1 2 3 4 5 다음
