帶有右下圓形彩色徽章的圓形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