如何使用多个图像创建圆角视图

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。