[30일차 Android] CheckedTextView

 

 

 

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

 

 

 

📖 CheckedTextView

• CheckBox, RadioButton 을 커스터마이징 할 수 있도록제공되는 View

주요 속성

속성	설명
checkMark	체크 상태를 표시하는 아이콘을 설정
checked	체크 상태를 설정
clickable	클릭이 가능한지 설정한다. CheckedTextView는 CheckBox나 RadioButton이 가지고 있는 기능이 구현되어 있지 않다. 이 때문에 개발자가 기능을 모두 구현해줘야 하는데 clickable에 true를 설정해야 이벤트에 반응할 수 있고 이를 통해 리스너를 구현하여 기능을 구현해줘야 한다.

checkMark 방향

• checkMark를 설정하면 우측에 표시된다.
• checkMark 속성이 아닌 다음 속성을 이용하면 원하는 방향에 표시할 수 있다.

속성	방향
drawableTop	상단
drawableBottom	하단
drawableLeft	좌측
drawableRight	우측

주요 프로퍼티

프로퍼티	설명
isChecked	체크 상태(true, false 반환)

주요 이벤트

이벤트	설명
click	클릭했을 때 발생한다. checkedTextView는 이 이벤트를 반드시 설정해야 한다. checkedTextView는 checkbox나 radioButton이 가지고 있는 기능을 click 이벤트 발생 시 개발자가 모두 처리해줘야 한다.

 

 

 

예제 코드

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" >

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

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

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

    <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" />

    <CheckedTextView
        android:id="@+id/checkedTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checkMark="?android:attr/listChoiceIndicatorMultiple"
        android:clickable="true"
        android:text="CheckBox1"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <CheckedTextView
        android:id="@+id/checkedTextView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:drawableLeft="?android:attr/listChoiceIndicatorMultiple"
        android:text="CheckBox2"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <CheckedTextView
        android:id="@+id/checkedTextView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checkMark="?android:attr/listChoiceIndicatorSingle"
        android:clickable="true"
        android:text="Radio1"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <CheckedTextView
        android:id="@+id/checkedTextView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checkMark="?android:attr/listChoiceIndicatorSingle"
        android:clickable="true"
        android:text="Radio2"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <CheckedTextView
        android:id="@+id/checkedTextView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checkMark="?android:attr/listChoiceIndicatorSingle"
        android:clickable="true"
        android:text="Radio3"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />
</LinearLayout>

 

 

 

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.test.android22_checkedtextview.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 {
            checkedTextView.run {
                setOnClickListener {
                    toggle()
                }
            }

            checkedTextView2.run {
                setOnClickListener {
                    toggle()
                }
            }

            checkedTextView3.isChecked = true

            checkedTextView3.run {
                setOnClickListener {
                    checkedTextView3.isChecked = true
                    checkedTextView4.isChecked = false
                    checkedTextView5.isChecked = false
                }
            }

            checkedTextView4.run {
                setOnClickListener {
                    checkedTextView3.isChecked = false
                    checkedTextView4.isChecked = true
                    checkedTextView5.isChecked = false
                }
            }

            checkedTextView5.run {
                setOnClickListener {
                    checkedTextView3.isChecked = false
                    checkedTextView4.isChecked = false
                    checkedTextView5.isChecked = true
                }
            }

            button.run {
                setOnClickListener {
                    checkedTextView.isChecked = true
                    checkedTextView2.isChecked = true
                }
            }

            button2.run {
                setOnClickListener {
                    checkedTextView.isChecked = false
                    checkedTextView2.isChecked = false
                }
            }

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

                    if (checkedTextView.isChecked){
                        textView.append("CheckBox1이 체크되어 있습니다\n")
                    } else {
                        textView.append("CheckBox1이 체크되어 있지 않습니다\n")
                    }

                    if (checkedTextView2.isChecked){
                        textView.append("CheckBox2가 체크되어 있습니다\n")
                    } else {
                        textView.append("CheckBox2가 체크되어 있지 않습니다\n")
                    }

                    if (checkedTextView3.isChecked){
                        textView.append("Radio1이 선택되었습니다.")
                    }
                    else if (checkedTextView4.isChecked){
                        textView.append("Radio2가 선택되었습니다.")
                    }
                    else if (checkedTextView5.isChecked) {
                        textView.append("Radio3이 선택되었습니다.")
                    }
                }
            }
        }
    }
}

코드 리뷰

•  toggle() : 현재 체크 상태를 반전시킨다.
• checkedTextView3.isChecked = true : 하나는 체크되어 있도록 설정한다.