Kong-droid

[Compose] 안정성 stability

안정성에 관해서도 가장 중요한 키워드는 Smart Recomposition 같아요  Smart Recomposition- composition 함수에서 사용되는 데이터가 변경된 데이터의 함수만 재호출 즉 일부분의 ui만 업데이트 - 성능 최적화  이 때 compose는 필요한 recomposition임을 어떻게 구분할까 ?  -> paramater로 구분 크게 3가지로 나눠본다면  Stable parameters - 변경 시 컴포지션에서 추적이 가능하기 때문에 smart recomposition이 가능 - 즉, 변경 사항이 없다면 compose는 skip Unstable parameters - 변경 시 컴포지션에서 추적이 불가 -> 데이터의 변경 사항의 유무와 관계 없이 무조건 Recomposition-..

⭐️ Smart Recomposition- composition 함수에서 사용되는 데이터가 변경된 데이터의 함수만 재호출 즉 일부분의 ui만 업데이트 - 성능 최적화   Compose의 Lifecycle - composition : 컴포저블 함수가 호출되어 UI 트리를 구성하는 과정으로 여러 개의 컴포저블이 결합되어 최종 UI 생성, 즉 초기 UI를 설정하는 단계- recomposition : 상태가 변경되어 UI가 다시 그려지는 과정, 상태 변화를 감지하고 영향을 받는 부분만 업데이트 (최적화 하는 것이 제일 중요)- disposal : composable이 소멸, 리소스 해제  recomposition의 최적화를 위해서 생명주기를 아는 것이 중요합니다 만약 아래와 같이 코드를 사용한다고 하면, @Co..

프로젝트를 생성하면 기본으로 프로젝트명Theme가 생성되어있습니다 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeTestTheme { } } }} ComposeTestTheme으로 이동하면 아래와 같이 선언되어있습니다 package com.kong.composetest.ui.themeimport android.app.Activityimport android.os.Buildimport android..

우선 라이브러리를 추가합니다[libs.version.toml][versions]//...viewModelVersion = "2.8.7"composeVersion = "1.7.2" // 현재 사용 중인 compose 버전[libraries]//...androidx-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref="viewModelVersion"}androidx-livedata-compose = { group = "androidx.compose.runtime", name = "runtime-livedata", version.ref = "composeVersion" } [bui..

AnimatedVisibility- visibility에 Animated 적용- Transition이 enter, exit 따로 나눠져있다- FadeTransition:  나타날 때, 사라질 때 투명도를 조절해 부드럽게 변하는 효과- SlideTransition:  화면의 한 쪽에서 다른 쪽으로 이동하며 나타나고 사라지는 효과- ExpandTransition:  펼쳐지거나 축소되며 나타나고 사라지는 효과, 주로 패널이나 리스트 항목에 사용- ScaleTransition:  크기를 확대하거나 축소하면서 나타나거나 사라지는 효과 이런 식으로 사용 ..! textVisible은 아래와 같이 선언되어있다 var textVisible by remember { mutableStateOf(false) } Animat..

scaffold- slot api의 확장 - paramater로 여러 슬롯을 제공하여 다양한 UI(ex : topBar, bottomBar, floatingActionButton, drawerContent, content)을 쉽게 정의하고 구성 가능 - 기본틀로 사용하면 체계적으로 개발하기 좋다  - Scaffold는 기본적으로 content 슬롯에 패딩을 적용해야하고 아니면 아래와 같은 에러가 뜬다 Content padding parameter it is not used More  @OptIn(ExperimentalMaterial3Api::class)@Composablefun ScaffoldTest() { var checked by remember { mutableStateOf(false) } ..

Column { TopAppBar( title = { Text(text = "보통의 앱 바") }, navigationIcon = { IconButton(onClick = {}) { Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null) } }, actions = { // row Scope IconButton(onClick = {}) { Icon(imageVector = Icons.Filled.Edit, ..

TextField = EditText var name by remember { mutableStateOf("Myday") }Column(modifier = Modifier.padding(4.dp)) { TextField( value = name, label = { Text(text = "name") }, onValueChange = { name = it }) Text(text = "입력값 $name")}  Outline을 설정하고 싶으면  OutlinedTextField를 사용하면 된다 var name by remember { mutableStateOf("Myday") }Column(m..

BoxWithConstraints- 부모의 제약 조건을 기반으로 크기를 조정- 부모의 최대, 최소 크기의 정보를 제공 @Composablefun BoxWithConstraintsTest(modifier: Modifier = Modifier) { BoxWithConstraints( modifier = modifier ) { //box scope Text("maxW: $maxWidth minW: $minWidth") }} 선언된 BoxWithConstraintsTest를 사용해서 값을 modifier에 값을 넣어주면 전달된 값이 찍힌다 @Composablefun Greeting() { Column { BoxWithConstraintsTest(Modi..

surface : - 가장 기본적으로 UI를 구현하는 기반  elevation, border, shape, color 등 설정이 가능하다 contentColor를 설정하지 않으면 color에 따라서 contentColor가 자동으로 설정된다(contentColor가 설정되지 않았다면, 이 Surface는 배경 색상을 테마의 ColorScheme에 정의된 색상에 맞는 ContentColor를 반환한다. 예를 들어, 이 Surface의 색상이 ColorScheme.surface라면, contentColor는 ColorScheme.onSurface로 설정된다) Surface( modifier = Modifier.padding(10.dp), shadowElevation = 10.dp, ..