Kong-droid

- 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.") //..

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

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 함수에선 사용할 수 없고 ..

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

Box Box 자체로 쓰거나 FrameLayout처럼 중첩시킬 때 사용된다 BoxScope내의 확장함수 2개 align, matchParentSize Modifier.alignBox(modifier = Modifier.size(100.dp)) { // Box Scope Box(modifier = Modifier.size(70.dp).background(Color.Black).align(Alignment.CenterStart)) Box(modifier = Modifier.size(70.dp).background(Color.Magenta).align(Alignment.BottomEnd))}  Modifier.matchParentSize()- 자식 컴포넌트 중 가장 큰 크기에 의해 결정- 두번째 b..

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 등) - 비동기 작업을 처리하는 방법에 대한 이해가 필요