Как установить несколько ImageViews подряд в макете ограничения?

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 почти таким же, как только изменил элемент представления.

<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" к первому изображению. Вы можете найти больше информации об этом здесь

Answer 2

Это очень простая ошибка. Вы добавили несколько ненужных полей.

Удалите эти поля и добавьте / удалите одинаковые поля для каждого изображения.
И вы можете сделать это также в виде горизонтальной цепочки (не обязательно)

app:layout_constraintHorizontal_chainStyle="spread"

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

Ну, эти поля испортили позиции. Я просто избавляюсь от полей в каждом ImageView, и теперь они идеально выровнены.