FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

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に情報を追加します。

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

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

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

 

 

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

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

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

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

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

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

上記3点を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になりました。

まとめ

実装自体はRadioButtonに形が似ていて、直感的で使いやすいものになっていました。 Chip/ChipGroupはまだ正式リリースはされていませんが、タグの表示など、活用できるシーンは多いかと思いますので、正式リリースが楽しみですね!