Android Support Library28.0.0-alpha1で追加されたChipGroupを試してみる

こんにちは。ピクトリンク事業部の古川です。

今回は、Android Support Library28.0.0(Alpha1）で追加された、Chip/ChipGroupについて解説します。

Chip/ChipGroupとは？

タグのようなものを指すViewです。

例えば、以下のようにスキルセットの一覧を表示するために使ったりします。

それでは具体的に見ていきましょう。

Chip/ChipGroupの導入

まずはbuild.gradleにAndroidXの情報を追加します。

2018年9月5日時点ではRC02が最新です。

implementation "androidx.legacy:legacy-support-v4:1.0.0-rc02"

実際に使ってみる

感覚的には、RadioButtonの実装に非常に似ています。

それでは実際に使ってみましょう。

ViewのXMLに情報を追加します。

&lt;com.google.android.material.chip.ChipGroup
 android:id="@+id/chipGroup"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"&gt;

     &lt;com.google.android.material.chip.Chip
         android:id="@+id/chip"
         style="@style/Widget.MaterialComponents.Chip.Filter"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Android"
         android:textAppearance="?android:attr/textAppearanceMedium" /&gt;

&lt;/com.google.android.material.chip.ChipGroup&gt;

これだけでもシンプルなChip/ChipGroupが設置できました。

ひとつずつ見ていきます。

Chipは独立しても使えますが、RadioButtonのようにChipGroupの子要素としてセットします。

8行目、Chipにはいくつかのスタイルが事前に用意されており、XMLで指定できるようになっています。

styleによって設定できるものは以下のものがあります。

チップ（チェックマーク）
クリック（選択状態）
閉じるアイコン

上記３点をStyleの種別によって設定できます。

種類	概要	イメージ
@style/Widget.MaterialComponents.Chip.Filter	チップ：オプションクリック：常に有効閉じるアイコン：オプション通常、ChipGroupに属したChipとして利用する際に指定します。
@style/Widget.MaterialComponents.Chip.Action	styleを設定しなかった場合、これがデフォルトとなる。チップ：オプションクリック：不可閉じるアイコン：不可通常、ChipGroupに属したChipとして利用する際に指定します。
@style/Widget.MaterialComponents.Chip.Choice	チップ：オプションクリック：常に有効閉じるアイコン：不可ユーザーが「選択している」ことをわかりやすく表示してくれる。通常、ChipGroupに属したChipとして利用する際に指定します。
@style/Widget.MaterialComponents.Chip.Entry	チップ：オプションクリック：オプション閉じるアイコン：オプション通常、ChipGroupではなく独立したChipDrawableとして利用する際に指定します。

最後に android:textAppearance をセットしていますが、これはSupportLibraryの時はセットしなくても問題なかったので、今後正式リリース版が出る場合には不要になるかと思います。（セットしなかった場合、IllegalArgumentExceptionがコールされます。） 11行目、android:textについては、SupportLibraryでは app:chipText(setChipText) でしたがdeprecated になっています。通常のandroid:text(setText)を使うようにしましょう。

リスナーも豊富に用意されておりsetOnClickListener, setOnCheckedChangeListener, setOnCloseIconClickListenerと、チェックや閉じるボタンに対応したリスナーが用意されています。なお、setOnCloseIconClickListenerについては、コード中の実態はOnClickListenerとなっており、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">

    <data>

        <variable
            name="viewModel"
            type="jp.furyu.chipgroupsample.viewmodel.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_default"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Default"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_action"
                style="@style/Widget.MaterialComponents.Chip.Action"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="@{viewModel::chipSelect}"
                android:text="Action"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_choice"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onCheckedChanged="@{(compoundButton, b)  -> viewModel.chipChecked()}"
                android:text="Choice"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipfilter"
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Filter"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_entry"
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Entry"
                android:textAppearance="?android:attr/textAppearanceMedium" />

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

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

次のような画面になります。

setOnCloseIconClickListenerもKotlinのコード上で実装してみましょう

class MainActivity : AppCompatActivity() {
    val mainViewModel = MainViewModel()
    val binding: ActivityMainBinding by lazy {
        DataBindingUtil.setContentView&lt;ActivityMainBinding&gt;(this, R.layout.activity_main)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding.viewModel = mainViewModel
        binding.chipEntry.setOnCloseIconClickListener {
            binding.chipEntry.visibility = View.GONE
        }
    }
}

閉じるボタン（✕ボタン）をタップすると、ちゃんとViewがGONEになりました。