android - 如何创建包含多个图像的圆形 View

Question

我将如何着手创建一个可以包含多个图像并包含圆形边框的 View ？以下是最终产品外观的一些示例。

图像将从 url 下载，如示例所示， View 中可能包含一到四个图像。

Answer 1

另一种选择是创建一个自定义 LinearLayout，其中包含 xml 中的四个 ImageViews，并且可以动态重新组织显示的 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 这样的库。加载图像，您不必担心在绘制圆形图像之前等待所有图像下载。如果这样做，每个图像都可以独立于其他图像加载。

唯一的缺点是您必须使用具有透明圆形背景的图像来创建圆形图像的外观。您可以创建一个常规的可绘制对象来使用。或者您可以尝试将其绘制到 Canvas 上。这questions有一个很好的解决方案，将创建一个绘制透明圆圈的自定义 View 。

如果你想使用自定义 View 只需替换

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