[29일차 Android] CheckBox와 RadioButton

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 CheckBox

• 선택할 수 있는 항목 들을 제공하고 체크를 통해 선택할수 있도록 하는 View
• 다수의 CheckBox 동시 선택 가능

주요 속성

속성	설명
text	CheckBox에 표시되는 문자열을 설정
checked	체크 상태를 설정(true - 체크 됨 / false - 체크 안됨)

주요 프로퍼티

프로퍼티	설명
isCkecked	체크 박스의 현제 체크 값

주요 메서드

메서드	설명
toggle	현재 체크 상태를 반전시킨다.

주요 이벤트

이벤트	설명
checkedChange	체크 상태가 변경되는 이벤트

---

📖 RadioButton

• 하나의 그룹 안에서 하나만 선택할 수 있도록 하는 View

주요 속성

속성	설명
text	RadioButton에 표시되는 문자열 설정
checked	체크 상태를 설정. RadioButton은 그룹 내에서 반드시 하나는 선택되어 있는 상태로 제공되는 목적으로 사용하는 View 이므로 반드시 하나는 체크해야 한다.

RadioButton 주요 프로퍼티

프로퍼티	설명
isChecked	RadioButton 체크 상태 값. 체크 상태 설정 시 같은 그룹 내의 RadioButton은 모두 체크가 해제된 상태가 된다.

RadioGroup 주요 프로퍼티

프로퍼티	설명
checkedRadioButtonId	그룹 내에서 선택되어 있는 RadioButton의 id

RadioGroup 주요 이벤트

이벤트	설명
checkedChange	그룹 내의 RadioButton의 체크 상태가 변경되었을 때

---

📖 예제 코드

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="체크박스1"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <CheckBox
                android:id="@+id/checkBox2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="체크박스2"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <CheckBox
                android:id="@+id/checkBox3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="체크박스3"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <RadioGroup
                android:id="@+id/radioGroup1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:checkedButton="@id/radioButton">

                <RadioButton
                    android:id="@+id/radioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 1-1"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />

                <RadioButton
                    android:id="@+id/radioButton2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 1-2"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />

                <RadioButton
                    android:id="@+id/radioButton3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 1-3"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />
            </RadioGroup>

            <RadioGroup
                android:id="@+id/radioGroup2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:checkedButton="@id/radioButton4">

                <RadioButton
                    android:id="@+id/radioButton4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 2-1"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />

                <RadioButton
                    android:id="@+id/radioButton5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 2-2"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />

                <RadioButton
                    android:id="@+id/radioButton6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="라디오 2-3"
                    android:textAppearance="@style/TextAppearance.AppCompat.Large" />
            </RadioGroup>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

 

 

 

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.test.android18_compoundcomponent.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)


        activityMainBinding.run{
            button.run{
                setOnClickListener {
                    checkBox.isChecked = true
                    checkBox2.isChecked = true
                    checkBox3.isChecked = true

                    radioGroup1.check(R.id.radioButton3)
                    radioGroup2.check(R.id.radioButton6)
                }
            }

            button2.run {
                setOnClickListener {
                    checkBox.isChecked = false
                    checkBox2.isChecked = false
                    checkBox3.isChecked = false
                }
            }

            button3.run{
                setOnClickListener {
                    checkBox.toggle()
                    checkBox2.toggle()
                    checkBox3.toggle()
                }
            }

            button4.run {
                setOnClickListener {
                    textView.text = ""

                    if (checkBox.isChecked == true){
                        textView.append("첫번째 체크박스는 체크 되어 있습니다\n")
                    } else {
                        textView.append("첫번째 체크박스는 체크 되어 있지 않습니다\n")
                    }

                    if (checkBox2.isChecked == true){
                        textView.append("두번째 체크박스는 체크 되어 있습니다\n")
                    } else {
                        textView.append("두번째 체크박스는 체크 되어 있지 않습니다\n")
                    }

                    if (checkBox3.isChecked == true){
                        textView.append("세번째 체크박스는 체크 되어 있습니다\n")
                    } else {
                        textView.append("세번째 체크박스는 체크 되어 있지 않습니다\n")
                    }

                    when(radioGroup1.checkedRadioButtonId){
                        R.id.radioButton -> {
                            textView.append("라디오 1-1 선택\n")
                        }
                        R.id.radioButton2 -> {
                            textView.append("라디오 1-2 선택\n")
                        }
                        R.id.radioButton3 -> {
                            textView.append("라디오 1-3 선택\n")
                        }
                    }

                    when(radioGroup2.checkedRadioButtonId){
                        R.id.radioButton4 -> {
                            textView.append("라디오 2-1 선택\n")
                        }
                        R.id.radioButton5 ->{
                            textView.append("라디오 2-2 선택\n")
                        }
                        R.id.radioButton6 ->{
                            textView.append("라디오 2-3 선택\n")
                        }
                    }
                }
            }

            checkBox.run {
                setOnCheckedChangeListener { buttonView, isChecked ->
                    if(isChecked == true){
                        textView.text = "첫 번째 체크박스가 체크 되었습니다"
                    } else {
                        textView.text = "첫 번째 체크박스가 체크 해제 되었습니다"
                    }
                }
            }

            radioGroup1.run{
                setOnCheckedChangeListener { group, checkedId ->
                    when(checkedId){
                        R.id.radioButton -> {
                            textView.text = "라디오 1-1 선택"
                        }
                        R.id.radioButton2 ->{
                            textView.text = "라디오 1-2 선택"
                        }
                        R.id.radioButton3 ->{
                            textView.text = "라디오 1-3 선택"
                        }
                    }
                }
            }
        }
    }
}

코드 리뷰

• checkBox.isChecked = true : 체크박스의 체크 상태를 true로 설정한다.
• radioGroup1.check(R.id.radioButton3) : 라디오 그룹에서 하나를 선택해 체크한 상태로 만든다.
• checkBox.toggle() : 체크박스의 체크 상태를 반전시킨다.
• when(radioGroup1.checkedRadioButtonId){ ... } : 라디오 그룹을 통해 체크되어 있는 라디오 버튼의 ID를 가져온다.
• checkBox.run { ... }
  • setOnCheckedChangeListener { ... }
    • 체크박스의 선택 상태가 변경되었을 때 동작한다.
    • isChecked 안에 선택 상태에 대한 값이 전달된다.
• radioGroup1.run{ ... }
  • setOnCheckedChangeListener { ... }
    • 라디오 그룹 내의 라디오 버튼 선택이 변경되었을 때 동작한다.
    • checkedId를 통해 선택된 라디오 버튼의 ID가 전달된다.