如何使用多個圖像創建圓角視圖

Question

如何創建可能包含多個圖像幷包含圓形邊框的視圖？以下是最終產品的幾個樣品。

圖像將來自URL下載，並且如所示的樣品中，有可能是從包含在視圖一至四個圖像。

Answer 1

另一種選擇是創建一個自定義LinearLayout，其中包含四個ImageViews xml，並可以動態重新組織使用權重顯示多少個ImageViews。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="100dp" 
    android:layout_height="100dp"> 

    <LinearLayout 
     android:id="@+id/left_container" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:layout_width="50dp" 
     android:layout_height="100dp" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/top_left_image" 
      android:layout_width="50dp" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#111" /> 


     <ImageView 
      android:id="@+id/bottom_left_image" 
      android:layout_width="50dp" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#333" /> 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/right_container" 
     android:layout_width="50dp" 
     android:layout_height="100dp" 
     android:layout_toRightOf="@+id/left_container" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/top_right_image" 
      android:layout_width="50dp" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="#555" /> 


     <ImageView 
      android:id="@+id/bottom_right_image" 
      android:layout_width="50dp" 
      android:layout_height="0dp" 
      android:layout_weight="0" 
      android:background="#777" /> 

    </LinearLayout> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/transparent_circle_image"/> 

</RelativeLayout> 

你提到，你是從URL中加載圖像，所以如果你使用這種方法，你將能夠使用圖書館像Picasso加載圖片，你就不必擔心等待所有圖片在繪製圓形圖像之前下載。如果你這樣做，每個圖像可以獨立於其他圖像加載。

唯一的缺點是您將不得不使用具有透明圓形背景的圖像來創建圓形圖像的外觀。你可以創建一個常用的drawable來使用。或者您可以嘗試將其繪製到畫布上。這questions有一個很好的解決方案，將創建一個自定義視圖，繪製一個透明的圓圈。

如果您想使用的自定義視圖只需更換

<ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/transparent_circle_image"/> 

與

<com.app.view.TransparentCircle 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

Answer 2

有幾個很好的第三部分庫，你可以使用這個創建圓形圖像。但事先您需要將多個圖像組合成一個矩形，然後可以製作成圓形。

我會看看CircleImageView或RoundedImageView。區別在於他們的名字描述CircleImageView會給你一個完美的圓形圖像。 RoundedImageView實際上可以提供矩形，橢圓形或圓形的圓角。

如果您試圖讓您的應用輕量化並避免使用外部庫，那麼您也可以在中間創建一個圓形圖像，並在中間使用常規圖像疊加爲源圖像頂部的背景圖像ImageView。