코틀린으로 안드로이드 체크박스(Check Box) 한방에 끝내기!

안녕하세요, 반갑습니다!

 

지난번에는 여러개 중에 단 하나만 선택해야 하는 Radio Button 에 대해 다뤄봤습니다.

하지만 한 개 이상을 선택해야 할 때도 있겠죠?

 

그래서 오늘은, 다중선택을 할 수 있는 그 기능!

 

 

체크 박스(Check Box)

 

 

 

바로 만들어보겠습니다.

각 체크박스를 클릭하면 체크됨과 함께 각 체크박스의 글자 색이 변경되도록 했습니다.

그리고 해당 체크박스의 Text가 Toast 로 출력됩니다.

 

1. .xml 파일에 체크박스(Check Box) 배치하기

LinearLayout 안에 5개의 체크박스(Check Box)를 만들어 넣었습니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="소유한 게임을 선택하세요"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2" />

    <CheckBox
        android:id="@+id/cb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="위쳐3"
        android:textColor="@color/ltGray"/>

    <CheckBox
        android:id="@+id/cb2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Potal 2"
        android:textColor="@color/ltGray"/>
        
        .
        .
        .

</LinearLayout>

 

 

2. 체크박스(Check Box) 에 Listener() 연결하기

체크박스(Check Box)의 터치 이벤트를 감지하는 setOnCheckChangeListener()는 라디오 버튼에서 사용한 것과 동일합니다.

체크박스(Check Box)는 체크된 상태와 체크가 해제된 상태 둘 모두를 처리해야 합니다.

cb1.setOnCheckedChangeListener { buttonView, isChecked ->
    if (isChecked) { checkedToast(cb1) }
    else { unCheckedToast(cb1) }
}

이 코드를 각 체크박스(Check Box) 에 연결 할 수 있습니다.

 

이제 각 체크박스를 선택하면 글자색이 변경되고 해당 체크박스의 글자가 Toast로 출력됩니다.

그런데!

이렇게 하면 체크박스(Check Box) 개수가 많아질수록 코드 역시 길어집니다.

모두 똑같은 Listener 를 연결하는데, 조금 더 단순히 할 순 없을까요?

 

3. 체크박스(Check Box) 코드 확! 줄이기

이 setOnCheckChangeListener() 는 부모클래스인 CompoundButton 을 상속받습니다.

그래서 체크박스(Check Box)뿐만아니라 스위치, 토글버튼, 라디오 버튼 등 모두 사용가능합니다.

 

그래서 체크박스도 아래와 같이 작성해서 코드를 확! 줄일 수 있습니다.

var listener = CompoundButton.OnCheckedChangeListener { buttonView, isChecked ->
    if (isChecked) {
        when(buttonView.id) {
            R.id.cb1 -> { checkedToast(cb1) }
            R.id.cb2 -> { checkedToast(cb2) }
            R.id.cb3 -> { checkedToast(cb3) }
            R.id.cb4 -> { checkedToast(cb4) }
            R.id.cb5 -> { checkedToast(cb5) }
        }
    }
    else {
        .
        .
        .
    }
}

이렇게 부모 클래스의 CompundButton 로 Listener 를 만들어줍니다.

그리고 isChecked 파라미터로 전달된 체크 상태에 따라 분기 처리합니다.

 

어떤 체크박스(Check Box)가 체크된 것인지도 알아야겠죠?

when() 으로 각 체크박스(Check Box) 의 아이디를 가져옵니다.

 

마지막으로 각 체크박스(Check Box) 에 이 Listener를 연결해주면 됩니다

cb1.setOnCheckedChangeListener(listener)
cb2.setOnCheckedChangeListener(listener)
cb3.setOnCheckedChangeListener(listener)
cb4.setOnCheckedChangeListener(listener)
cb5.setOnCheckedChangeListener(listener)

 

완성입니다!

 

이제 앱을 실행해보세요.

어떠신가요? 정확하게 작동하나요?

어떻게 보면 각 체크박스(Check Box) 에 Listener 를 연결해주는 것이 쉬워보일 수 있지만,

그 양이 많아 질수록 Listener를 따로 만들어 처리하는 것이 훨씬 가독성이 좋고 코드의 양도 줄일 수 있습니다.

 

 

 

감사합니다.