Java/Android：如何在不切断边缘视图的情况下显示一系列图像视图？

Question

我正在尝试以可重复使用的布局显示一系列 4 个头像。我的布局test_layout.xml 如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:layout_marginEnd="1dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/img2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:layout_marginHorizontal="1dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img3"
        app:layout_constraintStart_toEndOf="@+id/img1"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:layout_marginHorizontal="1dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img4"
        app:layout_constraintStart_toEndOf="@+id/img2"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:layout_marginStart="1dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img3"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>

我将在多个地方重用这个布局（有时在同一个屏幕上多次），所以它需要是通过include 标签（或者可能是merge）合并的自己的布局。

当框架太宽/太短时，这种布局看起来很棒，完全符合我的预期，头像处于“打包”形式：

但是当框架太窄/太高时，布局开始切断外部的图像：

我怎样才能做到这一点，而不是切断图像的侧面，而是调整它们的大小，使它们都水平适合，并在顶部和底部添加空白？我对任何类型的布局持开放态度，而不仅仅是constraintlayout。谢谢！

Answer 1

我要做的可能是以编程方式为这四个 ImageView 设置 LayoutParams：

int totalWidth = yourConstraintLayout.getWidth();
yourImageView1.setLayoutParams(new  ConstraintLayout.LayoutParams(totalWidth / 4, totalWidth / 4));

// And the same thing for the rest of your imageViews, or just use a for loop

这只会将图片的宽度设置为其父级（ConstraintLayout）的四分之一。我想这就是您要问的吗？让我知道它是否适合您！

Answer 2

设置所有宽度以匹配约束和所有高度以包裹内容

<ImageView
    android:id="@+id/img1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="1dp"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/img2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars" />

<ImageView
    android:id="@+id/img2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="1dp"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/img3"
    app:layout_constraintStart_toEndOf="@+id/img1"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars" />

<ImageView
    android:id="@+id/img3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="1dp"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/img4"
    app:layout_constraintStart_toEndOf="@+id/img2"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars" />

<ImageView
    android:id="@+id/img4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="1dp"
    android:adjustViewBounds="true"
    android:scaleType="fitStart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/img3"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars" />

Answer 3

我认为像@Zuo Wang 所说的那样以编程方式进行，这是最好的选择。但是，如果您不想那样做，仍然通过 XML 来做。在这里，您可能有一种方法。设置一个 maxHeight，但它并不适合所有设备屏幕。

这里有一个 250dp 高度的预览

这里有 50dp 的高度

   <androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/imageWrapper"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img3"
        app:layout_constraintStart_toEndOf="@id/img1"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/img4"
        app:layout_constraintStart_toEndOf="@id/img2"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxHeight="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/img3"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

设置您的 test_layout.xml 高度 wrap_content 和宽度 match_constraints

然后如果您使用 include 添加到另一个布局，您需要设置高度 wrap_content 以保持原始大小

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        app:layout_constraintEnd_toStartOf="@id/img2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        app:layout_constraintEnd_toStartOf="@id/img3"
        app:layout_constraintStart_toEndOf="@id/img1"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        app:layout_constraintEnd_toStartOf="@id/img4"
        app:layout_constraintStart_toEndOf="@id/img2"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/img3"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>