代码之家 › 专栏 › 技术社区 › s-hunter

在ConstraintLayout中的另一个视图下水平居中两个视图

android-constraintlayout android

10

s-hunter · 技术社区 · 8 年前

我有3个按钮,一个全宽按钮位于屏幕半宽的两个按钮之上。布局如下:

<?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"

问题:

为什么ConstraintLayout按下了cancel按钮,而没有将其与delete按钮对齐?为什么我必须在“取消”按钮上使用基线或偏差,以便使其在同一条线上对齐?
除了使用基线和偏差外,是否还有其他方法使“取消”按钮与“删除”按钮对齐?

2 回复 | 直到 8 年前

1

9

Yousaf 8 年前

为什么ConstraintLayout按下了cancel按钮而不是是否将其与删除按钮对齐?为什么我必须使用基线或“取消”按钮上的偏差,以使其与线

cancel 按钮被按下,因为在 取消 按钮

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

这个 取消 按钮为 垂直居中 之间 save 按钮和父布局的底部。

现在 你可能会问 那个 delete 按钮也有相同的两个约束,那么为什么它没有像 取消 按钮有吗?。 原因是 ,您已对其设置以下约束 拯救 按钮

app:layout_constraintBottom_toTopOf="@+id/btn_delete"

如果您将其更改为

app:layout_constraintBottom_toTopOf="@+id/btn_cancel"

删去 按下按钮,然后 取消 按钮将与对齐 拯救 按钮

如果您将其更改为

app:layout_constraintBottom_toBottomOf="parent"

您将获得以下布局

请注意, 删去 和 取消 按钮现在是 以相同方式对齐 . 原因是现在 删去 和“取消”按钮有以下限制

应用程序:layout\u constraintBottom\u toBottomOf=“父”
应用程序:layout\u constraintTop\u toBottomOf=“@+id/btn\u保存”

两个按钮都是 垂直居中 在 拯救 按钮和父布局的底部。

除了使用基线和偏差,还有其他方法是否使“取消”按钮与“删除”按钮对齐?

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

一种方法是删除

app:layout_constraintBottom_toBottomOf="parent"

从两者 取消 和 删去 按钮和更改

应用程序:layout\u constraintBottom\u toTopOf=“@+id/btn\u删除”

到

应用程序:layout\u constraintBottom\u toBottomOf=“父”

在里面 拯救 按钮布局。

这将为您提供以下布局

此方法有效,因为删除 bottom constraint 两者兼而有之 取消 和 删去 按钮至 不垂直居中对齐 在 拯救 按钮和父布局的底部。

2

6

s-hunter 8 年前

去除 app:layout_constraintBottom_toBottomOf="parent" 从…起 btn_cancel

 <?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 https://developer.android.com/training/constraint-layout/index.html#constrain-chain