[Kotlin / Compose] CheckBox, TopAppBar

Compose를 사용해서 CheckBox 만들기

☝🏻 기존의 안드로이드 레거시 뷰와 Jetpack Compose에서 Checkbox의 다른점
기존의 안드로이드 레거시 뷰에서는 체크박스의 상태를 사용자가 체크박스를 탭할 때마다 체크 상태가 토글 되었다.
Jetpack Compose에서는 이러한 동작을 명시적으로 정의해야 하며 Checkbox의 상태는 checked 매개변수를 통해 제어기에 checked 값이 변경되지 않으면 Checkbox의 상태가 업데이트 되지 않는다.
💥 Compose에서 Checkbox의 동작을 제어하기 위해서는 onCheckedChange 매개변수에 상태 변경에 대한 로직을 포함하는 콜백 함수를 제공해야 하며 이 콜백 함수에서 Checkbox의 상태를 업데이트 하고 필요한 작업을 수행할 수 있다.

Checkbox(checked = false, onCheckedChange = {})

• checked : Checkbox 현재 상태를 나타내며, true이면 체크된 상태를, false이면 체크되지 않은 상태를 나타낸다.
• onCheckedChange : Checkbox의 상태가 변경될 때 호출되는 함수이며, 이 함수에는 체크박스가 새로운 상태로 변경 될 때 호출되어야 할 작업이 포함된다.

💡 체크박스가 Ex1은 동작하지 않고, Ex2는 정상적으로 동작하는 이유
Ex1에서는 checked 변수를 토글하여 상태를 변경하고 있다. 이럴 경우 Compose에게 변경 사항을 알리지 않기 때문에 Checkbox의 상태가 업데이트되지 않고 UI가 갱신되지 않는다.
☝🏻 Compose에서는 UI 상태를 직접적으로 변경하는 것이 아니라 상태를 변경하고 Compose에게 UI를 다시 그리도록 요청해야 한다.
✨ Compose의 상태 관리 기능 중 하나인 mutableStateOf를 사용하여 상태를 관리하고, 이를 통해 Checkbox의 상태를 변경해야한다. 그러면 상태가 변경될 때마다 자동으로 UI를 업데이트할 것이다.

// Ex1 
@Composable
fun CheckBoxEx() {
	var checked = false
	Checkbox(checked = checked,
		onCheckedChange = {
		checked = !checked
	})
}

// Ex2
@Composable
fun CheckBoxEx() {
	var checked = remember {mutableStateOf(false)}
	Checkbox(checked = checked.value,
		onCheckedChange = {
		checked.value = !checked.value
	})
}

• remember : Jetpack Compose에서 상태를 관리하기 위한 함수 중 하나로, Composable 함수 내에서 상태를 보존하고 다시 사용할 수 있도록 한다.
  • Composable 함수가 다시 호출될 때마다 상태가 재생성되는 것이 아니라 이전에 저장된 상태가 재사용되므로 UI가 지속적으로 일관되게 유지될 수 있다.
  • remember 함수가 반환하는 객체는 상태가 변경될 때마다 Composable 함수를 다시 렌더링하도록 구성되므로 상태가 변경될 때마다 UI가 업데이트된다.

delegated properties

delegated properties는 프로퍼티의 getter와 setter를 다른 객체에 위임할 수 있다.
아래의 코드는 checked변수에 대한 getter와 setter를 remember 함수가 반환하는 객체에 위임한다는 것을 의미하며, by 키워드를 사용하여 이 객체에 checked 변수의 getter와 setter를 위임한다.

@Composable
fun CheckBoxEx() {
  var checked by remember { mutableStateOf(false) }
  Checkbox(checked = checked,
    onCheckedChange = {
    checked = !checked
  })
}

val (getter, setter) 부분에서 반환 된 객체를 해제하여 getter와 setter라는 두 개의 변수에 할당한다.

@Composable
fun CheckBoxEx() {
  val (getter, setter) = remember { mutableStateOf(false) }
  Checkbox(
    checked = getter,
    onCheckedChange = setter
    )
}

Compose를 사용해서 TopAppBar 만들기

Jetpack Compose에서 TopAppBar를 선언 시 빨간줄과 함께 다음의 메세지가 나타나고 있다.
실험용 foundation API를 사용했을 때 발생하는 경고로 @OptIn(ExperimentalMaterial3Api::class)를 선언해주면 해결되는데, 실험용 foundation API는 삭제되거나 변경될 수 있으므로 고려해서 사용해야 한다.

This material API is experimental and is likely to change or to be removed in the future.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarEx(name: String) {
    Column {
        TopAppBar(
            title = { Text(text = "TopAppBar") },
            navigationIcon = {
                IconButton(onClick = {}) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = ""
                    )
                }
            },
            actions = {
                IconButton(onClick = {}) {
                    Icon(
                        imageVector = Icons.Filled.Search,
                        contentDescription = "검색"
                    )
                }
                IconButton(onClick = {}) {
                    Icon(
                        imageVector = Icons.Filled.Settings,
                        contentDescription = "설정"
                    )
                }
                IconButton(onClick = {}) {
                    Icon(
                        imageVector = Icons.Filled.AccountBox,
                        contentDescription = "계정"
                    )
                }
            }
        )
        Text(text = "Hello $name!")
    }
}

• TopAppBar : Material Design의 Top App Bar를 나타내는 Composable로, 맨 위에 앱의 제목이나 다양한 액션을 표시할 수 있는 AppBar를 만든다.
  • title : AppBar에 표시될 제목을 설정한다.
  • navigationIcon : AppBar 왼쪽에 표시될 아이콘을 설정한다.
  • actions : AppBar 오른쪽에 표시될 액션 아이콘들을 설정한다.
• IconButton : 눌렀을 때 특정 작업을 수행할 수 있는 아이콘을 나타내는 Composable이다.
  • onClick : 아이콘을 클릭했을 때 수행될 동작을 설정한다.
• Icon : 아이콘을 나타내는 Composable이다.
  • ImageVector : 표시될 아이콘을 설정한다.
  • contentDescription : 아이콘의 내용을 설명하는 문자열을 설정한다.