Kong-droid

[Compose] Animation

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

[Compose] State, StateHoisting

상태가 전달되는 범위는 최대한 좁혀야한다 -> StateHoisting (상태를 위로 끌어올린다)@Composablefun StateTest() { var downCase by rememberSaveable { mutableStateOf("aa") } var upperCase by rememberSaveable { mutableStateOf("AA") } Column(modifier = Modifier.padding(16.dp)) { OutlinedTextField( value = downCase, onValueChange = { if(it.isBlank()) { downCas..

[Compose] Snackbar

SnackbarHost - Snackbar는 직접 쓰지 않고 SnackbarHost를 사용해야한다  -> SnackbarHostState를 사용하여 Snackbar의 상태를 관리 @Composablefun SnackBarTest() { var counter by remember { mutableStateOf(0) } val snackbarHostState = remember { SnackbarHostState() } val coroutineScope = rememberCoroutineScope() Scaffold(snackbarHost = { SnackbarHost(snackbarHostState) },) { padding -> Button(onClick = { ..

[Compose] ConstraintLayout, ConstraintSet

library 추가 필요[libs.version.toml][versions]//...constaraintLayoutVersion = "1.1.0"[libraries]//...androidx-constraint-layout = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "constaraintLayoutVersion" }[plugins]//... createRefs()- constraintLayout 안에 있는 여러 UI 요소(예: 버튼, 텍스트 등)를 서로 연결하고 배치할 수 있는 참조를 생성@Stablefun createRefs(): ConstraintLayoutScope.Constraine..

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

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