material-componentsのProgressIndicatorを使ってみた

11435 ワード
Android MaterialDesign MaterialComponents Android テキストリンク

2020/12/17 に material-components 1.3.0-beta1 が公開されました。
1.3.0 では ProgressIndicator と TimePicker が新たに追加されており、この記事では ProgressIndicator について紹介しようと思います。

これまでの ProgressBar との違い

  • Linear と Circular が別の View として扱うようになった
  • MaterialTheming に準拠するようになった
  • 色の指定がしやすくなった
  • 角丸の指定ができるようになった
  • 表示・非表示のアニメーションが使えるようになった

基本的な使い方

これまで style で Linear か Circular を出し分けていましたが、material-component 版では別の View として使います。

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

常にアニメーションさせたい場合は android:indeterminate="true" を設定する。

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true" />

app:indicatorDirectionLinear (Circular の場合は app:indicatorDirectionCircular) でインジケータの流れの向きも指定できる。

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:indicatorDirectionLinear="endToStart" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:indicatorDirectionCircular="counterclockwise" />

角丸

app:trackCornerRadius でインジケータの角丸の設定ができます。

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:trackCornerRadius="6dp" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:trackCornerRadius="6dp" />

色を変える

app:indicatorColor と app:trackColor で色を変えることができます。

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:trackColor="@color/blue"
    app:indicatorColor="@color/yellow" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:trackColor="@color/blue"
    app:indicatorColor="@color/yellow" />

色の配列を使うことで複数の色を合わせたインジケータにすることができる。
app:indeterminateAnimationType="disjoint/contiguous" でインジケータのアニメーションの種類も変えることができる。

<integer-array name="custom_progress_colors">
    <item>@color/yellow</item>
    <item>@color/blue</item>
    <item>@color/red</item>
</integer-array>

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:indeterminateAnimationType="disjoint"
    app:indicatorColor="@array/custom_progress_colors" />
<com.google.android.material.progressindicator.LinearProgressIndicator
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:indeterminateAnimationType="contiguous"
    app:indicatorColor="@array/custom_progress_colors" />
<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:indicatorColor="@array/custom_progress_colors" />

Standalone Indicator

インジケータの Drawable も提供されるようになり、Chip などに Indicator を埋め込むことができます。

val progressIndicatorSpec = CircularProgressIndicatorSpec(
    requireContext(),
    null,
    0,
    R.style.Widget_MaterialComponents_CircularProgressIndicator_ExtraSmall
)
val indeterminateDrawable = IndeterminateDrawable.createCircularDrawable(
    requireContext(),
    progressIndicatorSpec)
binding.chip.chipIcon = indeterminateDrawable

CircularProgressIndicatorSpec で Indicator のサイズや向きを設定できます。上記の例では @style/Widget.MaterialComponents.CircularProgressIndicator.ExtraSmall の style からサイズなどを取得して設定している。

この他にも表示・非表示のアニメーションの設定もできたり、インジケータの幅も変えることができます。
これまでの ProgressBar よりも表現できる幅が広がり、色の変更もしやすくなっているのでよきタイミングで置き換えていきたいですね。

参考