이동식 저장소

다음 글을 읽고 정리하였습니다. Effective state management for TextField in Compose TL;DR — The Compose roadmap reflects the work that the team is doing on multiple fronts, in this case Text Editing Improvements and… medium.com 텍스트를 동기적으로 갱신해야 한다 ``TextField``는 내부적으로 state를 3곳에 저장한다. Keyboard: 맞춤법 검사나 다음 단어 추천 등의 로직을 수행하기 위해 state를 저장한다. State holder: 사용자가 정의한 state이다. ``mutableStateOf("state")`` 등이 해당된다. Int..

엄청난 게 왔다... Relay Instant Handoff for Android UI. Design UI components in Figma and use them directly in Jetpack Compose projects. relay.material.io Design UI components in Figma and use them directly in Jetpack Compose projects. Figma 컴포넌트를 Compose로 변환해주는 플러그인이 등장했다. 이름은 Relay. 잠깐 써봤는데 나름 잘 변환된다. 아직 alpha라 그런지 폴더가 안 보이는 현상? 자잘한 버그? 가 종종 발생하긴 하지만, 개념 자체는 매우 파괴적이다. 개별 composable까지 자동으로 생성할 수 있단 말..

한빛 캘린더에 반응형 UI를 적용해 보자. Before 처음 UI를 구현할 때 가로로 긴 화면을 전혀 고려하지 않았다. 덕분에 태블릿에서는 가로로 길게 늘어난 화면이 보이게 되었다. 아무리 봐도 달력과 내용을 가로로 배치하는 게 좋아 보인다. 바로 구현해 보자. 구현할 것 Navigation Bar는 구현하지 않는다. 애초에 화면 하나짜리 앱이라 Navigation은 없다. Compact 화면에서는 기존 UI를 그대로 보여준다. Medium 화면에서는 Compact와 같은 화면을 보여주되, 식단을 세 개의 행으로 배치하자. Compact에서는 두 행으로 배치했다. Expanded 화면에서는 달력과 상세 내용을 가로로 배치하고, 식단을 세 개의 행으로 배치하자. 라이브러리 추가 ``WindowSizeCla..

Composition 단계에서 UI 트리의 내용을 옮길 수 있다면 많은 이득을 얻을 수 있다. Recomposition 과정 속에서 composable을 다시 만들지 않고 그대로 옮김으로써 내부 상태를 보존할 수 있기 때문이다. 다음 코드를 보자. @Composable fun MyApplication() { if (Mode.current == Mode.Landscape) { Row { Tile1() Tile2() } } else { Column { Tile1() Tile2() } } } ``Mode``의 값이 바뀌면 ``Tile1()``과 ``Tile2()`` 내부의 모든 값이 초기화된다. 하지만 tile 두 개를 하나의 composition 묶음으로 생각하면 어떨까? @Composable fun MyA..

Compose는 여러 단계를 거쳐 UI를 그린다. Android View 시스템에서는 measure, layout, drawing 세 단계를 거쳐 UI를 그린다. Compose도 비슷한 방법으로 UI를 그리지만, 맨 앞에 composition이라는 아주 중요한 과정이 추가된다. UI를 그리는 3단계 (UI phases) Composition: UI가 무엇을 그릴지 결정한다. Compose는 이 단계에서 composable 함수를 실행하여 UI 트리를 만든다. Layout: UI 요소들의 크기와 위치를 결정한다. 크기를 결정하는 과정은 measurement, 위치를 결정하는 과정은 placement라고 한다. UI 트리의 노드(=composable)들은 자신과 자식 노드의 크기와 좌표를 결정한다. Draw..