Kong-droid

[Compose] Recomposition

Composition- composable을 호출해 만들어지는 것으로 ui를 기술하는 composable의 트리 구조   Composition- composable fun을 실행하고 ui를 표시Layout- ui를 배치Draw- ui를 랜더링 즉, 캔버스에 그림  ⭐️ Recomposition- state가 바뀌었을 때 변경된 state를 반영하기 위해 Composition 업데이트- ui를 변경하기 위해선 state가 변경되어야 함 Recomposition을 조절하려면 ? @Stable이 없어도 compose complier가 안정적으로 간주하는 타입 - 모든 Primitive 타입, 문자열, 모든 함수 타입 위의 타입들이 아니라면 안정적이라고 간주할 수 없을 때 (ex. 리스트, 맵, 사용자 정의 객..

[Compose] scaffold

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) } ..

[Compose] Slot API

- Composable 내에서 다른 Composable을 사용할 수 있도록 하는 패턴 @Composablefun MyCustomCard( title: String, content: @Composable () -> Unit // Slot API를 사용하여 Composable을 매개변수로 받음) { Card { Column { Text(text = title) content() // 전달된 Composable을 호출 } }}@Composablefun MyScreen() { MyCustomCard(title = "Hello") { Text("This is the content of the card.") //..

[Compose] Component 알아보기 - TopAppBar

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, ..

[Compose] Component 알아보기 - TextField

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..

[Compose] Component 알아보기 - CheckBox

CheckBoxRow(verticalAlignment = Alignment.CenterVertically) { Checkbox(checked = false, onCheckedChange = { }) Text(text = "checkbox를 테스트해보자")}- 기존 안드로이드 view와는 달리 체크박스를 눌러도 ui상에 아무 변화가 없음- checked 값이 바뀌어야만 ui가 갱신된다  그럼 이렇게 하면 될까 ? ❌ 변경되지 않는다 (primitive값만 바꾼다고 반영이 되는 게 아님)compose에서는 Composable 함수 즉, recomposition을 시켜야만 반영된다 var checked = falseCheckbox(checked = checked, onCheckedChange ..

Image 네트워크 없이 간단한 Image를 설정하는 3가지 방법이 있다1. painter = painterResource 사용2. imageVector = 벡터 이미지 사용 3. bitmap 사용  Column { Image( painter = painterResource(R.drawable.simpson), contentDescription = "simpson") Image( imageVector = Icons.Filled.Face, contentDescription = "vector" ) //bitmap은 순수 Composable 함수에선 사용할 수 없고 ..

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, ..

Component들이 아직 손에 익지 않아서 테스트해보면서 몇가지만 기록해보려고 합니다  Text에서 색상, 폰트 크기, 폰트 굵기 변경 등 테스트해보겠습니다 가장 기본형태를 아래와 같다는 가정입니다 :) 커스텀하려면 parameter로 원하는 걸 추가하면 되는데 아직 손에 익지 않아서 하나씩 해보는 중입니다 Text( text = "Hello $name!", modifier = modifier) 폰트 컬러 변경 Text( color = Color(0xff0094ff), //혹은 color = Color.Green 의 형태도 가능 text = "Hello $name!", modifier = modifier)  폰트 크기 변경Text( color..

compose 구글에서 제공하던 캠프를 들은 적 있는데 다 까먹었어요그래서 다시 공부합니다.. 시작하기 앞서 간단하게 끄적여봅니다 기존에 사용하던 안드로이드 UI는 XML을 사용해 레이아웃을 정의하고, Java나 Kotlin 코드를 통해 UI를 조작하는 명령형 방식인데 이와 달리 Compose는 선언형 UI입니다  선언형 UI- 모든 컴포넌트가 상태를 가지고 각 컴포넌트는 자신의 상태를 기반으로 UI를 구성- 상태가 변경되면 해당 컴포넌트가 자동으로 다시 그려져 최신 상태를 반영 compose를 시작하기 전 잘 이해해야할 부분들을 체크해가며 공부해야할 거 같아요 - 상태 관리에 대한 이해 필요(remember, mutableStateOf, State 등) - 비동기 작업을 처리하는 방법에 대한 이해가 필요