또시기의 삽질 노트

Compose 에서는 상단 StatusBar 색상을 변경하기 위해서 3가지 정도의 방법이 있습니다.  1. accompanist 라이브러리 활용 (현재 deprecated 됨.) @Composableprivate fun setBarColors() { val systemUiController = rememberSystemUiController() val useDarkIcons = !isSystemInDarkTheme() val statusBarLight = Color.Green val statusBarDark = Color.Blue val navigationBarLight = Color.Green val navigationBarDark = Color.Blue Dispo..

기존 xml 방식의 안드로이드 개발 시 상단의 systemBar color 를 변경하기 위해서 상당히 귀찮았던 기억이 있습니다. 하지만 JetPack Compose 에서는 구글에서 accompanist 라는 라이브러리를 선보이면서 아주 쉽게 Composable 내부에서 systemBar color 를 변경할 수 있게 됐습니다. 변경전 systemBar 코드 삽입 implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.0" @Composable fun LedBillboardTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { /..

일단 문제의 소스 코드와 불필요한 Recomposition 을 방지하기 위한 방법을 보여드리겠습니다. @Composable fun ContentScreen(memoId: Int) { val memo = remember(memos) { memos.single { it.id == memoId } } Box(Modifier.fillMaxSize()) { val scroll = rememberScrollState(0) Body(scroll) Title(memo.text, scroll.value) } } @Composable private fun Title(memoText: String, scroll: Int) { val maxOffset = with(LocalDensity.current) { MaxTitleOf..

JetPack Compose에서는 NavHost를 이용하여 Composable 간 정의한 Screen 을 이동할 수 있습니다. SPA(Single Page Application) 처럼 한 화면에서 컴포넌트들의 배치를 다르게 하여 화면이 바뀌게끔 처리 할 수 있습니다. 하지만 내부 스택에 Screen 들이 쌓일 수 있으므로 그또한 제어를 하게끔 설정을 할 수 있습니다. 먼저 최상위 Composable 에서 navController 를 정의하고 내부 스코프에 NavHost 를 정의합니다. NavHost 에는 먼저 시작 Screen 을 startDestination 으로 설정합니다. NavHost 내부 스코프에서 composable(route = ) 를 생성하여 route 에는 destination 이름을 설..

Jetpack Compose 는 최상위 상태가 변하면 그에 따라 하위 View의 Ui 가 랜더링이 되고 하위 View에서 이벤트를 발생시키면 상위 상태가 변하는 단방향 흐름을 보이고 있습니다. 단방향 데이터 흐름의 장점 테스트 가능성 : 상태를 표시하는 UI와 상태를 분리하면, 둘을 분리해 쉽게 테스트 할 수 있습니다. 상태 캡슐화: 상태가 한 곳에서만 갱신될 수 있으면, 컴포저블 상태를 위한 단일 정보 진실원(SSOT, single source of truth) 가 될 수 있고, 일관되지 않는 상태 때문에 발생하는 버그를 줄일 수 있습니다. UI 일관성: StateFlow와 LiveData와 같은 관측가능한 데이터 홀더 를 사용해 UI에 상태 갱신을 즉각 반영할 수 있습니다.

부수효과란? (SideEffect) - 구성 가능한 함수의 범위 밖에서 발생하는 앱 상태에 관한 변경사항입니다. 종류 1. LaunchedEffect - 컴포저블의 범위에서 정지 함수 실행 2. rememberCoroutineScope - 컴포지션 인식 범위를 확보하여 컴포저블 외부에서 코루틴 실행 3. rememberUpdatedState - 값이 변경되는 경우 다시 시작되지 않아야 하는 효과에서 값 참조 4. DisposableEffect - 정리가 필요한 효과 5. SideEffect - Compose 상태를 비 Compose 코드에 게시 6. produceState - 비 Compose 상태를 Compose 상태로 변환 7. derivedStateOf - 하나 이상의 상태 객체를 다른 상태로 변환..

#공식문서 컴포즈는 위의 공식문서 설명에서와 같이 이벤트가 발생해서 상태가 변경 되면 다시 변경된 상태가 내려가서 뷰가 바뀌는 단방향 데이터의 흐름을 보여줍니다. 예제 코드 package com.hyosik.android.memojetpackcompose import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compo..

Column Layout 이란? 기존 xml에 익숙해져있는 분들을 위해서 표현하자면 LinearLayout 에서 orientation = vertical 한것과 유사하다고 생각하면 됩니다. Column Layout 의 내부구조를 살펴보겠습니다. 매개변수로 받는 4개의 변수에 대해 알아보겠습니다. 1. modifier : 해당 layout의 크기,모양 등을 설정하는 변수이며 사용자의 입력도 처리합니다. 2. horizontalArrangement : layout 안에서 content 들의 수평배치를 어떤식으로 할건지 설정하는 변수입니다. 3. verticalAlignment : layout 안에서 content 들의 수직배치를 어떤식으로 할지 설정하는 변수입니다. 4. content : 해당 layout ..

Row Layout 이란? 기존 xml에 익숙해져있는 분들을 위해서 표현하자면 LinearLayout 에서 orientation = horizontal 한것과 유사하다고 생각하면 됩니다. Row 의 내부구조를 살펴보겠습니다. 매개변수로 받는 4개의 변수에 대해 알아보겠습니다. 1. modifier : 해당 layout의 크기,모양 등을 설정하는 변수이며 사용자의 입력도 처리합니다. 2. horizontalArrangement : layout 안에서 content 들의 수평배치를 어떤식으로 할건지 설정하는 변수입니다. 3. verticalAlignment : layout 안에서 content 들의 수직배치를 어떤식으로 할지 설정하는 변수입니다. 4. content : 해당 layout 안에 포함되는 모든 ..