如何在Constraint Layout中连续设置多个ImageView？

Question

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

这是我目前使用按钮时的情况：

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

那是旧的 xml 代码 btw（只有按钮）：

<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 代码几乎相同，因为我只更改了视图元素。

<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

好吧，那些保证金弄乱了头寸。我简单地去除了每个 ImageView 中的边距，现在它们完美对齐了。

Answer 3

试试这个：

<ImageView
    android:id="@+id/image1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/image2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/image3"
    app:layout_constraintStart_toEndOf="@+id/image1"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/image4"
    app:layout_constraintStart_toEndOf="@+id/image2"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/image5"
    app:layout_constraintStart_toEndOf="@+id/image3"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/image4"
    app:layout_constraintTop_toTopOf="parent" />

您还可以添加 layout_constraintHorizontal_chainStyle 并给它一个 packed 或 spread 或 spread_inside

的值

希望对您有所帮助。

Answer 4

这是一个非常简单的错误。您添加了一些不必要的边距。

Remove those margins and add/remove equal margins for each image.
And you can make this as a horizontal chain too(not mandatory)

app:layout_constraintHorizontal_chainStyle="spread"

如何在Constraint Layout中连续设置多个ImageView？

how to set multiple ImageViews in a row in Constraint Layout?

java

android

android-imageview

android-constraintlayout