在 ConstraintLayout 中缩放矢量图形

Question

这是一个“如何做”的问题。

我在 ConstraintLayout 中有一个带有 6 个 ImageView 对象的 android 活动。我想将它们放在水平行中，始终使用屏幕的整个宽度。对于更大的屏幕，而不是 ImageViews 之间的空白空间，我希望 ImageViews 放大，保持它们的纵横比。我正在使用矢量资源作为图像的内容。

如何才能做到这一点？

Answer 1

在 内ConstraintLayout，您可以将您ImageView的链放入一个链中

app:layout_constraintHorizontal_chainStyle="spread_inside"

或者

app:layout_constraintHorizontal_chainStyle="spread" 

并使每个视图的宽度0dp水平扩展每个视图以匹配其约束。无论是在纵向还是横向模式下，这都会在屏幕的宽度上分布每个视图。（请参阅有关链的讨论。）

完成后，android:adjustViewBounds="true"为每个指定ImageView将使矢量图像放大以填充其视图的每个。（见这里和这里）。

下面是两个示例图像和使用的 XML。（我使用了四张图片，但它也适用于六张。）

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</android.support.constraint.ConstraintLayout>