在ConstraintLayout中使两个视图水平居中于另一个视图下方

Question

我有三个按钮，一个全屏宽度的按钮位于屏幕两侧各半宽的两个按钮上方。以下是布局：

<?xml version="1.0" encoding="utf-8"?>
<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">
    <Button
        android:id="@+id/btn_save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Save"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_delete"
        app:layout_constraintVertical_chainStyle="packed"/>
    <Button
        android:id="@+id/btn_delete"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
        app:layout_constraintTop_toBottomOf="@+id/btn_save" />
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn_delete"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_save"/>
</android.support.constraint.ConstraintLayout>

结果是取消按钮被按下，而不是与删除按钮水平对齐。 在稍微尝试了一下后，为了使取消按钮与删除按钮水平对齐，我必须向取消按钮中添加以下内容之一。

app:layout_constraintBaseline_toBaselineOf="@+id/btn_delete"

或者

app:layout_constraintVertical_bias="0.0"

问题：

1. 为什么 ConstraintLayout 将取消按钮向下推，而不是与删除按钮对齐？我必须在取消按钮上使用基线或偏置才能使它与同一行上的删除按钮对齐？

2. 除了使用基线和偏置之外，还有其他方法可以使取消按钮与删除按钮对齐吗？

- s-hunter

Answer 1

为什么 ConstraintLayout 把取消按钮往下移动了，而不是与删除按钮对齐？为什么我必须在取消按钮上使用基线或偏差才能使它与同一行上的其他控件对齐？

cancel 按钮被往下推是因为您在 cancel 按钮上设置了以下两个约束：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_save"

“取消”按钮在父布局底部和“保存”按钮之间垂直居中。请保留HTML标签。

现在，你可能会问，“删除”按钮也有相同的两个约束条件，那为什么它没有像“取消”按钮一样被向下推？ 原因是，你已经在“保存”按钮上设置了以下约束条件。

app:layout_constraintBottom_toTopOf="@+id/btn_delete"

如果你把它改成

app:layout_constraintBottom_toTopOf="@+id/btn_cancel"

删除按钮将下移，取消按钮将与保存按钮对齐。

如果您更改为

app:layout_constraintBottom_toBottomOf="parent"

您将获得以下布局。

请注意，现在删除和取消按钮以相同的方式对齐。原因是现在删除和取消按钮都有以下约束条件。

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_save"

两个按钮都在父布局的底部和保存按钮之间垂直居中。

除了使用基线和偏差之外，还有其他方法可以使取消按钮与删除按钮对齐吗？

有多种方法可以实现您所需的布局。

一种方法是移除

app:layout_constraintBottom_toBottomOf="parent" 

从取消和删除按钮中都移除并修改

app:layout_constraintBottom_toTopOf="@+id/btn_delete"

到

app:layout_constraintBottom_toBottomOf="parent"

在“保存”按钮布局中。

这将给您以下布局。

这种方法有效是因为移除底部约束使得cancel和delete按钮在save按钮和父布局底部之间的空间中不再垂直居中对齐。

- Yousaf

Answer 2

请从 btn_cancel 中移除 app:layout_constraintBottom_toBottomOf="parent"

 <?xml version="1.0" encoding="utf-8"?>
    <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">

        <Button
            android:id="@+id/btn_save"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Save"
            app:layout_constraintBottom_toTopOf="@+id/btn_delete"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Delete"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
            app:layout_constraintTop_toBottomOf="@+id/btn_save" />

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Cancel"
            app:layout_constraintLeft_toRightOf="@+id/btn_delete"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_save" />
    </android.support.constraint.ConstraintLayout>

或者

移除app:layout_constraintVertical_chainStyle="packed"。有关详细信息，请查看chainStyle。

- MJM

---

很酷，通过从取消按钮中删除app:layout_constraintBottom_toBottomOf="parent"，它可以正常工作，你能解释一下为什么吗？删除按钮也有这个属性，但它没有被向下推。 - s-hunter

更新了答案，原因是 chainStyle。 - MJM