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

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

Chip/ChipGroupとは?

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

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

top crop

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

Chip/ChipGroupの導入

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

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

実際に使ってみる

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

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

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

 

head

 

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

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

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

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

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

  • チップ(チェックマーク)
  • クリック(選択状態)
  • 閉じるアイコン

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

種類 概要 イメージ
@style/Widget.MaterialComponents.Chip.Filter
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:オプション

通常、ChipGroupに属したChipとして利用する際に指定します。

filter

filter_filtered

@style/Widget.MaterialComponents.Chip.Action styleを設定しなかった場合、これがデフォルトとなる。

  • チップ:オプション
  • クリック:不可
  • 閉じるアイコン:不可

通常、ChipGroupに属したChipとして利用する際に指定します。

 action
@style/Widget.MaterialComponents.Chip.Choice
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:不可

ユーザーが「選択している」ことをわかりやすく表示してくれる。

通常、ChipGroupに属したChipとして利用する際に指定します。

choice

choice_selected

@style/Widget.MaterialComponents.Chip.Entry
  • チップ:オプション
  • クリック:オプション
  • 閉じるアイコン:オプション

通常、ChipGroupではなく独立したChipDrawableとして利用する際に指定します。

entryentry_filtered

最後に android:textAppearance をセットしていますが、これはSupportLibraryの時はセットしなくても問題なかったので、今後正式リリース版が出る場合には不要になるかと思います。

(セットしなかった場合、IllegalArgumentExceptionがコールされます。)

11行目、android:textについては、SupportLibraryでは app:chipText(setChipText) でしたがdeprecated になっています。

通常のandroid:text(setText)を使うようにしましょう。

 

リスナーも豊富に用意されておりsetOnClickListener, setOnCheckedChangeListener, setOnCloseIconClickListenerと、チェックや閉じるボタンに対応したリスナーが用意されています。

なお、setOnCloseIconClickListenerについては、コード中の実態はOnClickListenerとなっており、XMLから指定はできませんのでご注意ください。

試しに実装してみます。

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

activity-MainActivity-09052018123549

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

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

まとめ

実装自体はRadioButtonに形が似ていて、直感的で使いやすいものになっていました。

Chip/ChipGroupはまだ正式リリースはされていませんが、タグの表示など、活用できるシーンは多いかと思いますので、正式リリースが楽しみですね!