목록Primary/Compose (33)

이동식 저장소

[Relay] Slot 구현하기

Compose에서 slot이란 사용자가 원하는 뷰로 채울 수 있게 비워둔 공간을 의미한다. 주로 컨테이너 역할을 하는 composable을 구현할 때 사용하는 패턴이다. 예를 들어 ``TopAppBar``에는 다음 그림처럼 빈 공간이 3개 있는데, 왼쪽부터 각각 ``navigateIcon``, ``title``, ``actions``를 위한 공간으로 할당되어 있다. @Composable fun TopAppBar( title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: (@Composable () -> Unit)? = null, actions: @Composable RowScope.() -> Unit = {}, backgr..
Primary/Compose 2022. 11. 29. 13:57
[Relay] Compose Theme에 접근하는 방법

아직 Experimental feature이긴 하지만, Relay에서 Compose theme에 접근할 수 있는 방법이 있다. Figma에서 사용하는 디자인 값을 Compose의 값으로 매핑하면 된다. 구체적인 과정은 다음과 같다. Figma의 스타일 값을 json으로 변환한다. Json 스타일 값을 Compose theme 값으로 변환한다. 완료! 세팅 Theme mapping을 사용하려면 UI package를 가져올 때 하단 옵션을 활성화해야 한다. Material3, Material(2), 커스텀 테마를 지원한다. 커스텀 테마를 사용하려면 위에서 본 mapping 파일을 직접 만들어야 한다. 이 글에서는 Material 테마를 사용해 보겠다. App theme에 앱에서 사용되는 Theme 클래스의 ..
Primary/Compose 2022. 11. 28. 17:14
[Relay] Under the hood

지난 글에서 만들었던 버튼을 활용하여 Relay가 내부적으로 어떻게 구현되는지 공부해 보자. UI 구성을 약간 수정했는데, 버튼을 감싸는 흰색 사각형을 없애고 버튼 자체를 root component로 만들었다. ``ui-packages`` ``ui-packages`` 폴더에는 Figma에서 가져온 UI 패키지가 저장되어 있다. 패키지 하나당 폴더 하나씩이다. ``fonts`` 폴더가 패키지 폴더의 하위 디렉토리에 있는데, 현재 시점에서는 패키지끼리 ttf 파일을 공유하지 않는다. 따라서 여러 패키지에서 동일한 폰트를 사용하더라도 동일한 폰트 파일을 여러 번 다운로드하게 된다. 향후 개선이 필요한 부분. 다른 파일은 볼 거 없고, UI 정보가 저장된 ``sample_button.json`` 파일을 보자. ..
Primary/Compose 2022. 11. 27. 22:16
[Relay] 설치 및 체험

Android Dev Summit 2022에서 Figma 컴포넌트를 Compose로 변경할 수 있는 Relay가 공개되었다. ADS 22가 Relay를 위한 행사라는 생각이 들 정도로 충격적이었다. 디자인과 코드 작업을 합칠 수 있다니? Figma 컴포넌트를 Compose로 변환????? 엄청난 게 왔다... 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 ..
Primary/Compose 2022. 11. 26. 18:14
[Compose] padding과 contentPadding의 차이

``LazyList`` 계열 composable인 ``LazyColumn``과 ``LazyRow``에는 ``contentPadding``이라는 매개변수가 있다. 일반적인 ``Modifier.padding()``과 어떻게 다른지 알아보자. @Composable @ComposableTarget public fun LazyColumn( modifier: Modifier, state: LazyListState, contentPadding: PaddingValues, reverseLayout: Boolean, verticalArrangement: Arrangement.Vertical, horizontalAlignment: Alignment.Horizontal, flingBehavior: FlingBehavior,..
Primary/Compose 2022. 11. 12. 13:08
이전 Prev 1 2 3 4 5 6 7 Next 다음