如何创建包含多个图像的圆形视图

Question

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

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

Answer 1

有几个很好的第三部分库可用于创建圆形图像。但事先你会想要将多个图像组合成一个矩形，然后可以将其制成圆形。

我会看 CircleImageView or RoundedImageView。不同之处在于他们的名字所描述的 CircleImageView 会给你一个完美的圆形图像。 RoundedImageView 实际上可以提供矩形、椭圆形或圆形形式的圆角。

如果您试图让您的应用保持轻量化并避免使用外部库，您也可以只创建一个圆形图像，中间有一个透明圆圈，可以使用常规 ImageView.

Answer 2

另一种选择是创建一个自定义 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 有一个很好的解决方案，可以创建一个绘制透明圆圈的自定义视图。

如果您想使用自定义视图，只需替换

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

如何创建包含多个图像的圆形视图

How to create rounded view with multiple images

android

imageview

android-layout

android-imageview