Android CheckBox (회원가입 화면)

· CheckBox의 체크 유무에 따른 버튼 활성/비활성화

 

 

 

1) CheckBox 설정

 

- 안드로이드에서 제공하는 기본 체크박스 대신 각자 원하는 스타일의 체크박스 만들기

- 먼저 drawable 파일에 자신이 원하는 체크박스의 이미지(체크 되었을때/안되었을때) 2개를 넣어준다

- 이후 drawabe 파일에 체크박스 resource파일을 만들어준다

- 액티비티의 xml 파일에 CheckBox를 삽입하고 button 속성에 이전에 만들어 주었던 drawable파일을 삽입한다.

        <CheckBox
            android:id="@+id/checkbox_condition1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@drawable/custom_checkbox" />

 

 

2) CheckBox에 리스너를 달아준다.

 

        val listener = CompoundButton.OnCheckedChangeListener { compoundButton, isChecked ->
            if (isChecked){
            //체크되었을 때 동작
                when(compoundButton.id){
                    R.id.checkbox_psersonal_info -> condition1 = true
                    R.id.checkbox_service_legacy -> condition2 = true
                }
            } else {
            //체크 해제되었을 때 동작
                when(compoundButton.id){
                    R.id.checkbox_psersonal_info -> condition1 = false
                    R.id.checkbox_service_legacy -> condition2 = false
                }
            }
        }

- checkbox_personal_info, checkbox_service_legacy의 이름을 가진 두개의 체크박스를 만들어 주었다.
- 리스너라는 변수를 만들어 CompoundButton 클래스에 있는 OnCheckedChangeListener를 직접 구현해서 각각 체크박스에 달아줄 것이다.

- when문을 통해서 어떤 체크박스가 이 listener로 전달되는지 확인하는 코드를 작성한다.

- 첫번째 파라미터인 compoundButton은 위젯자체이기 때문에 compounButton.id로 체크박스의 id에 접근가능하다.

- 각각의 체크박스가 체크 되었을 때/ 체크 해제되었을 때의 동작을 설정해주었다.

(condition1, condition2 라는 변수를 전역을 설정해주고 체크가 되면 true 해제되면 false로 바꾸었다)

 

3) 이후 각 체크박스에 setOnCheckedChangeListener를 달아주고 사용할 리스너인 listener 변수를 괄호 안에 입력해준다.

 

        checkbox_psersonal_info.setOnCheckedChangeListener(listener)
        checkbox_service_legacy.setOnCheckedChangeListener(listener)

 

- 만약 체크박스의 개수가 적다면 아래 코드처럼 체크박스에 직접 setOnCheckedChangeListener를 달아줘도 된다. listener변수를 만들어줬던 것은 체크박스 여러개를 생성할 때 중복코드를 줄이기 위해서

        checkbox_psersonal_info.setOnCheckedChangeListener { compoundButton, isChecked ->
            if (isChecked){
                condition1 = true
            } else {
                condition1 = false
            }
            activationNextButton()
        }

 

 

4) 두 체크박스가 모두 체크 되면 버튼이 활성화되게 설정

 

    fun activationNextButton(){

        if (condition1  && condition2) {
            button_next.setBackgroundResource(R.drawable.button_round_yellow)
            button_next.isEnabled = true

            button_next.setOnClickListener {
                startActivity(Intent(this, MainActivity::class.java))
            }
        } else {
            button_next.setBackgroundResource(R.drawable.button_round_gray)
            button_next.isEnabled = false
        }
    }

- condition1, condition2변수가 모두 true일 때만 버튼이 활성화 되고 이외에는 비활성화 되게 바꾸었다.

- 버튼이 활성화될 때, 비활성화될 때의 색도 바꿔주었다.

 

 

5) 위에서 만들었던 리스너 변수 안에 activationNextButton을 넣어준다.

 

    fun checkCondition(){

        val listener = CompoundButton.OnCheckedChangeListener { compoundButton, isChecked ->
            if (isChecked){
                //체크 되었을 때의 동작
                when(compoundButton.id){
                    R.id.checkbox_psersonal_info -> condition1 = true
                    R.id.checkbox_service_legacy -> condition2 = true
                }
                activationNextButton()
            } else {
                //체크 해제 되었을 때의 동작
                when(compoundButton.id){
                    R.id.checkbox_psersonal_info -> condition1 = false
                    R.id.checkbox_service_legacy -> condition2 = false
                }
                activationNextButton()
            }
        }

        checkbox_psersonal_info.setOnCheckedChangeListener(listener)
        checkbox_service_legacy.setOnCheckedChangeListener(listener)

    }