DataBinding을 사용하는 Chip을 ChipGroup에 동적으로 추가/제거

요구사항


  • 전체 앱에서 DataBinding을 사용한다고 가정합니다
  • Chip의 수는 가변적이며 동적으로 증감 할 수 있습니다
  • Chip에 ✕ 버튼을 표시하고 누르면 사라집니다.

    구현



    라이브러리 추가



    Chip을 사용하기 위한 라이브러리를 추가한다.

    app/build.gradle
    
    dependencies {
        (中略)
        implementation 'com.google.android.material:material:1.1.0'
        (中略)
    }
    

    AppTheme 변경



    Chip을 사용할 때 AppComponent라고 충돌하기 때문에 잠정 대응.
    본 기사에서는 Theme.MaterialComponents.Light.DarkActionBar를 이용하고 있다.

    styles.xml
    <resources>
    
        <!-- Base application theme. -->
    <!--    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">--> 
        <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    
    </resources>
    
    

    태그 정의



    Tag.kt
    data class Tag(
        val id: String,
        val name: String,
    )
    

    Chip 레이아웃 준비



    view_tag_chip.xml
    <layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
    
        <data>
    
            <variable
                name="tag"
                type="com.masaibar.chipsample.Tag" />
        </data>
    
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="false"
            android:text="@{tag.name}"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            tools:text="Tag" />
    
    </layout>
    
    

    Chip을 추가하는 화면 레이아웃 준비



    activity_main.xml
    <layout 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">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            tools:context=".view.main.MainActivity">
    
            <com.google.android.material.chip.ChipGroup
                android:id="@+id/chip_group_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:singleSelection="false" />
        </FrameLayout>
    </layout>
    
    

    동적으로 추가



    Chip에도 DataBinding을 사용하고 싶기 때문에 inflate하고 태그 정보를 바인드하고 있다.
    ✕ 버튼을 눌렀을 때의 이벤트는 setOnCloseIconClickListener 로 설정할 수 있다.
    Chip가 생성되면 ChipGroupTags의 addView()에 전달하면 ChipGroup의 자식 요소에 추가됩니다.

    MainActivity.kt
    class MainActivity : AppCompatActivity() {
    
        private lateinit var binding: ActivityMainBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            binding = DataBindingUtil.setContentView(
                    this,
                    R.layout.activity_main
            )
    
            for (i in 0 until 20) {
                DataBindingUtil.inflate<ViewTagChipBinding>(
                        LayoutInflater.from(this),
                        R.layout.view_tag_chip,
                        null,
                        false
                ).apply {
                    tag = Tag(
                            id = i,
                            name = UUID.randomUUID().toString().substring(0, Random.nextInt(10))
                    )
                    (root as? Chip)?.setOnCloseIconClickListener {
                        binding.chipGroupTags.removeView(root)
                    }
                }.let {
                    binding.chipGroupTags.addView(it.root)
                }
            }
        }
    }
    
    

    결과



    ChipGroup 덕분에 Chip의 크기에 따라 좋게 레이아웃, 맞지 않는 경우는 개행해 주고 있는 것을 알 수 있다.


    ✕ 버튼을 누르면 Chip이 사라지고 사라진 곳은 잘 레이아웃을 채워준다.


    참고



    h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 40917521 / 안 d 로이 d-data 병 ぢ ん gp 로 g 라 마치 캇 ly
    h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 50494502 / HO W-KAN-I-D-W-W-AN-DROI-D-CH PS-DY NAMIKALY-IN-AN-DROI d / 50823177
  • 좋은 웹페이지 즐겨찾기