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

Question

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

我使用 CircleImageView 库来实现圆角图像。 (https://github.com/hdodenhof/CircleImageView)

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

这是我迄今为止能够实现的目标。

有什么建议吗？

Answer 1

试试这个方法就行了

<FrameLayout
            android:layout_width="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_height="wrap_content" >

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/petdetail_img"
                android:layout_width="100dp"
                android:layout_height="100dp"

                android:src="@drawable/user" />

            <ImageView
                android:id="@+id/petdetail_camera"
                android:layout_width="25dp"
                android:layout_gravity="right|bottom"
                android:layout_height="25dp"
                android:src="@drawable/cameraedit"
                />

        </FrameLayout>

对于 circulerimageview 在你的 gradle.build 中添加这个

compile 'de.hdodenhof:circleimageview:2.1.0'

输出

Answer 2

# 解决方案 1：

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

circular_badge.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>

1. 使用CircleImageView 显示image，使用View 显示圆形blue 颜色badge。
2. 将可绘制的circular_badge 设置为badge 使用android:background="@drawable/circular_badge" 查看背景
3. 将CircleImageView 和View 包装成RelativeLayout 以在image 的bottom-right 位置显示blue 颜色badge。

这是工作 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 包装成RelativeLayout 以在image 的bottom-right 位置上显示blue 颜色badge。

这是工作 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>

输出：

希望对你有所帮助~

Answer 3

@Ferdoum 和@Aditya 的答案是正确的。

但我想扩展这个答案。

您可以定义自定义视图来实现业务。 比如下面的代码：

public class CircleOnlineLayout extends FrameLayout {
    private ImageView mProfileView;
    private ImageView mOnlineView;

    public CircleOnlineLayout(Context context) {
        this(context, null);
    }

    public CircleOnlineLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleOnlineLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        LayoutInflater.from(context).inflate(R.layout.circle_online, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        mProfileView = (ImageView) findViewById(R.id.profile_image);
        mOnlineView = (ImageView) findViewById(R.id.online_view);
    }

    public void setAvatarResource(int resource) {
        mProfileView.setImageResource(resource);
    }

    public void setOnline(boolean online) {
        mOnlineView.setImageResource(online ? R.color.online_color : R.color.offline_color);
    }
}

circle_online.xml 是：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        app:civ_border_color="#89000000"
        app:civ_border_width="1dp"
        />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/online_view"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@android:color/holo_blue_dark"
        app:civ_border_color="#FFFFFF"
        app:civ_border_width="1dp"
        />

</RelativeLayout>

所以你可以使用 CircleOnlineLayout.setAvatarResource 和 CircleOnlineLayout.setOnline。当然，您可以添加其他导出api