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

Question

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

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

现在我的问题是，如何才能获得另一背景（只是一种颜色真的）出现在它（像上面的图像中的蓝色部分）

这是我一直能够实现至今。

有什么建议？

Answer 1

＃解决方案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> 

使用CircleImageView用于示出image和View用于示出圆形blue颜色badge。

设置可绘制circular_badge到badge查看后台使用android:background="@drawable/circular_badge"

裹CircleImageView和View为RelativeLayout，显示blue颜色badge上的imagebottom-right位置。

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

OUTPUT：

＃解决方法2：

1. 使用两个CircleImageView，一个用于显示image，另一个用于显示圆形blue颜色badge。
2. 包裹这两CircleImageView成RelativeLayout上显示的imagebottom-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> 

OUTPUT：

希望这将有助于〜

Answer 2

尝试这种方式，将工作

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

从@Ferdoum的答案， @Aditya co rrect。

但我想扩大这个答案。

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

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