티스토리

이동식 저장소

검색하기

블로그 홈

이동식 저장소

thinking-face.tistory.com/m

https://github.com/mwy3055

구독자: 20

방명록 방문하기

주요 글 목록

derivedStateOf의 진짜 의미 Compose API 중 ``derivedStateOf``라는 API가 있다. 이름만 보면 state로부터 다른 state를 만드는 함수인 것처럼 보인다. 왜냐면 공식 문서에도 그렇게 적혀있기 때문이다.derivedStateOf: convert one or multiple state objects into another state실제 의미그러나 실제로는 output을 줄이는 최적화 API에 가깝다. Android developers 아티클의 예시를 통해 이해해 보자. 다음과 같은 로그인 UI가 있다. 서비스 정책적으로 username은 알파벳으로만 이루어질 수 있다고 하자. ``username``을 입력할 때 ``submitEnabled``의 변화는 다음과 같다.여기까진 문제가 없다. 그런데 ``user.. 공감수 0 댓글수 0 2024. 7. 16.
viewModel()과 hiltViewModel()의 차이 문제 파악Navigation 2.8.0-alpha08 버전부터 Compose navigation에 type-safe 기능이 추가되었다. 내비게이션 경로를 문자열이 아닌 클래스 타입으로 지정할 수 있는 것.// beforecomposable("CampusMap") { CampusMapScreen()}// aftercomposable { CampusMapScreen()}쿠링도 single activity + navigation로 전환할 예정인 만큼, 메인 화면에 type-safe navigation을 시험삼아 적용해 보았다(이건 별도로 작성 예정). 그런데 type-safe를 적용한 2.0.2 버전에서 앱이 강제 종료되는 심각한 에러가 발생했다.에러 분석일단 에러 메시지를 보자.Fatal Exce.. 공감수 2 댓글수 0 2024. 6. 21.
Compose에서 view 사용하기 Compose는 기존 view 시스템과의 상호 운용을 위해 ``AndroidView`` composable을 제공한다. Compose 네이티브 컴포넌트가 없는 WebView 등을 사용할 때 활용할 수 있다. 내부적으로는 composition 트리 안에 view 노드를 직접 만드는 방식으로 구현되어 있다. 오버로딩 1@Composable@UiComposablefun AndroidView( factory: (Context) -> T, modifier: Modifier = Modifier, update: (T) -> Unit = NoOpUpdate)``factory``는 view를 만드는 람다이다. ``factory`` 블럭은 composition 단계에서 view를 만들기 위해 단 한 .. 공감수 1 댓글수 0 2024. 5. 28.
Compose 성능을 개선하기 위한 Best Practices Compose UI의 성능을 최적화하기 위한 몇 가지 best practice를 알아보자.복잡한 계산은 remember하기Composable은 대단히 자주 실행될 수 있다. 극단적으로는 애니메이션의 매 프레임마다 실행될 수 있다. 따라서 composable 내부에서는 되도록 복잡한 계산을 하지 않는 것이 좋다. 부득이하게 복잡한 계산을 해야 한다면, ``remember``를 활용하여 계산 결과를 오랫동안 기억해야 한다. ``remember``를 사용하면 같은 값에 대해 계산을 두 번 이상 수행하지 않는다. 예를 들어, 다음과 같이 ``LazyColumn`` 내부에서 리스트를 정렬하면 안 된다.@Composablefun ContactList( contacts: List, comparator: .. 공감수 1 댓글수 0 2024. 5. 13.
Compose Strong Skip 기존에는 composable의 모든 매개변수가 ``@Stable``이어야만 skippable이었다. 그러나 이제는 unstable한 매개변수를 갖는 composable도 skippable이 될 수 있다. Compose의 성능을 대폭 개선시킬 strong skip에 대해 알아보자.Strong skip 규칙이제 모든 restartable composable은 skippable이 될 수 있다. 구체적으로는, 각 매개변수를 다음과 같이 비교한다.Unstable 매개변수는 object equality 연산자인 ``===``로 비교한 결과가 ``true``일 때 (새로 추가된 규칙)Stable 매개변수는 ``Object.equals()``로 비교한 결과가 ``true``일 때 (기존과 같음)모든 매개변수의 비교 .. 공감수 0 댓글수 0 2024. 5. 5.
Modifier로 블러 효과 구현하기 Compose에서 블러 효과를 그리는 방법은 여러 가지 있지만, 이 글에서는 ``Modifier.drawBehind``를 사용하는 방법을 소개한다. ``Modifier.drawBehind { ... }``를 사용하면 Composable의 뒤에 무언가를 그릴 수 있다. 람다 내부에서는 ``DrawScope``를 통해 Compose Canvas에 접근할 수 있다.디자인 확인쿠링에서는 CTA 버튼 위에 블러를 보여주는 경우가 있다. 주로 리스트의 내용을 자연스럽게 보여줄 때 적용한다.구현Composable 위에 하얀색과 투명으로 이루어진 사각형을 그리면 된다. 사각형의 높이는 임의로 줄 수 있으나, 여기서는 Composable 높이의 30%로 지정했다. 사각형의 너비는 물론 Composable의 너비와 같다... 공감수 2 댓글수 0 2024. 5. 1.
Compose TextField를 커스터마이징해 보자 Compose에는 여러 타입의 Material ``TextField``가 선언되어 있다.하지만 머티리얼 디자인과는 다른 커스텀 ``TextField``가 필요하다면? ``BasicTextField``를 커스터마이즈하면 된다.BasicTextField``BasicTextField``는 모든 머티리얼 ``TextField``의 backbone 컴포넌트이다. 실제로 ``OutlinedTextField`` 등의 코드를 보면, 내부적으로 ``BasicTextField``를 호출하고 있다.@Composablefun OutlinedTextField( // ...) { // ... BasicTextField( // ... decorationBox = @Composable { innerTextF.. 공감수 0 댓글수 0 2024. 4. 30.
Icon vs. Image (내가) 자주 실수하는 ``Icon``과 ``Image``! 어떻게 다른지 비교해 보자. Icon 주로 단색 아이콘을 보여줄 때 사용한다. Material 아이콘 또는 벡터 drawable 등을 사용할 수 있으며, 아이콘에 적절한 색깔을 tint로 입혀 사용한다. 색깔을 입히고 싶지 않다면 ``Color.Unspecified``를 사용하면 된다. @Composable fun Icon( painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current) ) ``contentDescription`.. 공감수 0 댓글수 0 2024. 4. 7.
Compose에서 시스템 폰트 크기 확인하기 ``Density`` 객체에는 ``Float`` 타입의 ``fontScale`` 프로퍼티가 선언되어 있다. 공식 문서에서는 다음과 같이 설명하고 있다. The logical density of the display. This is a scaling factor for the Dp unit. 시스템 설정의 ``글자 크기`` 항목이 바로 이 fontScale을 설정하는 것이다. UI에서 설정한 ``sp`` 값에 fontScale을 곱하면 실제로 UI에 보일 글씨 크기를 얻을 수 있다. 기본값은 1.0이고, 최댓값은 2.0이다. 블린더 앱에서는 ``fontScale``의 값에 따라 서로 다른 UI를 보여주었다. fontScale이 일정 값 이상이라면 기본 UI 대신 저시력 UI를 보여준다. 저시력 UI는 예쁜.. 공감수 0 댓글수 0 2024. 3. 24.
TextField에 default string을 줘도 커서가 맨 앞으로 가는 이유 문제 초기 문자열이 있는 ``TextField``를 다음과 같이 선언하였다. @LightPreview @Composable private fun TextFieldPreview() { var textFieldValue by remember { mutableStateOf("검색하세요") } KuringTheme { TextField( value = textFieldValue, onValueChange = { textFieldValue = it } ) } } 프리뷰를 실행해 보면, 처음부터 문자열이 있음에도 불구하고(``검색하세요``) 커서가 맨 앞에 있는 모습을 확인할 수 있다. 실제로는 문자열의 맨 끝에 와야 자연스럽다. 원인 원인을 파악하기 위해 ``TextField``의 내부 구현을 뜯어보자. 우선, .. 공감수 1 댓글수 0 2024. 2. 28.
Compose에서 Icon의 크기를 IconButton만큼 키우고 싶다면? ``Modifier.minimumInteractiveComponentSize()``를 적용하면 된다. 이 modifier는 composable의 최소 크기를 각 기기의 'clickable 요소의 최소 크기'로 지정한다. 보통 48dp×48dp이지만, 기기에 따라 다를 수도 있다. (태블릿 등?) Before & After ``Icon``에 적용해 보자. Icon( imageVector = Icons.Default.ChevronRight, contentDescription = null, tint = contentColorFor(backgroundColor = MaterialTheme.colorScheme.surface), modifier = Modifier.minimumInteractiveComponent.. 공감수 0 댓글수 0 2024. 2. 6.
ViewModel에 너무 많은 책임을 지우지 말 것 여기 간단한 ``TabRow``가 하나 있다. 그런데 하단 탭 영역을 스와이프하여 넘기면 선택된 탭의 텍스트 색이 바뀌지 않고, 와중에 tab indicator만 움직인다. 원인 일단 전체 코드를 보자. @OptIn(ExperimentalFoundationApi::class) @Composable private fun SubscriptionTabs( selectedTab: EditSubscriptionTab, onTabClick: (EditSubscriptionTab) -> Unit, categories: List, departments: List, onCategoryClick: (Int) -> Unit, onDepartmentClick: (String) -> Unit, onAddDepartmentBut.. 공감수 2 댓글수 0 2024. 2. 4.
Composable 매개변수 줄이기 - 오버로딩 활용 Compose로 복잡한 UI를 개발하다 보면, 함수의 매개변수가 너무 많아지는 문제가 발생한다. 특히 Activity에서 호출하는 최상위 Composable은 매개변수가 많아질 수밖에 없다. // EditSubscriptionActivity.kt binding.composeView.setContent { val uiState by viewModel.uiState.collectAsState() KuringTheme { Subscriptions( selectedTab = uiState.selectedTab, categories = uiState.categories, departments = uiState.departments, onTabClick = viewModel::onTabClick, onCategor.. 공감수 0 댓글수 3 2024. 1. 10.
Accompanist Compose Navigation 라이브러리 deprecated - migration 가이드 아래 글에 나와있는 내용대로 하면 99%는 해결된다. Guide - Accompanist Jetpack Navigation Compose Animation A library which provides Compose Animation support for Jetpack Navigation Compose. Warning This library is deprecated, with official navigation-compose support in androidx.navigation.compose. The original documentation google.github.io 그러나 ``AnimatedContentScope``를 migrate하는 방법은 글에 나와있지 않은데, ``AnimatedContentT.. 공감수 0 댓글수 0 2024. 1. 1.
TalkBack이 Compose TextField를 인식하지 못하는 문제 Compose Material 컴포넌트 중 ``TextField`` 종류가 TalkBack의 포커스를 받지 못하는 경우가 있다. 마치 해당 컴포넌트가 없는 것처럼 그냥 지나쳐 버린다. 원인 은 솔직히 잘 모르겠다. 그런데 ``TextField``에 label을 추가해 주면 정상 작동한다. OutlinedTextField( label = { TitleSmall(text = stringResource(R.string.school_text_field_label)) }, // ... ) 접근성 차원에서라도 라벨을 꼬박꼬박 붙여주는 걸로..? 공감수 1 댓글수 1 2023. 10. 2.
Compose에서 이미지가 흑백으로 보일 때 ``tint = Color.Unspecifed``를 설정하자. 하... Icon( painter = painterResource(...), contentDescription = null, tint = Color.Unspecified, ) 공감수 0 댓글수 0 2023. 6. 10.
모든 터치 이벤트의 시작과 끝을 판별하는 방법 Compose로 혼자 뚝딱뚝딱 하던 도중 composable이 어떠한 방식으로든 터치되고 있는지 확인해야 하는 경우가 생겼다. 어떤 방식으로든 focus를 받고 있을 때 아이콘을 보여주고 싶었기 때문이다. 이 기능을 구현하려면 일단 Compose에서의 터치 이벤트를 공부해야 한다. 일단 터치 이벤트가 발생했는지 판단하는 ``isFocused`` 변수를 선언하자. 이 값이 true이면 터치 이벤트가 발생한 것이므로 아이콘을 보여줘야 한다. @Composable fun RotatingIndicatorGradient() { var isFocused by rememberSaveable { mutableStateOf(false) } RotatingGradient { AnimatedVisibility( visibl.. 공감수 0 댓글수 0 2023. 1. 14.
Preview 모드인지 확인하는 방법 CompositionLocal 값 중 ``LocalInspectionMode``를 참조하면 된다. True if the composition is composed inside a Inspectable component. 사용 예시는 다음과 같다. val isPreview = LocalInspectionMode.current Box { if (isPreview) { // 이 구문은 Preview에서만 실행됨 } // 이 구문은 항상 실행됨 } 참고자료 androidx.compose.ui.platform | Android Developers androidx.car.app.managers developer.android.com 공감수 0 댓글수 0 2023. 1. 6.
Brush로 다양한 색깔 효과 입히기 Compose에서 ``Brush``는 화면에 그려지는 원, 사각형, path 등이 어떻게 그려질지를 나타낸다. 단색을 표현하는 ``SolidColor``도 있지만, 주로 그라디언트를 표현하기 위해 사용한다. Brush는 ``Modifier.background()``, ``TextStyle``, ``DrawScope``에서 사용할 수 있다. 텍스트에도 brush를 적용할 수 있다는 점 기억하기! 그라디언트 Brush에 정의되어 있는 그라디언트는 다음과 같다. 모두 ``Brush.[some]Gradient(color)`` 형태로 사용할 수 있다. 이름만 보면 쉽게 이해할 수 있다. Horizontal과 vertical은 수평 및 수직 그라디언트를 나타내고, linear는 일반적인 직선 그라디언트를 나타내며,.. 공감수 0 댓글수 0 2023. 1. 4.
[Compose] LazyList에서 아이템을 추가했을 때 스크롤 위치를 기억하는 방법 ``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.. 공감수 0 댓글수 0 2022. 12. 14.
[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.. 공감수 0 댓글수 0 2022. 11. 29.
[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 클래스의 .. 공감수 0 댓글수 0 2022. 11. 28.
[Relay] Under the hood 지난 글에서 만들었던 버튼을 활용하여 Relay가 내부적으로 어떻게 구현되는지 공부해 보자. UI 구성을 약간 수정했는데, 버튼을 감싸는 흰색 사각형을 없애고 버튼 자체를 root component로 만들었다. ``ui-packages`` ``ui-packages`` 폴더에는 Figma에서 가져온 UI 패키지가 저장되어 있다. 패키지 하나당 폴더 하나씩이다. ``fonts`` 폴더가 패키지 폴더의 하위 디렉토리에 있는데, 현재 시점에서는 패키지끼리 ttf 파일을 공유하지 않는다. 따라서 여러 패키지에서 동일한 폰트를 사용하더라도 동일한 폰트 파일을 여러 번 다운로드하게 된다. 향후 개선이 필요한 부분. 다른 파일은 볼 거 없고, UI 정보가 저장된 ``sample_button.json`` 파일을 보자. .. 공감수 0 댓글수 0 2022. 11. 27.
[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 .. 공감수 0 댓글수 0 2022. 11. 26.
[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,.. 공감수 0 댓글수 1 2022. 11. 12.
[Compose] TextField의 state를 관리하는 방법 다음 글을 읽고 정리하였습니다. 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.. 공감수 0 댓글수 0 2022. 11. 9.
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 컴포넌트를 Compose로 변환해주는 플러그인이 등장했다. 이름은 Relay. 잠깐 써봤는데 나름 잘 변환된다. 아직 alpha라 그런지 폴더가 안 보이는 현상? 자잘한 버그? 가 종종 발생하긴 하지만, 개념 자체는 매우 파괴적이다. 개별 composable까지 자동으로 생성할 수 있단 말.. 공감수 0 댓글수 0 2022. 10. 26.
[Compose] 반응형 앱 구현 실전 한빛 캘린더에 반응형 UI를 적용해 보자. Before 처음 UI를 구현할 때 가로로 긴 화면을 전혀 고려하지 않았다. 덕분에 태블릿에서는 가로로 길게 늘어난 화면이 보이게 되었다. 아무리 봐도 달력과 내용을 가로로 배치하는 게 좋아 보인다. 바로 구현해 보자. 구현할 것 Navigation Bar는 구현하지 않는다. 애초에 화면 하나짜리 앱이라 Navigation은 없다. Compact 화면에서는 기존 UI를 그대로 보여준다. Medium 화면에서는 Compact와 같은 화면을 보여주되, 식단을 세 개의 행으로 배치하자. Compact에서는 두 행으로 배치했다. Expanded 화면에서는 달력과 상세 내용을 가로로 배치하고, 식단을 세 개의 행으로 배치하자. 라이브러리 추가 ``WindowSizeCla.. 공감수 2 댓글수 4 2022. 10. 20.
[Compose] Movable Content 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.. 공감수 0 댓글수 0 2022. 8. 13.
Compose가 UI를 그리는 과정 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.. 공감수 0 댓글수 0 2022. 8. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.