Как показать несколько изображений в одном виде с разной высотой и шириной изображения?

Question

Как отобразить несколько изображений в одном виде с разной высотой и шириной изображения, как в виде коллажа в макете Android xml

Answer 1

Есть несколько способов сделать это, используя RelativeLayout, LinearLayout, ConstraintLayout или другие в качестве родительского представления.

Вот пример использования LinearLayout (вам нужно подставить ссылки android:src:"....", чтобы они соответствовали именам файлов, которые вы рисуете, и вы можете изменить поля):

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
<ImageView
    android:id="@+id/image1"
    android:layout_width="0dp"
    android:layout_weight="2"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:contentDescription="@string/view_profile_cd"
    android:src="@drawable/ic_profile_picture_placeholder" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/medium_border"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="8dp"
        android:contentDescription="@string/content_desc"
        android:src="@drawable/ic_add_a_photo"/>

    <ImageView
        android:id="@+id/image3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="8dp"
        android:contentDescription="@string/content_desc"
        android:src="@drawable/ic_add_a_photo"/>

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="8dp"
        android:contentDescription="@string/content_desc"
        android:src="@drawable/ic_add_a_photo"/>

    <ImageView
        android:id="@+id/image5"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="8dp"
        android:contentDescription="@string/content_desc"
        android:src="@drawable/ic_add_a_photo"/>

     </LinearLayout>

    </LinearLayout>

В результате: