带有右下角圆形彩色徽章的圆形 ImageView

Question

这是 RecyclerView 需要膨胀的布局类型。

我使用 CircleImageView 库来实现圆形图像。（https://github.com/hdodenhof/CircleImageView）

现在我的问题是，如何让另一个背景（实际上只是一种颜色）出现在它上面（就像上图中的蓝色部分）

这是迄今为止我所取得的成就。

有什么建议么？

Answer 1

# 解决方案 1：

1. drawable创建圆形blue颜色的自定义badge并将此可绘制XML文件放入/res/drawable/文件夹中。

圆形徽章.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#009DDB" />
    <stroke
        android:color="#FFFFFF"
        android:width="1.5dp" />
</shape>

2. 使用 aCircleImageView来显示image，使用 aView来显示圆形blue颜色badge。
3. 使用以下命令将可绘制对象设置circular_badge为查看背景badgeandroid:background="@drawable/circular_badge"
4. CircleImageView将和包裹View成 aRelativeLayout以显示位置的blue颜色。badgebottom-rightimage

下面是有效的 XML 代码：

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="100dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/dummy"/>

    <View
        android:id="@+id/badge"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="6dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/circular_badge"/>

</RelativeLayout>

输出：

# 解决方案 2：

1. 使用两个CircleImageView，一个用于显示image，另一个用于显示圆形blue颜色badge。
2. 将这两个包裹CircleImageView成 aRelativeLayout以显示位置的blue颜色。badgebottom-rightimage

下面是有效的 XML 代码：

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="100dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/dummy"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/badge"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="6dp"
        android:layout_marginRight="8dp"
        android:src="#009DDB"/>

</RelativeLayout>

输出：

希望这会有所帮助~