Question

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

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

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

Answer 1

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

在芯片左侧对齐CircularProgressDrawable：

1.在您的芯片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. 以编程方式创建您的 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 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. 像上面一样以编程方式创建您的 CircularProgressDrawable 并将其设置在 Chip CloseIcon 上，如下所示：

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

结果如下：

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

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

2 个答案: