在芯片视图内添加一个圆形进度图标答案

【问题标题】：Add a circular progress icon inside the chip view在芯片视图内添加一个圆形进度图标
【发布时间】：2021-08-14 16:37:46
【问题描述】：

我想添加一个圆形进度图标

在 android 的芯片视图中。像这样的东西作为最终产品

请原谅进度条指示器的背景。我找不到任何关于此的事情。有什么建议吗？

【问题讨论】：

你必须创建自定义卡片视图并在其中包裹圆形进度条，这样你就可以实现它

标签： android material-design android-chips

【解决方案1】：

如果您想对齐芯片左侧的加载指示器或如果你想在芯片的右侧对齐，可以使用CloseIcon。

在芯片左侧对齐CircularProgressDrawable：

1.在您的芯片xml布局中，根据您的需要定义chipIconSize和填充属性，如下所示：

<com.google.android.material.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chip"
    app:chipIconSize="25dp"
    app:iconStartPadding="5dp"
    app:iconEndPadding="5dp"
    app:chipBackgroundColor="@android:color/holo_blue_bright" />

2. 以编程方式创建您的 CircularProgressDrawable，如下所示：

CircularProgressDrawable cpDrawable = new CircularProgressDrawable(this);
cpDrawable.setStyle(CircularProgressDrawable.DEFAULT);
cpDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);
cpDrawable.start();

3.并将上述 CircularProgressDrawable 设置为您的 ChipIcon，如下所示：

chip = findViewById(R.id.chip);
chip.setChipIcon(cpDrawable);
chip.setChipIconVisible(true);

在芯片右侧对齐CircularProgressDrawable：

1.在您的芯片 xml 布局中，根据您的需要定义 closeIconSize 和 closeIcon 填充属性，如下所示：

<com.google.android.material.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chip"
    app:closeIconSize="25dp"
    app:closeIconStartPadding="5dp"
    app:closeIconEndPadding="5dp"
    app:chipBackgroundColor="@android:color/holo_blue_bright" />

2. 像上面一样以编程方式创建您的 CircularProgressDrawable 并将其设置在 Chip CloseIcon 上，如下所示：

 chip = findViewById(R.id.chip);
 chip.setCloseIcon(cpDrawable);
 chip.setCloseIconVisible(true);

结果如下：

【讨论】：

我遵循了同样的方法并且能够实现它。打算添加答案。不过还是谢谢。

【解决方案2】：

我使用相对布局创建了一个布局，你可以检查一下，希望你能明白

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:background="@drawable/dummy_bg"
    android:splitMotionEvents="true">

    <TextView
        android:id="@+id/tvlabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="30dp"
        android:text="Electronics"
        android:textColor="@color/black"
        android:textSize="25sp" />

    <ProgressBar
        android:id="@+id/progrressciruclar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_toRightOf="@+id/tvlabel" />
</RelativeLayout>

也在你的drawables文件夹中创建这个dummy_bg并粘贴以下代码

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp"
        android:color="#FFFFFF" />
    <corners android:radius="50dp"/>
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
</shape>

【讨论】：

您正在使用进度条创建卡片视图。有什么方法可以使用chipview并使用chipview中的进度指示器。使用chipview实现，用新卡替换它会复杂得多。