일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- AWS
- Gradle
- livedata
- TEST
- textfield
- 코드포스
- Hilt
- Compose
- GitHub
- 프로그래머스
- relay
- Coroutines
- Python
- ProGuard
- Codeforces
- Coroutine
- android
- Rxjava
- architecture
- 코루틴
- 암호학
- 쿠링
- MiTweet
- androidStudio
- pandas
- NGINX
- 백준
- Kotlin
- boj
- MyVoca
- Today
- Total
목록Primary/Compose (30)
이동식 저장소
Compose에서 ``Brush``는 화면에 그려지는 원, 사각형, path 등이 어떻게 그려질지를 나타낸다. 단색을 표현하는 ``SolidColor``도 있지만, 주로 그라디언트를 표현하기 위해 사용한다. Brush는 ``Modifier.background()``, ``TextStyle``, ``DrawScope``에서 사용할 수 있다. 텍스트에도 brush를 적용할 수 있다는 점 기억하기! 그라디언트 Brush에 정의되어 있는 그라디언트는 다음과 같다. 모두 ``Brush.[some]Gradient(color)`` 형태로 사용할 수 있다. 이름만 보면 쉽게 이해할 수 있다. Horizontal과 vertical은 수평 및 수직 그라디언트를 나타내고, linear는 일반적인 직선 그라디언트를 나타내며,..
``LazyColumn``에서 리스트 앞에 아이템을 추가하면 스크롤 위치가 위로 올라가 버린다. 스크롤 위치를 기억하고 싶다면 아이템의 ``key``를 설정해야 한다. 공식 문서에는 다음과 같이 적혀 있다. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. 당연히 key는 유일해야 한다. 가장 쉬운 구현 방법은 아마도 ``hashCode()``일 것이다. val items..
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..
아직 Experimental feature이긴 하지만, Relay에서 Compose theme에 접근할 수 있는 방법이 있다. Figma에서 사용하는 디자인 값을 Compose의 값으로 매핑하면 된다. 구체적인 과정은 다음과 같다. Figma의 스타일 값을 json으로 변환한다. Json 스타일 값을 Compose theme 값으로 변환한다. 완료! 세팅 Theme mapping을 사용하려면 UI package를 가져올 때 하단 옵션을 활성화해야 한다. Material3, Material(2), 커스텀 테마를 지원한다. 커스텀 테마를 사용하려면 위에서 본 mapping 파일을 직접 만들어야 한다. 이 글에서는 Material 테마를 사용해 보겠다. App theme에 앱에서 사용되는 Theme 클래스의 ..
지난 글에서 만들었던 버튼을 활용하여 Relay가 내부적으로 어떻게 구현되는지 공부해 보자. UI 구성을 약간 수정했는데, 버튼을 감싸는 흰색 사각형을 없애고 버튼 자체를 root component로 만들었다. ``ui-packages`` ``ui-packages`` 폴더에는 Figma에서 가져온 UI 패키지가 저장되어 있다. 패키지 하나당 폴더 하나씩이다. ``fonts`` 폴더가 패키지 폴더의 하위 디렉토리에 있는데, 현재 시점에서는 패키지끼리 ttf 파일을 공유하지 않는다. 따라서 여러 패키지에서 동일한 폰트를 사용하더라도 동일한 폰트 파일을 여러 번 다운로드하게 된다. 향후 개선이 필요한 부분. 다른 파일은 볼 거 없고, UI 정보가 저장된 ``sample_button.json`` 파일을 보자. ..