Question

这是一个“操作方法”的问题。

我在ConstraintLayout中有一个包含6个ImageView对象的android活动。我希望它们放在水平行中，始终使用屏幕的整个宽度。对于较大的屏幕，而不是ImageViews之间的空白空间，我希望ImageViews可以扩展，保持其纵横比。我正在使用矢量资源来处理图像的内容。

如何做到这一点？

Answer 1

在ConstraintLayout内，您可以将ImageView放入

链中

app:layout_constraintHorizontal_chainStyle="spread_inside"

或

app:layout_constraintHorizontal_chainStyle="spread"

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

完成后，请为每个android:adjustViewBounds="true"指定ImageView，以使矢量图像向上缩放以填充其视图。（请参阅here和here）。

下面是两个示例图像和使用的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>

在ConstraintLayout中缩放矢量图形

1 个答案: