[Android, Kotlin] compose로 custom checkbox 만들기

 

이번에 design system을 만드는 작업을 하고 있었는데 checkbox를 만들어야 할 일이 있었다.

이번에 필자 같은 경우 말고도 다른 프로젝트를 할 때에도 checkbox를 사용해야 할 일이 있을 것이다.

하지만 기본 checkbox의 모양으로는 만족스럽지 못한 경우도 있을 것이다.

 

그래서 이번에 필자는 custom checkbox를 만들어 보았다.

필자가 checkbox를 어떻게 만들었는지 코드를 통해 확인해 보자.

 

1. custom checkbox를 만들기 위한 준비물(?)

일단 처음 만들 때 필자는 custom dialog를 만들기 위해 무엇이 필요한지 생각해 보았다.

그래서 하나의 결론에 도달했다!

check 되었을 때의 checkbox layout, check 되지 않았을 때의 checkbox layout

사실 저 두 개만 있으면 만들기 쉬운 component라 이번에 처음이었던 필자도 쉽게 만들었던 것 같다.

이제 준비물(?)을 알았으니 진짜로 코드로 확인해 보자.

 

2. custom checkbox 코드

먼저 check 된 경우와 그렇지 않은 경우의 checkbox ui를 만들어 주겠다.

@Composable
private fun CheckBoxSelected() {
    Box(
        modifier = Modifier
            .size(24.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(Theme.colors.primary10),
        contentAlignment = Alignment.Center
    ) {
        CheckIcon(contentDescription = "check icon")
    }
}

@Composable
private fun CheckBoxUnSelected() {
    Box(
        modifier = Modifier
            .size(24.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(Theme.colors.background)
            .border(
                width = 1.dp,
                color = Theme.colors.neutral30,
                shape = RoundedCornerShape(10.dp)
            ),
    )
}

check 된 경우에는 중앙에 check icon이 들어간 형태로 만들었고, check 되지 않은 경우에는 흰 바탕에 회색 border를 생성해 주었다.

색상은 여러분의 자유이지만 현재 필자는 직접 만든 theme를 사용 중이기에 여러분들과 코드가 다를 수가 있다.(나중에 시간이 되면 custom theme에 관련된 것도 올려보겠습니다.)

위의 두 개로 해주지 않고 여러분들이 직접 custom 해서 만들어도 상관없다.

이제 다음에는 checkbox code를 확인해 보자.

 

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun CheckBox(
    modifier: Modifier = Modifier,
    checked: Boolean = false,
    onCheckedChange: (Boolean) -> Unit
) {
    var checkBoxState by remember { mutableStateOf(checked) }

    Card(
        modifier = modifier
            .size(24.dp),
        shape = RoundedCornerShape(10.dp),
        onClick = {
            checkBoxState = !checkBoxState
            onCheckedChange(checkBoxState)
        },
        elevation = 0.dp
    ) {
        if (checkBoxState) CheckBoxSelected()
        else CheckBoxUnSelected()
    }
}

click listener로 상태를 바꾸고, 클릭 이펙트인 ripple effect가 적용되어 있는 card composable function을 사용해 주었다.

이 부분도 여러분의 취향에 따라 만약 ripple effect가 필요하지 않은 경우에는 box composable function을 이용해 modifier clickable을 이용해도 된다.

또한 elevation이 0dp인데 왜 param을 정의해 놓았냐면 card에 기본적으로 1dp가 적용되어 있는데 필자는 elevation이 없는 checkbox를 만들고 싶었다.

 

card 혹은 box로 틀을 만들어주고 나면 content 안에 위에 생성한 checkBoxState를 이용해 state에 따라 이전에 만들어둔 ui로 변경되게 해 주었다.

 

3. 실행 화면

실행 화면을 보자(왼쪽이 custom, 오른쪽이 basic)

혹시 궁금해할 여러분들을 위해 코드도 올려주겠다.

var checkState by remember { mutableStateOf(true) }
var basicCheckState by remember { mutableStateOf(false) }

Row {
    DotoriCheckBox(
        modifier = Modifier.padding(40.dp),
        checked = checkState,
        onCheckedChange = { checkState = it }
    )

    Checkbox(
        modifier = Modifier.padding(top = 40.dp),
        checked = basicCheckState,
        onCheckedChange = { basicCheckState = !basicCheckState }
    )
}

Text(
    modifier = Modifier.fillMaxWidth(),
    text = "checkbox checkState: $checkState",
    style = DotoriTheme.typography.body,
    textAlign = TextAlign.Center,
    color = DotoriTheme.colors.neutral10
)

참고로 전체 코드가 아니고 checkbox 쪽 코드이다(사실 전체라고 해봤자 그냥 row 밖에 column밖에 달 게 없다 ㅋㅋ;;)

 

정리

• 이렇게 custom checkbox를 만들어 보았는데 생각보다 쉽다! 여러분들도 할 수 있다!
• 현재 포스팅은 checkbox에 대한 설명을 위해 코드 기능적 부분은 설명을 안 했는데 궁금한 것이 있으면 댓글로 알려주시면 최대한 빠르게 답변해 드리겠습니다.(사실 기능적인 부분도 별로 없다 ㅋㅋ)
• 이 방법 말고도 더 좋은 방법이나 또 다른 생각을 가지고 계신 분들도 댓글로 알려주시면 필자에게도 좋은 공부가 될 것 같다 XD