如何在ConstraintLayout中使两个视图水平居中？

Question

在 ConstraintLayout 中，我需要将两个视图视为一组，并将此组居中水平放置在父级中，如下图所示：

这是我的xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

我已经看过这个答案，但它只适用于两个视图具有相同的宽度。我的视图宽度不同，所以Guideline无法使用！ 我该怎么做？

- Alireza Noorali

---

@AlirezaBideli 当两个视图具有相同的宽度时，它可以工作。我的问题不是重复的。 - Alireza Noorali

您想将TextView都置中吗？如果您有图像，想要哪种视图，请发布它。 - Shweta Chauhan

@ShwetaChauhan 这个问题包含了我想要的照片。 - Alireza Noorali

@ShwetaChauhan 感谢您的时间。Pawel的答案简单易懂，而且有效。 - Alireza Noorali

@ShwetaChauhan 我已经正确地设置了宽度并做出了响应。 - Alireza Noorali

Answer 1

你的方法很好，但是你在指定约束方面存在错误。每个View只能设置一个start和一个end约束条件，因此你需要移除

app:layout_constraintEnd_toEndOf="parent"

来自第一个 TextView

app:layout_constraintStart_toStartOf="parent"

由于它们导致链条无效，因此从第二个开始。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Pawel Laskowski

---

谢谢你，我想我的大脑已经累了。我犯了一个荒唐的错误。 - Alireza Noorali

Answer 2

你可以使用指南和障碍来实现你的视图。

在中心采用垂直指南线。左侧 textview 从 barrier1 开始约束，右侧 textview 到达 barrier2 结束约束。

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_50sdp"
        android:layout_marginEnd="@dimen/_5sdp"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="left"
        app:constraint_referenced_ids="view_a" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:layout_marginStart="@dimen/_5sdp"
        android:text="View B"
        app:layout_constraintEnd_toStartOf="@+id/barrier2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintBottom_toBottomOf="@id/view_a"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@id/view_a" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="view_b" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

</androidx.constraintlayout.widget.ConstraintLayout>

- Shweta Chauhan