예제[1]

AnimatedVisibility - enter

• fadeIn
• scaleIn
• slideIn
• slideInHorizontally
• slideInVertically
• expandIn
• expandHorizontally
• expandVertically
• AnimatedVisibility

AnimatedVisibility - exit

• fadeOut
• scaleOut
• slideOut
• slideOutHorizontally
• slideOutVertically
• shrinkOut
• shrinkHorizontally
• shrinkVertically
• AnimatedVisibility

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimationEx() {
    var helloWorldVisible by remember { mutableStateOf(true) }
    var isRed by remember { mutableStateOf(false) }


    // Red -> White로 애니메이션이 적용되어 색상 변경
    val backgroundColor by animateColorAsState(
        targetValue = if(isRed) Color.Red else Color.White
    )

    // alpha값을 애니메이션 적용
    val alpha by animateFloatAsState(
        targetValue = if(isRed) 1.0f else 0.5f
    )

    Column(
        modifier = Modifier
            .padding(16.dp)
            .background(backgroundColor)  // animation - background
            .alpha(alpha)  // animation - alpha
            .fillMaxSize()
    ) {

        // 1. AnimatedVisibility
        // helloWorldVisible의 값에 따라 보이기 또는 사라지게 애니메이션 적용
        AnimatedVisibility(
            visible = helloWorldVisible,
            enter = fadeIn() + expandHorizontally(), // 넓이를 0에서 ~ 보이게 하기 (옆으로 나타남 Horizon이라서)
            exit = slideOutHorizontally() // 사라지게 하기
        ) {
            Text(text = "Hello World!")
        }

        Row(
            Modifier.selectable(
                selected = helloWorldVisible,
                onClick = {
                    helloWorldVisible = true
                }
            ),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = helloWorldVisible,
                onClick = { helloWorldVisible = true }
            )
            Text(
                text = "Hello World 보이기"
            )
        }

        Row(
            Modifier.selectable(
                selected = !helloWorldVisible,
                onClick = {
                    helloWorldVisible = false
                }
            ),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = !helloWorldVisible,
                onClick = { helloWorldVisible = false }
            )
            Text(
                text = "Hello World 감추기"
            )
        }

        Text(text = "배경 색을 바꾸어봅시다.")

        Row(
            Modifier.selectable(
                selected = !isRed,
                onClick = {
                    isRed = false
                }
            ),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = !isRed,
                onClick = { isRed = false }
            )
            Text(
                text = "흰색"
            )
        }

        Row(
            Modifier.selectable(
                selected = isRed,
                onClick = {
                    isRed = true
                }
            ),
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                selected = isRed,
                onClick = { isRed = true }
            )
            Text(
                text = "빨간색"
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun AnimationPreview() {
    Compose_exampleTheme {
        AnimationEx()
    }
}

예제[2]

• updateTransition
• Crossfade

@Composable
fun Animation2Ex() {
    var isDarkMode by remember { mutableStateOf(false) }

    // backGroundStatus, textColorStatus, alpha 와 같이 여러가지 애니메이션을 한 단위로 묶어 관리가 가능
    val trasition = updateTransition(targetState = isDarkMode, label = "darkMode Ani")

    // 아래 state -> 는 trasition의 isDarkMode
    val backGroundStatus by trasition.animateColor(label = "darkmode backGroundColor") { state ->
        when(state) {
            false -> { Color.White }
            true -> { Color.Black }
        }
    }

    val textColorStatus by trasition.animateColor(label = "darkmode textColorStatus") { state ->
        when(state) {
            false -> { Color.Black }
            true -> { Color.White }
        }
    }

    val alpha by trasition.animateFloat (label = "darkmode alpha"){ state ->
        when(state) {
            false -> 0.7f
            true -> 1.0f
        }
    }

    Column (
      modifier = Modifier
          .background(backGroundStatus)
          .alpha(alpha)
          .fillMaxSize()
    ) {
        // 일반모드, 다크모드
        RadioButtonWithText(text = "일반 모드", color=textColorStatus, selected = !isDarkMode) {
            isDarkMode = false
        }
        RadioButtonWithText(text = "다크 모드", color=textColorStatus, selected = isDarkMode) {
            isDarkMode = true
        }

        // darkmode 상태에 따라 박스 위치 변경하는 애니메이션
        // Crossfade는 컨텐츠에 애니메이션을 적용할 때 주로 사용됨. 
        Crossfade(targetState = isDarkMode, label = "") { state ->
            when(state) {
                false -> {
                    Column {
                        Box(modifier = Modifier
                            .background(Color.Red)
                            .size(20.dp)) {
                            Text("1")
                        }
                        Box(modifier = Modifier
                            .background(Color.Magenta)
                            .size(20.dp)) {
                            Text("2")
                        }
                        Box(modifier = Modifier
                            .background(Color.Blue)
                            .size(20.dp)) {
                            Text("3")
                        }
                    }
                }
                true -> {
                    Row {
                        Box(modifier = Modifier
                            .background(Color.Red)
                            .size(20.dp)) {
                            Text("1")
                        }
                        Box(modifier = Modifier
                            .background(Color.Magenta)
                            .size(20.dp)) {
                            Text("2")
                        }
                        Box(modifier = Modifier
                            .background(Color.Blue)
                            .size(20.dp)) {
                            Text("3")
                        }
                    }
                }
            }

        }
    }
}

@Preview(showBackground = true)
@Composable
fun AnimationPreview2() {
    Compose_exampleTheme {
        RadioButtonWithText(
            text = "라디오 버튼",
            color = Color.Red,
            selected = true,
            onClick = {}
        )
    }
}

@Composable
fun RadioButtonWithText(
    text: String,
    color: Color = Color.Black,
    selected: Boolean,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier.selectable(
            selected = selected,
            onClick = onClick
        ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        RadioButton(selected = selected, onClick = onClick)
        Text(text = text, color = color)
    }
}

Composable 함수 내에서 상태를 유지하기 위해 사용됩니다. 이 함수로 생성된 상태는 Composable 함수가 재호출되더라도 변경되지 않습니다. 즉, 상태가 Composable 함수가 호출될 때 한 번 생성되고 그 상태가 유지됩니다. 이는 재호출이 발생하더라도 상태를 유지하고 싶을 때 사용됩니다.

rememberSaveable

주로 화면 회전과 같은 상태 변경으로 인해 Composable 함수가 다시 생성될 때 상태를 보존하고 복원하기 위해 사용됩니다. 이 함수를 사용하면 Composable 함수가 재생성되더라도 상태를 유지하며, 이전에 입력된 데이터나 상태를 회복하는 데에 특히 유용합니다.

실습 [1]

• 첫 번째 실습은 OutlinedTextField 내부까지 값이 도달하게 했습니다. 이러한 방식은 권장하지 않은 방식입니다.
• 가능한 상태가 전달되는 범위를 좁히는 것이 중요합니다. 두 번째 실습에서는 State Hoisting을 활용하여 상태 전달 범위를 좁히는 실습을 진행하겠습니다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun StateHoistingEx() {
    /*
        rememberSaveable은 Configuration이 변경시 값을 저장할 수 있다.
        그러나 캐시를 사용하기 때문에 많은 데이터에 사용하는 것은 권장하지 않는다.
     */

    var num by rememberSaveable {
        mutableStateOf("0")
    }
    var result by remember {
        mutableStateOf((0.0).toString())
    }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = num,
            onValueChange = {
                if(it.isBlank()) {
                    num = ""
                    result = ""
                    return@OutlinedTextField
                }
                val inputNum = it.toFloatOrNull() ?: return@OutlinedTextField // toFloatOrNull() : Float형으로 변경 불가능한 것은 null 리턴
                result = (inputNum * inputNum * 3.14).toString()
                num = it

            }, label = {
                Text("반지름")
            }
        )
        OutlinedTextField(
            value = result,
            onValueChange = {
                result = it
            },
            label = {
                Text("원 넓이")
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun StateHoistingPreview() {
    Compose_exampleTheme {
        StateHoistingEx()
    }
}

실습 [2] - State Hoisting

• State Hoisting을 사용하여 상태를 관리합니다.
• 가능한 상태를 별도로 빼서 관리하는 것이 좋습니다. ( == UI 부분은 Stateless하게 관리하는 것이 좋다.)
• 자세한 설명은 주석을 참고

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun StateHoistingEx() {
    /*
        rememberSaveable은 Configuration이 변경시 값을 저장할 수 있다.
        그러나 캐시를 사용하기 때문에 많은 데이터에 사용하는 것은 권장하지 않는다.
     */

    var num by rememberSaveable {
        mutableStateOf("0")
    }
    var resultNum by remember {
        mutableStateOf((0.0).toString())
    }

    numToResultStateless(
        num,
        resultNum
    ) {
        if (it.isBlank()) {
            num = ""
            resultNum = ""
            return@numToResultStateless  // 입력 값이 numToResultStateless에서 리턴되기 때문
        }
        val inputNum = it.toFloatOrNull()
            ?: return@numToResultStateless // toFloatOrNull() : Float형으로 변경 불가능한 것은 null 리턴
        resultNum = (inputNum * inputNum * 3.14).toString()
        num = it
    }

}

/*
    numToResultStateless는 상태를 가지고 있지 않아서 상태를 변경하지 않는다.
    onNumChange: (String) -> Unit 은 num이 변경됬을때 호출할 콜백을 사용해 상위 계층에서 상태를 변경하도록 한다.
    이 방식을 통해 numToResultStateless는 상태에 개입하지 않도록 한다.
    State관리의 책임은 StateHoistingEx()에서 맡도록 한다.
 */
@Composable
fun numToResultStateless(
    num: String,
    resultNum: String,
    onNumChange: (String) -> Unit
) {
    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = num,
            onValueChange = onNumChange, // 상태 변경을 onNumChange로 위임
            label = {
                Text("반지름")
            }
        )
        OutlinedTextField(
            value = resultNum,
            onValueChange = {},
            label = {
                Text("원 넓이")
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun StateHoistingPreview() {
    Compose_exampleTheme {
        StateHoistingEx()
    }
}

• 왜 State Hoisting을 해서 상태가 없도록 하는가?

  • 테스트시 위 예시 코드와 같이 onNumChange: (String) -> Unit를 변형시켜 손 쉽게 테스트가 가능
  • 첫 번째 예시에서 한 곳에 num과 resultNum를 연동할 필요가 사라짐
  • 두 번째 예시 코드에서 fun numToResultStateless()는 상태가 없다. ⇒ 여러개의 numToResultStateless를 같이 호출할 수 있다. 즉, 상태를 한 곳에 모아둘 수 있다.

• 두 번째 예시 코드는 상태를 StateHoistingEx()서 관리하도록 했습니다. 이것을 ViewModel 계층으로 옮길 수 있습니다. (numToResultStateless는 변경이 필요 X)

@Composable
fun BottomAppBarEx() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    var counter by remember {
        mutableStateOf(0)
    }

    Scaffold (
        snackbarHost = { SnackbarHost(snackbarHostState) },

        bottomBar = {
            BottomAppBar() {
                Text("study")
                Button(onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar( // 스낵바 결과 받기 가능
                            message = "snackBar 보인다~~!!",
                            actionLabel = "close",
                            duration = SnackbarDuration.Short
                        )
                    }
                }) {
                    Text("show SnackBar")
                }
                Button(onClick = {
                    counter++
                }) {
                    Text(text = "+")
                }
                Button(onClick = {
                    counter--
                }) {
                    Text(text = "-")
                }
            }
        }
    ) {
                Surface(
            modifier = Modifier.padding(it),
        ) {
            Text(text = " ")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BottomAppBarPreview() {
    Compose_exampleTheme {
        BottomAppBarEx()
    }
}

@Composable
fun SnackBarEx() {
    var counter by remember {
        mutableStateOf(0)
    }

    // SnackbarHostState 생성
    val snackbarHostState = remember { SnackbarHostState() }

    // coroutineScope 사용해야 함 
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) },
        floatingActionButton = {

            ExtendedFloatingActionButton(
                onClick = {
                    // 스낵바 실행 부분
                    scope.launch {
                        val result = snackbarHostState.showSnackbar( // 스낵바 결과 받기 가능
                            message = "Snackbar # ${++counter}",
                            actionLabel = "close",
                            duration = SnackbarDuration.Short
                        )

                        // 스낵바 결과
                        when(result) {
                            SnackbarResult.Dismissed -> {
                                // 스낵바 닫기
                            }
                            SnackbarResult.ActionPerformed -> {
                                // 동작 수행
                            }
                        }
                    }
                }
            ) { Text("Show snackbar") }
        },
        content = { innerPadding ->
            Text(
                text = "SnackBar 예제",
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize()
                    .wrapContentSize()
            )
        }
    )
}

@Preview(showBackground = true)
@Composable
fun SnackBarPreview() {
    Compose_exampleTheme {
        SnackBarEx()
    }
}

▪️ SnackBar를 처음 한 번 띄우기 (LaunchedEffect)

• LaunchedEffect를 사용
• 아래 예제 코드에서 LaunchedEffect는 ( )안 key인 snackbarHostState가 변경되기 전 까지는 다시 호출되지 않는다.
• 위 코드가 LaunchedEffect를 사용하지 않아도 가능했던 이유는 ****composition(ex 버튼 onClick내부) 내부에서 상용했기 때문이다.

@Composable
fun SnackBarEx() {
    var counter by remember {
        mutableStateOf(0)
    }

    // SnackbarHostState 생성
    val snackbarHostState = remember { SnackbarHostState() }

    // coroutineScope 사용해야 함
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) },

        content = { innerPadding ->
            // launch는 LaunchedEffect and composition 밖에서 사용 가능
            // snackbarHostState가 변경되기 전 까지는 다시 호출되지 않는다. 
            LaunchedEffect(key1 = snackbarHostState) {
                scope.launch {
                    val result = snackbarHostState.showSnackbar( // 스낵바 결과 받기 가능
                        message = "Snackbar # ${++counter}",
                        actionLabel = "close",
                        duration = SnackbarDuration.Short
                    )

                    // 스낵바 결과
                    when(result) {
                        SnackbarResult.Dismissed -> {
                            // 스낵바 닫기
                        }
                        SnackbarResult.ActionPerformed -> {
                            // 동작 수행
                        }
                    }
                }
            }

            Text(
                text = "SnackBar 예제",
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize()
                    .wrapContentSize()
            )
        }
    )
}

@Preview(showBackground = true)
@Composable
fun SnackBarPreview() {
    Compose_exampleTheme {
        SnackBarEx()
    }
}

• DropdownMenu

        expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    properties: PopupProperties = PopupProperties(focusable = true),
    content: @Composable ColumnScope.() -> Unit

• DropdownMenuItem

        text: @Composable () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    enabled: Boolean = true,
    colors: MenuItemColors = MenuDefaults.itemColors(),
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() 

실습

@Composable
fun DropdownMenuEx() {
    var expandStatus by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    Column {
        Button(onClick = {
            expandStatus = true // 버튼 클릭시 드롭다운 메뉴 열기 
        }) {
            Text(text = "DropdownMenu open")
        }

        Text(text = "Counter: $counter")
    }

    DropdownMenu(
        expanded = expandStatus,
        onDismissRequest = { // 사라질때 
            expandStatus = false
        }
    ) {
        // 메뉴 안에 들어갈 값들
        DropdownMenuItem(
            text = { Text(text = "plus")},
            onClick = {
                counter++
                expandStatus = false
            }
        )

        DropdownMenuItem(
            text = {Text(text = "minus")},
            onClick = {
                counter--
                expandStatus = false
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DropdownMenuPreview() {
    Compose_exampleTheme {
        DropdownMenuEx()
    }
}

/*
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
 */
@Composable
fun DialogEx() {
    var openDialog by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    Column {
        Button(onClick = { openDialog = true }) {
            Text("다이얼로그 열기")
        }
        Text("카운터: $counter")
    }

    if (openDialog) {
        AlertDialog(onDismissRequest = {
            // 다이얼로그를 종료
            openDialog = false
        }, confirmButton = {
            // "더하기" 버튼을 만들고 `counter`를 증가시키기
            Button(onClick = {
                counter++
                openDialog = false
            }) {
                Text("증가(+)")
            }
        }, dismissButton = {
            // 다이얼로그 끄기
            Button(onClick = {
                openDialog = false
            }) {
                Text("취소")
            }
        }, title = { 
            // 타이틀
            Text(text = "title")
        }, text = {
            // 단계 5: 다이얼로그에서 설명할 문구를 출력합니다.
            Text(text = "다이얼로그 예제 (버튼 누르면 카운터 증가)")
        })
    }
}

@Preview(showBackground = true)
@Composable
fun DialogPreView() {
    Compose_exampleTheme {
        DialogEx()
    }
}

CustomDialog

@Composable
fun CustomDialogEx() {
    var openDialog by remember { mutableStateOf(false) }
    var counter by remember { mutableStateOf(0) }

    Column {
        Button(onClick = { openDialog = true }) {
            Text("다이얼로그 열기")
        }
        Text("카운터: $counter")
    }

    if (openDialog) {
        Dialog(onDismissRequest = { // onDismiss를 처리해야 다이얼로그 밖을 눌렀을때 다얼로그가 사라짐
            // Dismiss 처리
            openDialog = false
        }) {
            // Surface를 통해 다이얼로그에 들어갈 요소들을 잘 보이도록함
            Surface(shape = RoundedCornerShape(8.dp)) {
                Column (modifier = Modifier.padding(8.dp)){
                    Text("버튼 클릭 +1 / -1")
                    Row {
                        Button(onClick = {
                            counter++
                            openDialog = false
                        }) {
                            Text(text = "+1")
                        }
                        Button(onClick = {
                            counter--
                            openDialog = false
                        }) {
                            Text(text = "-1")
                        }
                    }
                    Button(onClick = {
                        openDialog = false
                    }) {
                        Text(text = "취소")
                    }
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CustomDialogPreView() {
    Compose_exampleTheme {
        CustomDialogEx()
    }
}

• Canvas는 modifier 기본값이 없다!!

실습

@Composable
fun CanvasEx() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        // drawLine (색, 시작위치, 끝 위치)
        drawLine(Color.Red, Offset(10f, 10f), Offset(300f, 300f), strokeWidth = 10f)

        // drawCircle(색, 반지름, 중앙 위치)
        drawCircle(Color.Blue, 300f, Offset(400f, 400f))

        // drawRect
        drawRect(Color.Magenta, Offset(250f, 250f), Size(500f, 500f))

        // 연속해서 그리기
        drawLine(Color.Black, Offset(600f, 600f), Offset(650f, 650f), strokeWidth = 10f)
        drawLine(Color.Black, Offset(650f, 650f), Offset(600f, 650f), strokeWidth = 10f)
        drawLine(Color.Black, Offset(600f, 650f), Offset(650f, 700f), strokeWidth = 10f)
    }

}

@Preview(showBackground = true)
@Composable
fun CanvasExPreview() {
    Compose_exampleTheme {
        CanvasEx()
    }
}

@Composable
fun CardWithConstraintEx() {

    val cardData = CardData(
        imageUri = "https://cdn.gjdream.com/news/photo/202308/631816_233764_323.jpg",
        imageDescription = "sleeping cat",
        name = "pimo",
        description = "이 고양이는 꿀잠자는 중 입니다.",
    )
    Column {
        CardItem(cardData)
        CardItem(cardData)
    }
}

@Preview(showBackground = true)
@Composable
fun CardWithConstraintExPreview() {
    Compose_exampleTheme {
        CardWithConstraintEx()
    }
}

@Composable
fun CardItem(cardData: CardData) {
    val color = Color(0x33000000)

    Card(
        elevation = CardDefaults.elevatedCardElevation(8.dp),
        modifier = Modifier.padding(4.dp),
    ) {
        ConstraintLayout(
            modifier = Modifier.fillMaxWidth()
        ) {
            val (profileImg, name, description) = createRefs()

            AsyncImage(
                model = cardData.imageUri,
                placeholder = ColorPainter(color), // 이미지가 없을때 넣을 것
                contentScale = ContentScale.Crop, // 사이즈에 맞지 않은 것은 잘라냄
                contentDescription = "sleeping cat",
                modifier = Modifier
                    .size(30.dp)
                    .clip(CircleShape) // 둥굴게,
                    .constrainAs(profileImg) {
                        start.linkTo(parent.start, margin = 10.dp)
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                    }
            )

            Text(
                text = cardData.name,
                modifier = Modifier.constrainAs(name) {
                    start.linkTo(profileImg.end, margin = 10.dp)
                }
            )

            Text(
                text = cardData.description,
                modifier = Modifier.constrainAs(description) {
                    start.linkTo(profileImg.end, margin = 10.dp)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints // 제약만큼만
                }
            )

            val chain = createVerticalChain(
                name,
                description,
                chainStyle = ChainStyle.Packed
            )

            // 위 아래 공백 만들기 위함
            // 각 Text 위 아래 margin을 주지 못한다. chain을 만드는 순간 포함된 애들은 margin이 적용 불가
            // 그러므로 아래와 같은 방식으로 margin을 주어야 한다.
            constrain(chain) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(parent.bottom, margin = 8.dp)
            }

        }
    }
}

data class CardData(
    val imageUri: String,
    val imageDescription: String,
    val name: String,
    val description: String,
)

💡 Navigation Compose는 Compose 배포 버전과 동일하게 업데이트 되지 않습니다. 때문에, https://developer.android.com/jetpack/compose/navigation?hl=ko 에서 Navigation 버전을 확인하시고 설정을 진행해야 합니다.

설정

• 버전확인!

dependencies {
    val nav_version = "2.5.3"

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

dependencies {
    implementation("androidx.navigation:navigation-compose:2.5.3")
}

▪️popUpTo

// room1으로 이동하기 전 home을 제외한 나머지 스택을 모두 제거 후 room1으로 이동 
navController.navigate("room1") {
    popUpTo("home") 
}

• Home, Room1, Room2가 있다고 가정

• 위 코드를 보면 홈으로 이동시 popUpTo를 지정

• popUpTo는 Home → Room1으로 이동후 Room1 → Room2로 이동하면 Room1은 사라짐 (상태 Home → Room2)

• 즉, Home과 이동하려는 곳 사이를 제거한다.

• inclusive

    navController.navigate("Home") {
                            popUpTo("Home") {
                                inclusive = true
                            }
                        }

  • inclusive = ture를 사용하면 Home까지 제거를 한다.
  • ex) 동작 방식
  1. 처음 Home → Room1 으로 이동시 Home이 제거된다. (상태 : Room1)
  2. Room1 → Room2로 이동시에는 popUpto가 동작하지 않는다. (상태 Room1 → Room2)
  3. 그리고 다시 Home으로 이동하면 Room1 → Room2 → Home으로 앞에 Home이 없어 아무것도 제거되지 않는다.
  4. 여기서 Room1으로 이동하면 Room1 → Room2 → Room1으로 Home이 제거된다.

▪️launchSingleTop

• launchSingleTop: 스택 최상단에 올라가 있으면, 스택에 쌓지 않음

navController.navigate("Home") {
                        launchSingleTop = true
                    }

• Home에서 Home으로 이동한다고 가정
• launchSingleTop을 사용하지 않으면 Home에서 Home으로 이동하는 버튼을 클릭시 스택에 Home이 여러개 쌓임
• launchSingleTop을 사용하면 Home을 여러번 눌러도 이미 Home이 있기 때문에 더이상 쌓이지 않음

▪️ Argument Nav

• 버튼 클리깃 Argument/dong을 전달
• 해당 composable은 전달받은 {userId}로 이동

@Composable
fun Navigation(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    // NavHost 생성
    // 컨트롤러, 목적지, modifier
    NavHost(navController, "Home", modifier = modifier) {
        // 라우터 설정
        composable("Home") {
            Column {
                // argument nav
                Button(onClick = {
                    navController.navigate("Argument/dong") {
                        launchSingleTop = true
                    }
                }) {
                    Text("userId 입력값 으로 연결 이동")
                }
            }
        }

        composable("Argument/{userId}") {
            val userId = it.arguments?.get("userId")
            Text(text = "userId: $userId")
        }
    }
}

전체 코드

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.compose_example.ui.theme.Compose_exampleTheme

class NavActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Compose_exampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    Navigation()
//                    Greeting("Android")
                }
            }
        }
    }
}

/**
 * Navigation 이동은 stack이 쌓인다.
 */
@Composable
fun Navigation(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    // NavHost 생성
    // 컨트롤러, 목적지, modifier
    NavHost(navController, "Home", modifier = modifier) {
        // 라우터 설정
        composable("Home") {
            Column {
                Text(text = "Home")
                Button(onClick = {
                    navController.navigate("room1")
                }) {
                    Text("room1 이동")
                }
                Button(onClick = {
                    navController.navigate("room2")
                }) {
                    Text("room2 이동")
                }
                Button(onClick = {
                    navController.navigate("Home") {
                        launchSingleTop = true
                    }
                }) {
                    Text("Home으로 이동")
                }

                // argument nav
                Button(onClick = {
                    navController.navigate("Argument/dong") {
                        launchSingleTop = true
                    }
                }) {
                    Text("userId 입력값 으로 연결 이동")
                }
            }
        }

        composable("room1") {
            Column {
                Text(text = "room1")
                Button(onClick = {
                    navController.navigate("Home")
                }) {
                    Text("Home으로 이동")
                }
                Button(onClick = {
                    navController.navigate("room2")
                }) {
                    Text("room2 이동")
                }
            }
        }

        composable("room2") {
            Column {
                Text(text = "room2")
                Button(onClick = {
                    navController.navigate("Home")
                }) {
                    Text("Home으로 이동")
                }
                Button(onClick = {
                    navController.navigate("room1")
                }) {
                    Text("room1 이동")
                }
            }
        }

        composable("Argument/{userId}") {
            val userId = it.arguments?.get("userId")
            Text(text = "userId: $userId")
        }
    }
}

이 전 ConstraintLayout편은 뷰들 각각을 직접 modifier에 제약을 지정했지만, ConstraintSet을 사용하여 Constraint을 밖으로 빼내 별도로 지정하도록 할 수 있다.

1. 이 전에는 ConstraintLayout에서 만들었던 레퍼런스들을 ConstraintSet에서 만든다.
2. ConstraintSet에 각 레퍼런스에 대한 제약조건을 지정한다.
3. ConstraintLayout의 첫 번째 인자로 constraintSet을 지정하고, 각각의 뷰에 ConstraintSet에서 만든 각 레퍼런스를 .layoutId()로 지정한다.

@Composable
fun ConstraintSetEx() {
    val constraintSet = ConstraintSet {
        // 레퍼런스 생성
        val redBox = createRefFor("redBox")
        val magentaBox = createRefFor("magentaBox")
        val greenBox = createRefFor("greenBox")
        val yellowBox = createRefFor("yellowBox")

        // 제약 지정
        constrain(redBox) {
            bottom.linkTo(parent.bottom, margin = 8.dp)
            end.linkTo(parent.end, margin = 4.dp)
        }

        constrain(magentaBox) {
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }

        constrain(greenBox) {
            centerTo(parent) // 정 중앙
        }

        constrain(yellowBox) {
            top.linkTo(magentaBox.bottom)
            start.linkTo(magentaBox.end)
        }
    }

    ConstraintLayout(
        constraintSet,
        modifier = Modifier.fillMaxSize(),
    ) {
        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Red)
                .layoutId("redBox"),
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Magenta)
                .layoutId("magentaBox"),
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Green)
                .layoutId("greenBox"),
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Yellow)
                .layoutId("yellowBox"),
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ConstraintSetPreview() {
    Compose_exampleTheme {
        ConstraintLayoutEx()
    }
}

Compose의 ConstraintLayout  |  Jetpack Compose  |  Android Developers

설정

• Build.gradle(app)

implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")

실습

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.navigation.NavController
import com.example.compose_example.ui.theme.Compose_exampleTheme

@Composable
fun ConstraintLayoutScreen(
    navController: NavController,
) {
    ConstraintLayoutEx()
}

@Composable
fun ConstraintLayoutEx() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize(),
    ) {
        // createRefs는 하나에 최대 16개의 컴포넌트
        // 만약 17개 이상 사용해야 한다면 createRefs를 추가로 생성하면 됨
        // xml로 비유하면 각 뷰들의 id라고 볼 수 있다.
        var (redBox, magentaBox, greenBox, yellowBox) = createRefs()

        /*
            linkTo
            (bottom, start, end, top).linkTo
            margin: Dp = 0.dp,
            goneMargin: Dp = 0.dp

            centerTo
            centerVerticallyTo
            centerHorizontallyTo
         */

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Red)
                .constrainAs(redBox) {
                    // 박스 위치시키기
                    bottom.linkTo(parent.bottom, margin = 8.dp)
                    end.linkTo(parent.end, margin = 4.dp)
                },
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Magenta)
                .constrainAs(magentaBox) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Green)
                .constrainAs(greenBox) {
//                    start.linkTo(parent.start)
//                    end.linkTo(parent.end)
//                    top.linkTo(parent.top)
//                    bottom.linkTo(parent.bottom)
                                        // 위 4줄 주석과 동일한 방법 
                    centerTo(parent) // 정 중앙
                },
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Yellow)
                .constrainAs(yellowBox) {
                    top.linkTo(magentaBox.bottom)
                    start.linkTo(magentaBox.end)
                },
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ConstraintLayoutExPreview() {
    Compose_exampleTheme {
        ConstraintLayoutEx()
    }
}

Chain & Barrier

@Composable
fun ConstraintLayoutChainWithBarrierEx() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize(),
    ) {
        var (redBox, magentaBox, greenBox, testText) = createRefs()

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Red)
                .constrainAs(redBox) {
                    top.linkTo(parent.top, margin = 20.dp)
                },
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Magenta)
                .constrainAs(magentaBox) {
                    top.linkTo(parent.top, margin = 30.dp)
                },
        )

        Box(
            modifier = Modifier.size(40.dp)
                .background(Color.Green)
                .constrainAs(greenBox) {
                    top.linkTo(parent.top, margin = 40.dp)
                },
        )

        /**
         * Chain
         */
        // 1. createVerticalChain
//        createVerticalChain(redBox, magentaBox, greenBox)

        // 2. createHorizontalChain
//        createHorizontalChain(redBox, magentaBox, greenBox)

        // 3. chainStyle
        // packed: 뭉침
        // spread: 펼치기
        // SpreadInside: 레퍼런스 사이만 펼치기
//        createVerticalChain(redBox, magentaBox, greenBox, chainStyle = ChainStyle.SpreadInside)
        createHorizontalChain(redBox, magentaBox, greenBox, chainStyle = ChainStyle.SpreadInside)

        /**
         * Barrier
         * create(Bottom, Start, End, Top)Barrier
         *
         * 주의!
         * ex)
         * barrier를 end로 지정하고 linkTo를 top으로 할 수 없다.
         */
        // 1.createBottomBarrier
        // 레퍼런스들의 아래쪽에 Barrier 만들기
        val bottomBarrier = createBottomBarrier(redBox, magentaBox, greenBox)

        Text(
            text = "레퍼런스들의 아래쪽에 Barrier 만들기 / 레퍼런스들의 아래쪽에 Barrier 만들기 / 레퍼런스들의 아래쪽에 Barrier 만들기",
            modifier = Modifier.constrainAs(testText) {
                top.linkTo(bottomBarrier)
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ConstraintLayoutChainWithBarrierExPreview() {
    Compose_exampleTheme {
        ConstraintLayoutChainWithBarrierEx()
    }
}

어떠한 Composable 함수가 다른 Composable 함수나 Component를 포함하는 것을 Slot API라고 한다. (ex Raw, Column 등등)

Slot API 예시

• Slot API를 만들때 마지막 파라미터에 content를 만드는게 편하다. → 마지막 인자를 { }에 옮겨 쓸 수 있기 때문.

• 아래 코드를 보면 CheckboxItemSolt에 인자로 content를 전달 받는다. 이 content는 RowScope로 지정했다. 따라서 CheckboxItemSolt에 보낼 content는 RowScope내 속성을 추가하여 사용할 수 있다.

• RowScope로 지정했기 때문에 Text의 align을 CenterVertically로 지정했다.

CheckboxItemSolt(checked1) {
     // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
     Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
}

@Composable
fun CheckboxItemSolt(
    checked: MutableState<Boolean>,
    content: @Composable RowScope.() -> Unit, // 람다를 RowScope로 세팅하여 RowScope내에서 사용하는 것으로 지정할 수 있음
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            checked.value = !checked.value
        },
    ) {
        Checkbox(
            checked = checked.value,
            onCheckedChange = { checked.value = it },
        )
        content()
    }
}

@Composable
fun SlotEx() {
    val checked1 = remember { mutableStateOf(false) }
    val checked2 = remember { mutableStateOf(false) }

    Column {
        CheckboxItemSolt(checked1) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
        }
        CheckboxItemSolt(checked2) {
            Text("체크박스 2")
        }
    }
}

CheckboxItemSolt안에서 체크박스 상태를 변경을 외부로 옮기기

• 위임할 수 있는 것은 밖으로 위임하는 것이 좋다!!
• 아래 코드를 살펴보면 onCheckedChanged를 외부로 위임했다.

@Composable
fun CheckboxItemSolt(
    checked: Boolean, // 변경하는 용도로만 사용
    onCheckedChanged: () -> Unit, // 체크박스의 상태
    content: @Composable RowScope.() -> Unit, // 람다를 RowScope로 세팅하여 RowScope내에서 사용하는 것으로 지정할 수 있음
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickable {
            onCheckedChanged()
        },
    ) {
        Checkbox(
            checked = checked,
            onCheckedChange = { onCheckedChanged() },
        )
        content()
    }
}

@Composable
fun SlotEx() {
    var checked1 by remember { mutableStateOf(false) }
    var checked2 by remember { mutableStateOf(false) }

    Column {
        CheckboxItemSolt(
            checked = checked1,
            onCheckedChanged = { checked1 = !checked1 },
        ) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 1", modifier = Modifier.align(Alignment.CenterVertically))
        }
        CheckboxItemSolt(
            checked = checked2,
            onCheckedChanged = { checked2 = !checked2 },
        ) {
            // RowScopoe 범위에 있기 때문에 align을 CenterVertically로 지정할 수 있다.
            Text("체크박스 2", modifier = Modifier.align(Alignment.CenterVertically))
        }
    }
}

• navigationIcon 부분이 왼쪽 아이콘 배치
• actions 부분이 오른쪽 아이콘 배치

TopAppBar(
            title = { Text("TopAppBar") },
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = "뒤로가기"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Filled.Search,
                        contentDescription = "검색"
                    )
                }
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Filled.Settings,
                        contentDescription = "설정"
                    )
                }
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Filled.AccountCircle,
                        contentDescription = "계정"
                    )
                }
            },
        )

직접 커스텀 하는 TopAppBar

• 직접 간격과 같은 요소들을 지정해 주어야 한다.

TopAppBar {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.ArrowBack,
                    contentDescription = "뒤로가기"
                )
            }

            Text(text = "TopAppBar", modifier = Modifier.weight(1f))

            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.Search,
                    contentDescription = "검색"
                )
            }
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.Settings,
                    contentDescription = "설정"
                )
            }
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Filled.AccountCircle,
                    contentDescription = "계정"
                )
            }
        }

• 설정은 Image편을 참고

구현

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.ColorPainter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import kr.co.fastcampus.part1.chapter3_12.ui.theme.CardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background,
                ) {
                    Column {
                        CardItem(cardData)
                        CardItem(cardData)
                    }
                }
            }
        }
    }

    companion object {
        val cardData = CardData(
            imageUri = "https://cdn.gjdream.com/news/photo/202308/631816_233764_323.jpg",
            imageDescription = "sleeping cat",
            name = "pimo",
            description = "이 고양이는 꿀잠자는 중 입니다.",
        )
    }
}

@Composable
fun CardItem(cardData: CardData) {
    val color = Color(0x33000000)

    Card(
        elevation = 8.dp,
        modifier = Modifier.padding(4.dp),
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp).fillMaxWidth(),

        ) {
            AsyncImage(
                model = cardData.imageUri,
                placeholder = ColorPainter(color), // 이미지가 없을때 넣을 것
                contentScale = ContentScale.Crop, // 사이즈에 맞지 않은 것은 잘라냄
                contentDescription = "sleeping cat",
                modifier = Modifier.size(30.dp).clip(CircleShape), // 둥굴게,
            )

            Spacer(modifier = Modifier.size(8.dp))

            Column {
                Text(
                    text = cardData.name,
                )

                Spacer(modifier = Modifier.size(4.dp))

                Text(
                    text = cardData.description,
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    CardTheme {
        Row {
            CardItem(MainActivity.cardData)
        }
    }
}

data class CardData(
    val imageUri: String,
    val imageDescription: String,
    val name: String,
    val description: String,
)

예제

@Composable
fun Greeting() {
    Column {
        // painter
        Image(
            painter = painterResource(id = R.drawable.cat1),
            contentDescription = "image1",
        )

        // imageVector
        Image(
            imageVector = Icons.Filled.Search,
            contentDescription = "image2")

        // bitmap은 컴포저블 함수 내에서 진행할 수 없다. 
        // 추후에 학습할 예정
    }
}

Network Image

의존성 추가 (coil 라이브러리 사용)

• build.gradle(app)

dependencies {

    // coil 의존성을 추가
    implementation 'io.coil-kt:coil:2.2.2' 
    implementation 'io.coil-kt:coil-compose:2.2.2' 
}

• manifest

<uses-permission android:name="android.permission.INTERNET"/>

• 방법 1

        // rememberImagePainter (Compose 한국어 문서의 추천, but Deprecated)
    val painter = rememberImagePainter(
        data = "https://img.freepik.com/free-photo/adorable-kitty-looking-like-it-want-to-hunt_23-2149167099.jpg?w=2000",
    )

    Image(
        painter = painter,
        contentDescription = "cat image",
    )

• 방법 2

        // AsyncImage
    AsyncImage(
        model = "https://img.freepik.com/free-photo/adorable-kitty-looking-like-it-want-to-hunt_23-2149167099.jpg?w=2000",
        contentDescription = "cat image"
    )

Surface는 안드로이드 컴포즈에서 화면에 그리는 기본적인 단위입니다. Surface는 렌더링 가능한 영역을 나타내며, 여기에 다양한 컴포즈 요소들을 배치하고 그릴 수 있습니다. 간단하게 말해, 화면의 일부분을 나타내는 컴포즈 요소라고 생각할 수 있습니다.

속성

        modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit

1. Text가 Margine을 가져야 한다면?

• text에 Margine을 주는 것이 아닌 Surface에 text를 넣고 Surface에 padding을 부여하는 것이 성능적으로 더 좋다고 한다. (Text에도 padding을 같이 부여해서 사용할 수 있다.)

Surface(
        modifier = Modifier.padding(5.dp)
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

2. 간단한 예제

Surface(
        border = BorderStroke(width = 2.dp, color = Color.Blue), // 테두리
        modifier = Modifier.padding(5.dp),
        elevation = 10.dp,  // 그림자
        shape = CircleShape,
        color = MaterialTheme.colors.secondary
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.padding(8.dp)
        )
    }

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Person

import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.dong.ui.theme.MyComposeStudyTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    textFieldContainer()
                }
            }
        }
    }
}
/*
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,(입력란 위에 표시되는 레이블)
    placeholder: @Composable (() -> Unit)? = null, (입력란에 힌트로 표시되는 텍스트)
    leadingIcon: @Composable (() -> Unit)? = null,  (왼쪽에 아이콘 지정)
    trailingIcon: @Composable (() -> Unit)? = null,  (오른쪽에 아이콘 지정)
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.TextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
 */

@Composable
fun textFieldContainer(){

    // 글자의 상태를 저장
    var userInput by remember {
        mutableStateOf(TextFieldValue())
    }

    var phoneNumberInput by remember {
        mutableStateOf(TextFieldValue())
    }

    var passwordInput by remember {
        mutableStateOf(TextFieldValue())
    }

    // 비밀번호 입력 textField에 우측 버튼을 누르면 입력한 내용이 보이고 안보이게 하기 위해
    var shouldShowPassword by remember {
        mutableStateOf(false)
    }

    // shouldShowPassword의 값에 따라 이미지를 지정
    val passwordResource : (Boolean) -> Int = {
        if(it) { // true
            R.drawable.baseline_visibility_24
        }else{
            R.drawable.baseline_visibility_off_24
        }
    }

    Column(
        Modifier
            .padding(16.dp)
            .fillMaxWidth()
        , verticalArrangement = Arrangement.SpaceEvenly
    ){
        // singleLine 지정ㅇㅇㅇㅇㅇ
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = userInput,
            singleLine = true, // 한 줄만 작성할 수 있도록
            onValueChange = { userInput = it }, // 유저가 입력한 값(it)을 remember에 저장
            label = { Text("singleLine") },
            placeholder = { Text("텍스트를 작성해주세요.")}
        )

        // maxLine 지정 
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = userInput,
            maxLines = 3,  // 최대 line수 지정
            onValueChange = { userInput = it },
            label = { Text("maxLine") },
            placeholder = { Text("텍스트를 작성해주세요.")}
        )

        // outLinedTextField
        // keyboard 옵션 지정 - number
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = phoneNumberInput,
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Phone), // 키보드 타입 지정
            onValueChange = { phoneNumberInput = it },
            label = { Text("OutlinedTextField(Number)") },
            placeholder = { Text("010-****-****")}
        )

        // outLinedTextField
        // keyboard 옵션 지정 - email
        // leadingIcon 적용 (TextField 왼쪽 아이콘)
        // trailingIcon 적용 (TextField 오른쪽 아이콘)
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = phoneNumberInput,
            singleLine = true,
            leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Email
                , contentDescription = null
            )},
            trailingIcon = { Icon( // 오른쪽에 Icon 지정
                imageVector = Icons.Default.CheckCircle
                , contentDescription = null
            )},
            keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Email), // 키보드 타입 지정
            onValueChange = { phoneNumberInput = it },
            label = { Text("OutlinedTextFiel(email))") },
            placeholder = { Text(" @ .com")}
        )

        // Button 추가
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth()
            ,value = phoneNumberInput
            ,singleLine = true
            ,leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Email
                , contentDescription = null
            )}
            ,trailingIcon = {
                IconButton(onClick = {

                }) {
                    Icon( // 오른쪽에 Icon 지정
                        imageVector = Icons.Default.CheckCircle
                        , contentDescription = null
                    )
                }
            }
            ,keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Email) // 키보드 타입 지정
            ,onValueChange = { phoneNumberInput = it }
            ,label = { Text("buttonIcon") }
            ,placeholder = { Text(" @ .com")}
        )

        // password
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth()
            ,value = passwordInput
            ,singleLine = true
            ,leadingIcon = { Icon(  // 왼쪽 Icon 지정
                imageVector = Icons.Default.Person
                , contentDescription = null
            )}
            ,trailingIcon = {
                IconButton(onClick = {
                    // 버튼이 눌려지면 비밀번호가 보이도록
                    shouldShowPassword = !shouldShowPassword
                }) {
                    Icon(painter = painterResource(
                        id = passwordResource(shouldShowPassword))
                        , contentDescription = null
                    )
                }
            }
            // 비밀번호가
            , visualTransformation = if(shouldShowPassword) VisualTransformation.None
                                     else PasswordVisualTransformation()
            ,keyboardOptions = KeyboardOptions(keyboardType =  KeyboardType.Password) // 키보드 타입 지정
            ,onValueChange = { passwordInput = it }
            ,label = { Text("password") }
            ,placeholder = { Text("password")}
        )

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeStudyTheme {
        textFieldContainer()
    }
}

• singleLine과 maxLine에 같은 입력을 넣었을 때 singleLine속성은 한 줄로 유지 되는 것을 확인할 수 있습니다. 반면 maxLine=3을 지정해 두었기에 최대 3줄 까지만 줄이 생성됩니다.

• 우측 눈 모양 버튼을 누르면 입력한 비밀번호가 보이는 것을 확인할 수 있습니다.
• VisualTransformation: shouldShowPassword가 true이면 VisualTransformation.None으로 설정하여 비밀번호를 보여주고, 그렇지 않으면 PasswordVisualTransformation()을 사용하여 비밀번호를 가려줍니다.

snackBar의 결과를 변수에 받아 처리하기

// 버튼 클릭시 코루틴 스코프 안에서 실행
        Button(onClick = {
            Log.d("snackBar", "snackBar: 스낵바 버튼 클릭")

            corutineScope.launch {
                // snackBar의 결과를 받을 수 있음
                // 이 결과는 스낵바가 닫아졌는지? 스낵바의 버튼이 눌러졌는지?
                val result = snackbarHostState.showSnackbar(
                    "snackBar show!!"
                    ,"확인"
                    , SnackbarDuration.Short // 스낵바 보여주는 시간
                )

                when(result){
                    SnackbarResult.Dismissed -> {
                        Log.d("snackBar", "snackBar: 스낵바 닫아짐")
                    }
                    SnackbarResult.ActionPerformed -> {
                        Log.d("snackBar", "snackBar: 확인 버튼 눌러짐")
                    }
                }
            }
        }) {
            Text(text = "스낵바 버튼")
        }

snackBar의 결과를 .let{ }으로 처리하기

// 버튼 클릭시 코루틴 스코프 안에서 실행
        Button(onClick = {
            Log.d("snackBar", "snackBar: 스낵바 버튼 클릭")

            corutineScope.launch {
                // snackBar의 결과를 받을 수 있음
                // 이 결과는 스낵바가 닫아졌는지? 스낵바의 버튼이 눌러졌는지?
                snackbarHostState.showSnackbar(
                    "snackBar show!!"
                    ,"확인"
                    , SnackbarDuration.Short // 스낵바 보여주는 시간
                ).let {
                    when(it){
                        SnackbarResult.Dismissed -> {
                            Log.d("snackBar", "snackBar: 스낵바 닫아짐")
                        }
                        SnackbarResult.ActionPerformed -> {
                            Log.d("snackBar", "snackBar: 확인 버튼 눌러짐")
                        }
                    }
                }
            }
        }) {
            Text(text = "스낵바 버튼")
        }

실습 코드

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.dong.ui.theme.MyComposeStudyTheme
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    snackBar()
                }
            }
        }
    }
}

@Composable
fun snackBar(){

    // var currentSnackbarData by mutableStateOf<SnackbarData?>(null)
    // 스낵바호스트를 클릭해 보면 위 와 같은 코드가 있다.
    // currentSnackbarData는 현재 스낵바가 떠 있으면 값이 들어오고 없으면 null이다.
    val snackbarHostState = remember {
        SnackbarHostState()
    }

    val corutineScope = rememberCoroutineScope()

    // 스낵바의 상태에 따라 버튼의 text를 변경하는 메서드이다.
    // SnackbarData에 접근하여 스낵바가 올라와 있는지 아닌지에 따라 text를 변경한다.
    val buttonTitle : (SnackbarData?) -> String = { snackbarData ->
        if(snackbarData != null){
            "스낵바 숨기기"
        } else{
            "스낵바 보여주기"
        }
    }

    val buttonColor : (SnackbarData?) -> Color = { snackbarData ->
        if(snackbarData != null){
            Color.Blue
        } else{
            Color.Red
        }
    }

    Box(
        modifier = Modifier.fillMaxSize()
        , contentAlignment = Alignment.Center
    ){

        // 버튼 클릭시 코루틴 스코프 안에서 실행
        Button(
            colors = ButtonDefaults.buttonColors(
                backgroundColor = buttonColor(snackbarHostState.currentSnackbarData)
                ,contentColor = Color.White
            )
            ,onClick = {
                Log.d("snackBar", "snackBar: 스낵바 버튼 클릭")

                // 스낵바가 이미 올라와 있는데 스낵바를 띄우는 버튼을 또 클릭하면 스낵바를 내린다.
                if(snackbarHostState.currentSnackbarData != null){
                    Log.d("snackBar", "snackBar: 이미 스낵바가 있음")
                    snackbarHostState.currentSnackbarData?.dismiss()
                    return@Button
                }

                corutineScope.launch {
                    // snackBar의 결과를 받을 수 있음
                    // 이 결과는 스낵바가 닫아졌는지? 스낵바의 버튼이 눌러졌는지?
                    snackbarHostState.showSnackbar(
                        "snackBar show!!"
                        ,"확인"
                        , SnackbarDuration.Short // 스낵바 보여주는 시간
                    ).let {
                        when(it){
                            SnackbarResult.Dismissed ->
                                Log.d("snackBar", "snackBar: 스낵바 닫아짐")

                            // 스낵바에 있는 버튼이 눌러졌을 때 로직처리 하는 부분
                            SnackbarResult.ActionPerformed ->
                                Log.d("snackBar", "snackBar: 확인 버튼 눌러짐")

                        }
                    }
                }
        }) {
            Text(buttonTitle(snackbarHostState.currentSnackbarData))
        }

        // 스낵바가 보여지는 부분은 따로 지정해 주어야 함
        SnackbarHost(hostState = snackbarHostState
            , modifier = Modifier.align(Alignment.BottomCenter))
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeStudyTheme {
        snackBar()
    }
}

• 위 예제 코드 주석에 설명 되어 있듯이 스낵바가 나타나 있는 상태에서 스낵바 버튼을 한 번 더 눌러보면 스낵바가 사라지는 것을 확인할 수 있습니다.
• 코루틴을 사용함으로써 스낵바를 보여주는 비동기 작업을 수행하도록 했습니다.

• val mutableState = remember { mutableStateOf(default) }
• var value by remember { mutableStateOf(default) }
• val (value, setValue) = remember { mutableStateOf(default) }

    // 체크 박스 상태
    var checkedStatus_1 = remember {
        mutableStateOf(false)
    }

    // by로 지정하면 .value를 붙일 필요 없음
    var checkedStatus_2 by remember {
        mutableStateOf(false)
    }

    // 데이터를 가져올떄는 checkedStatus_3를 사용
    // 데이터를 지정할때 setValue3 사용
    val (checkedStatus_3, setValue3) = remember{
        mutableStateOf(false)
    }

        // val mutableState = rember{ }
        Checkbox(
            checked = checkedStatus_1.value
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                checkedStatus_1.value = it // check box가 눌려지면 그 상태를 저장
        })                

        // var value by rember{ }
        // 속성을 위임 -> value가 프로퍼티인 것 처럼 사용
        Checkbox(
            checked = checkedStatus_2
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                checkedStatus_2 = it
        })

        // val (value, setValue) = remember
        Checkbox(
            checked = checkedStatus_3
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                setValue3.invoke(it) // invoke
        })

• 위 3가지 방법 모두 단순 CheckBox의 상태를 저장&기억하기 위한 코드입니다. by를 사용하면 .value를 붙이지 안아도 된다는 장점이 있습니다.

CheckBox Color

var checkedStatus_4 by remember {
        mutableStateOf(false)
    }

// color 지정
        /**
        checkedColor: Color = MaterialTheme.colors.secondary, (체크 상태의 색)
        uncheckedColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f), (체크 되지 않은 상태 색- 테두리만 색이 적용)
        checkmarkColor: Color = MaterialTheme.colors.surface, (체크 마커 색)
        disabledColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
        disabledIndeterminateColor: Color = checkedColor.copy(alpha = ContentAlpha.disabled)
         */
        Checkbox(
            checked = checkedStatus_4
            , colors = CheckboxDefaults.colors(
                checkedColor = Color.Red
                , uncheckedColor = Color.Blue
                , checkmarkColor = Color.Green
            )
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                checkedStatus_4 = it
            })

CheckBox With Title

Row(
            modifier = Modifier
                .background(Color.LightGray)
                .fillMaxWidth()
                .padding(horizontal = 30.dp)
            , horizontalArrangement = Arrangement.spacedBy(10.dp)
            , verticalAlignment = Alignment.CenterVertically
        ) {
            // val mutableState = rember{ }
            Checkbox(
                checked = checkedStatus_1.value
                , onCheckedChange = {
                    Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                    checkedStatus_1.value = it // check box가 눌려지면 그 상태를 저장
                })

            Text(text = "1번 CheckBox")
        }

• 다음 코드는 Row안에 CheckBox와 Text를 함께 넣은 코드입니다. 하나의 컬럼에 위 코드와 같이 Row( …. )로 만든 CheckBox와 Title을 여러개 만든다면 코드의 가독성이 떨어질 것입니다. CheckBox와 Title을 담고 있는 @Composable을 생성하여 사용한다면 위 문제를 해결할 수 있습니다.

CheckBox 실습

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.dong.study.ui.theme.MyComposeStudyTheme

class CheckBoxActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeStudyTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    checkBoxContainer()
                }
            }
        }
    }
}

/**
checked: Boolean,  (체크 상태)
onCheckedChange: ((Boolean) -> Unit)?, (체크 상태 변경 콜백 이벤트 발생)
modifier: Modifier = Modifier,
enabled: Boolean = true,  (체크 가능 여부)
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors() (체크박스 색)
**/

@Composable
fun checkBoxContainer() {

    var checkedStatus_1 = remember { mutableStateOf(false) }
    var checkedStatus_2 = remember { mutableStateOf(false) }
    var checkedStatus_3 = remember { mutableStateOf(false) }

    // 1,2,3번 check박스 status를 를 배열에 넣어 관리
    val checkedStatesArray = listOf(
        checkedStatus_1
        ,checkedStatus_2
        ,checkedStatus_3
    )

    // checkedStatesArray의 모든 객체(체크박스 1,2,3)이 모두 체크가 된 상태라면? => 모두 동의 체크박스도 체크
    // all 함수 : 해당 Array의 모든 객체 상태를 살펴 볼 수 있다.
    // val checkedStatusForForth : Boolean = checkedStatesArray.all { it.value == true }
    val checkedStatus_4 : Boolean = checkedStatesArray.all { it.value }

    // 모두 동의 체크박스에 이 이벤트를 등록시킨다.
    // 모두 동의 체크박스의 상태에 따라 나머지 3개의 체크박스의 상태가 동일하게 변경된다.
    val allBoxChecked : (Boolean) -> Unit = { isAllBoxChecked ->
        Log.d("checkBoxActivity", "checkBoxContainer: $isAllBoxChecked")

        checkedStatesArray.forEach {
            it.value = isAllBoxChecked
        }
    }

    Column(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
        , verticalArrangement = Arrangement
            .spacedBy(10.dp, Alignment.CenterVertically)
        , horizontalAlignment = Alignment.CenterHorizontally

    ) {

        CheckBoxWithTitle(title = "1번 CheckBox", checkedStatus_1)
        CheckBoxWithTitle(title = "2번 CheckBox", checkedStatus_2)
        CheckBoxWithTitle(title = "3번 CheckBox", checkedStatus_3)

        Spacer(modifier = Modifier.height(10.dp))

        // 해당 버튼이 눌렸을때 이벤트 동작 : allBoxChecked
        AllAgreeCheckBox(title = "모두 동의 하시겠습니까?", checkedStatus_4, allBoxChecked)
    }
}

// CheckBox with Title - 모두 동의 CheckBox
@Composable
fun AllAgreeCheckBox(title:String
                     ,shouldChecked: Boolean
                     ,allBoxChecked : (Boolean) -> Unit
) {
    Row(
        modifier = Modifier
            .background(Color.LightGray)
            .fillMaxWidth()
            .padding(horizontal = 30.dp)
        , horizontalArrangement = Arrangement.spacedBy(10.dp)
        , verticalAlignment = Alignment.CenterVertically
    ) {

        Checkbox(
            checked = shouldChecked
            , colors = CheckboxDefaults.colors(
                checkedColor = Color.Red
                , uncheckedColor = Color.Red
                , checkmarkColor = Color.Green
            )
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                allBoxChecked(it)
            })

        Text(text = title)
    }
}

// CheckBox with Title 모듈
@Composable
fun CheckBoxWithTitle(title:String, checkedStatus: MutableState<Boolean>){
    Row(
        modifier = Modifier
            .background(Color.LightGray)
            .fillMaxWidth()
            .padding(horizontal = 30.dp)
        , horizontalArrangement = Arrangement.spacedBy(10.dp)
        , verticalAlignment = Alignment.CenterVertically
    ) {

        Checkbox(
            checked = checkedStatus.value
            , onCheckedChange = {
                Log.d("CheckBoxActivity", "checkBoxContainer: $it")
                checkedStatus.value = it // check box가 눌려지면 그 상태를 저장
            })

        Text(text = title)
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview5() {
    MyComposeStudyTheme {
        checkBoxContainer()
    }
}

• 모두 동의 하시겠습니까? 버튼을 누르면 나머지 1, 2, 3번 체크박스도 상태가 동일하게 변경되는 것을 확인할 수 있습니다.

• 1, 2, 3번 체크박스를 모두 클릭하면 모두 동의 하시겠습니까? 체크 박스가 클릭 상태로 변경되는 것을 확인할 수 있습니다.
• 1, 2, 3번 체크박스가 모두 체크된 상태에서 하나를 unCheck 상태로 변경한다면 모두 동의 하시겠습니까? 체크 박스도 unCheck 상태로 변경되는 것을 확인할 수 있습니다.