如何在约束布局中连续设置多个ImageView？

Question

我正在尝试使用ImageViews而不是按钮来重新创建此布局。

这是我到目前为止使用按钮时的内容：

按钮排成一排，彼此之间的距离相等。

那是旧的xml代码，顺便说一句（仅按钮）：

<Button
    android:id="@+id/btnOneXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:layout_marginBottom="36dp"
    android:text="Back"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnTwoXXX"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnTwoXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Home"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnThreeXXX"
    app:layout_constraintStart_toEndOf="@id/btnOneXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnThreeXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Like"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btnFourXXX"
    app:layout_constraintStart_toEndOf="@id/btnTwoXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

<Button
    android:id="@+id/btnFourXXX"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Next"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/btnThreeXXX"
    app:layout_constraintTop_toTopOf="@+id/guideline2XXX" />

我试图使用ImageViews重新创建它。到目前为止是这样：

我保持xml代码几乎相同，因为我只更改了view元素。

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginLeft="32dp"
    android:layout_marginEnd="48dp"
    android:layout_marginRight="48dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/back" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="48dp"
    android:layout_marginLeft="48dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView3"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/home" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="55dp"
    android:layout_marginLeft="55dp"
    android:layout_marginEnd="20dp"
    android:layout_marginRight="20dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/imageView4"
    app:layout_constraintStart_toEndOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/emptyheart" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="60dp"
    android:layout_marginRight="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView3"
    app:layout_constraintTop_toTopOf="@+id/guideline2"
    app:srcCompat="@drawable/next" />

如您所见，按钮位置被弄乱了，距离不相等。我是使用ConstraintLayout的新手。谁能帮助我，并向我解释为什么我的代码无法按预期运行以及如何解决？感谢您提供所有答案。

Answer 1

您需要添加链式样式。在您的情况下，水平图像如：app:layout_constraintHorizontal_chainStyle="packed"至第一张图像。您可以在此here]上找到更多信息

Answer 2

尝试一下：

Answer 3

嗯，这些边际差了些头寸。我只是摆脱了每个ImageView中的边距，现在它们已完美对齐。