Question

以下是需要为RecyclerView充气的布局类型。

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

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

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

有什么建议吗？

Answer 1

＃SOLUTION 1：

为圆形drawable颜色blue创建自定义badge，并将此可绘制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>

使用CircleImageView展示image和View展示圆形blue颜色badge。
将drawable circular_badge设置为badge使用android:background="@drawable/circular_badge"
将CircleImageView和View包裹到RelativeLayout，以在blue的{{1}}位置显示badge颜色bottom-right。

以下是正在使用的XML代码：

image

<强>输出：

＃SOLUTION 2：

使用两个<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>，一个用于展示CircleImageView，另一个用于展示圆形image颜色blue。
将这两个badge包裹在CircleImageView中，以RelativeLayout blue badge位置显示bottom-right颜色image。

以下是正在使用的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 2

来自@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

Answer 3

尝试这种方式它将起作用

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

for circulerimageview将此添加到你的gradle.build

中

compile 'de.hdodenhof:circleimageview:2.1.0'

<强>输出

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

3 个答案: