android - 如何在芯片材料组件中显示进度可绘制动画？

Question

根据Action Chips 的官方设计文档，我们应该能够为芯片添加进度状态。可悲的是，开发文档根本没有提到这一点。有没有人设法弄清楚如何达到这里显示的效果？

Answer 1

chipIcon可以使用属性 和来实现此行为androidx.swiperefreshlayout.widget.CircularProgressDrawable。

xml

app:chipIconWithProgress="@{viewModel.taskIsStarting ? null : @drawable/ic_play_arrow}"

和 BindingAdapter

@BindingAdapter("chipIconWithProgress")

fun Chip.setChipIconWithProgress(item: Drawable?) {   
  chipIcon = item
    ?: CircularProgressDrawable(context!!).apply {
      setStyle(CircularProgressDrawable.DEFAULT)
      start()
    }
}

Answer 2

您可以使用材料组件库和Chip组件。

在您的布局中使用：

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        style="@style/Widget.MaterialComponents.Chip.Action"
        app:iconStartPadding="2dp"
        ../>

然后作为库chipIcon提供ProgressIndicator的使用：

   ProgressIndicatorSpec progressIndicatorSpec = new ProgressIndicatorSpec();
    progressIndicatorSpec.loadFromAttributes(
            this,
            null,
            R.style.Widget_MaterialComponents_ProgressIndicator_Circular_Indeterminate);
    progressIndicatorSpec.circularInset = 1; // Inset.
    progressIndicatorSpec.circularRadius =
            (int) dpToPx(this, 8); // Circular radius is 8 dp.
    IndeterminateDrawable progressIndicatorDrawable =
            new IndeterminateDrawable(
                    this,
                    progressIndicatorSpec,
                    new CircularDrawingDelegate(),
                    new CircularIndeterminateAnimatorDelegate());


    Chip chip = findViewById(R.id.chip);
    chip.setChipIcon(progressIndicatorDrawable);

使用这个 util 方法：

public static float dpToPx(@NonNull Context context, @Dimension(unit = Dimension.DP) int dp) {
    Resources r = context.getResources();
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics());
}

您可以自定义颜色和所有其他属性：

progressIndicatorSpec.indicatorColors = getResources().getIntArray(R.array.progress_colors);
progressIndicatorSpec.growMode = GROW_MODE_OUTGOING;

注意：这至少需要 version 1.3.0-alpha02。