Checkbox

매개변수

• checked: 체크 상태값
• onCheckedChange: 체크 상태 변경 콜백 이벤트
• enabled: 체크 가능 여부
• colors: 색 지정
  • checkedColor: 체크된 상태 색
  • uncheckedColor: 체크되지 않은 상태(테두리 색)
  • checkmarkColor: 체크된 상태의 체크모양 색
  • disabledCheckedColor: enabled=false일때 색

val checkedStatusForFirst = remember { mutableStateOf(false) }
var checkedStatusForSecond by remember { mutableStateOf(false) }
val (checkedStatusForThird, setCheckedStatusForThird) = remember { mutableStateOf(false) }

Checkbox(
    checked = checkedStatusForFirst.value,
    onCheckedChange = { isChecked ->
        checkedStatusForFirst.value = isChecked
    }
)
Checkbox(
    enabled = false,
    checked = checkedStatusForSecond,
    onCheckedChange = { isChecked ->
        checkedStatusForSecond = isChecked
    }
)
Checkbox(
    colors = CheckboxDefaults.colors(
        checkedColor = Color.Red, // 체크된 상태 색
        uncheckedColor = Color(0xFFB39DDB), // 체크되지 않은 상태(테두리 색)
        checkmarkColor = Color.Black, //  체크된 상태의 체크모양 색
        disabledCheckedColor = Color.Yellow, // enabled = false일 때 색
    ),
    checked = checkedStatusForThird,
    onCheckedChange = { isChecked ->
        setCheckedStatusForThird.invoke(isChecked)
    }
)

---

체크박스 전체 처리

• 개별 체크박스 상태 처리 후 전체 체크박스에 해당하는 값을 array로 묶어 all을 활용하여 처리
  (all: collection내 모든 값에 대한 조건문이 true이면 true반환, 아니면 false반환)

val checkedStatus1 = remember { mutableStateOf(false) }
val checkedStatus2 = remember { mutableStateOf(false) }
val checkedStatus3 = remember { mutableStateOf(false) }
val checkedStatusArray = arrayOf (
    checkedStatus1,
    checkedStatus2,
    checkedStatus3,
)

val checkedStatusForAll = checkedStatusArray.all { it.value }
val allBoxCheck: (Boolean) -> Unit = { isChecked ->
    checkedStatusArray.forEach {
        it.value = isChecked
    }
}

...

CheckBoxMutableState("1번 확인사항", checkedStatus1)
CheckBoxMutableState("2번 확인사항", checkedStatus2)
CheckBoxMutableState("3번 확인사항", checkedStatus3)
Spacer(modifier = Modifier.height(10.dp))
CheckBoxDelegate("모두 동의하십니까?", checkedStatusForAll, allBoxCheck)

...

@Composable
fun CheckBoxMutableState(title: String, checkedStatus: MutableState<Boolean>) {
    Row(
        modifier = Modifier
            .padding(horizontal = 30.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = checkedStatus.value,
            onCheckedChange = { isChecked ->
                checkedStatus.value = isChecked
            }
        )
        Text(text = title)
    }
}

@Composable
fun CheckBoxDelegate(title: String, checkedStatus: Boolean, onCheckedChange: (Boolean) -> Unit) {
    Row(
        modifier = Modifier
            .padding(horizontal = 30.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = checkedStatus,
            onCheckedChange = onCheckedChange
        )
        Text(text = title)
    }
}

---

Custom Checkbox

• Checkbox로 Custom할 수 없음
• Image를 활용
  • painter: Checkbox 이미지, paintResource의 id값에 R.drawable값 부여
  • contentDescription: image에 대한 설명
  • Modifier.clickable
    • indication: 리플 설정(클릭할 때 애니메이션), rememberRipple내에 값 부여, 제거하려면 null

var isChecked by remember { mutableStateOf(false) }
val togglePainter = if (isChecked) R.drawable.ic_checked else R.drawable.ic_unchecked

Image(
    modifier = Modifier.clickable(
        indication = rememberRipple ( // 클릭할 때 애니메이션(리플), 제거하려면 null
            radius = 20.dp
        ),
        interactionSource = remember { MutableInteractionSource() }
    ) {
        isChecked = !isChecked
    },
    painter = painterResource(id = togglePainter),
    contentDescription = null
)

• Image에서 리플을 처리하면 Image 크기 내에서만 리플 설정 가능
• 리플 크기를 키울려면 Image를 Box로 감싸서 Box에서 clickable 설정

var isChecked by remember { mutableStateOf(false) }
val togglePainter = if (isChecked) R.drawable.ic_checked else R.drawable.ic_unchecked

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .size(60.dp)
        .clickable(
            indication = rememberRipple ( // Image에 값을 주면 리플이 이미지 크기만큼만 떠서 제대로 나타나지 않음. 밖을 Box로 감싸서 처리
                radius = 20.dp, // 리플 크기
                bounded = false, // false이면 리플이 중앙에서 시작, true면 누른 위치에서 시작
                color = Color.Blue, // 리플 색
            ),
            interactionSource = remember { MutableInteractionSource() }
        ) {
            isChecked = !isChecked
        },
) {
    Image(
        painter = painterResource(id = togglePainter),
        contentDescription = null
    )
}