[Android] Material3 - Chip

1. Chip

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

1-1. Chip의 주요 속성

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

1-2. Chip의 주요 메서드

isChecked : 체크 상태 값을 반환한다.
setChecked : 체스 상태 값을 설정한다.

1-3. Chip의 주요 이벤트

checkedChange : 체크 상태가 변경되었을 때
CloseIconClick : 닫기 버튼을 눌렀을 때

! 실습해보자

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

    <com.google.android.material.chip.ChipGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip"
            style="@style/Widget.Material3.Chip.Assist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chip1"
            app:checkedIconVisible="false"
            app:chipIcon="@android:drawable/btn_star_big_on" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chip2" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="chip3" />
    </com.google.android.material.chip.ChipGroup>

</LinearLayout>​

▽MainActivity.kt

package kr.co.lion.android23_materialetc

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kr.co.lion.android23_materialetc.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.apply {

            chip.setOnClickListener {
                textView.text = "Chip을 눌렀습니다"
            }
        }
    }
}

 

구현화면

Chip 학습정리

Chip 은 버튼, ChecBox, RadioButton 대신 사용할 수 있도록 제공되는 UI 요소이다.

ChipGroup을 통해 RadioButton 처럼 구성할 수 있다.