[30일차 Android] Chip

 

 

 

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

 

 

 

📖 Chip

• 버튼, 체크박스, 라디오 등의 기능을 가지고 있는 새로운 UI 요소
• ChipGroup을 통해 RadioButton 처럼 구성할 수 있다.

Chip 주요 속성

속성	설명
Theme	테마를 설정. 반드시 설정해야 한다.
Style	Chip의 스타일을 설정
Checkable	체크 가능 여부를 설정
Text	Chip에 표시할 문자열을 설정
chipIcon	Chip에 표시할 아이콘을 설정
chipIconVisiable	Chip 아이콘을 보여줄 것인가를 설정
checkedIcon	선택되었을 때의 아이콘을 설정
checkedIconVisiable	선택되었을 때의 아이콘을 보여줄 것인가를 설정

Chip 주요 프로퍼티

프로퍼티	설명
isChecked	체크 상태 값을 관리

Chip 주요 이벤트

이벤트	설명
checkedChane	체크 상태가 변경되었을 때
CloseIconClick	닫기 버튼을 눌렀을 때

---

ChipGroup 주요 속성

속성	설명
singleSelection	내부의 Chip 중 하나만 선택되게 할 것인가를 설정
checkedChip	최초에 선택되어 있을 Chip을 설정

ChipGroup 주요 프로퍼티

프로퍼티	설명
checkedChipId	그룹 내에서 선택되어 있는 Chip의 id 값

ChipGroup의 주요 이벤트

이벤트	설명
CheckedChange	ChipGroup 내부의 Chip의 체크 상태가 변경되었을 때

 

 

 

예제 코드

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

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Action"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip2"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Choice"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip3"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Entry"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip4"
        style="@style/Widget.Material3.Chip.Filter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Filter"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:checkedChip="@id/chip5"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip5"
            style="@style/Widget.Material3.Chip.Filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio1" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip6"
            style="@style/Widget.Material3.Chip.Filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio2" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip7"
            style="@style/Widget.Material3.Chip.Filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio3" />

    </com.google.android.material.chip.ChipGroup>

    <Button
        android:id="@+id/button"
        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" />
</LinearLayout>

 

 

 

MainActivity.kt

package com.test.android23_chip

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

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

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

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(R.layout.activity_main)

        activityMainBinding.run {
            button.run {
                setOnClickListener {
                    if (chip2.isChecked) {
                        textView.text = "선택 되어 있습니다\n"
                    } else {
                        textView.text = "선택되어 있지 않습니다\n"
                    }

                    when(chipGroup.checkedChipId){
                        R.id.chip5 -> {
                            textView.append("라디오1 선택\n")
                        }
                        R.id.chip6 -> {
                            textView.append("라디오2 선택\n")
                        }
                        R.id.chip7 -> {
                            textView.append("라디오3 선택\n")
                        }
                    }
                }
            }
        }
    }
}

코드 리뷰

• if (chip2.isChecked) { ... } : chip2가 체크되어 있는지 확인한다.(체크박스)

 

• when(chipGroup.checkedChipId){ ... }
  • chipGroup의 singleSelection을 true로 설정하여 chipGroup 내 chip은 중복 선택을 할 수 없도록 하였다.
  • 라디오 버튼과 같은 방식으로 어떤 chip이 선택되었는지 확인한다.