在芯片视图中添加一个圆形进度图标

Question

我想添加一个循环进度图标，比如

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

请原谅进度条指示器的背景。我无法找到与此相关的任何信息。有什么建议吗？

Answer 1

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

<?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>

也在您的可绘制对象文件夹中创建此 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>

Answer 2

您可以通过使用 androidx.swiperefreshlayout.widget.CircularProgressDrawable 以编程方式设置 ChipIcon 来实现此行为将加载指示器对齐在芯片的左侧，或者如果您想将其对齐在芯片的右侧，可以使用 CloseIcon。

在芯片左侧对齐CircularProgressDrawable：

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

<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.Create 以编程方式将 CircularProgressDrawable 如下所示：

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

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

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

将CircularProgressDrawable对齐芯片右侧：

1.In 你的芯片 xml 布局根据你的需要定义 closeIconSize 和 closeIcon paddings 属性，如下所示：

<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.Create 像上面那样以编程方式将 CircularProgressDrawable 设置在 Chip CloseIcon 上，如下所示：

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

结果如下：

在芯片视图中添加一个圆形进度图标

Add a circular progress icon inside the chip view

android

material-design

android-chips