[Kotlin][Android] chip 동적 추가 삭제하기

안녕하세요, 이번 포스팅에서는 앱 화면에서 바로바로 chip을 추가하고 삭제하는 기능을 만들어보겠습니다.

(코드는 안르도이드 sdk 24 버전 기준으로 작성되었습니다)

 

포스팅에서 작성된 코드는 스틱코드에서 확인하실 수 있습니다.

[AOS][Kotlin] chip 동적 추가 - Stickode

스틱코드

 

 

레이아웃 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".ChipActivity">

    <EditText
        android:id="@+id/edt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="name of chip"
        app:layout_constraintEnd_toStartOf="@id/btn"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/btn"
        app:layout_constraintWidth_percent="0.5" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="add chip"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/edt"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chip_group"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn"
        app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

액티비티 (MainActivity.kt)

class MainActivity : AppCompatActivity() {
    private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

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

        binding.btn.setOnClickListener {
            val string = binding.edt.text
            if (string.isNullOrEmpty()) { // 아무 텍스트도 없을 경우
                Toast.makeText(applicationContext, "chip 이름을 입력해주세요", Toast.LENGTH_LONG).show()
            } else {
                binding.chipGroup.addView(Chip(this).apply {
                    text = string // chip 텍스트 설정
                    isCloseIconVisible = true // chip에서 X 버튼 보이게 하기
                    setOnCloseIconClickListener { binding.chipGroup.removeView(this) } // X버튼 누르면 chip 없어지게 하기
                })
            }
        }
    }
}

뷰 바인딩을 사용해 뷰 객체에 접근하였습니다. findViewById를 사용할 수도 있습니다.

 

 

 

 

위 코드를 통해, 버튼을 눌렀을 때 EditText에 작성한 텍스트대로 chip이 생기고, chip의 X표시를 누르면 chip이 사라지게 됩니다.