在 ConstraintLayout 中对齐按钮

Question

我设计了一个简单的注册屏幕，如下所示。

这里是它的 xml 代码。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegisterActivity">

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout2"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_display_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Display name" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout3"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout2">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Email" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout4"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout3">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Password" />
</android.support.design.widget.TextInputLayout>

<Button
    android:id="@+id/reg_create_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="64dp"
    android:text="Create account"
    android:textAllCaps="false"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout4"
    tools:layout_editor_absoluteX="132dp" />

但是，当我运行应用程序时，按钮未在中心对齐。

有什么办法解决这个问题吗？

谢谢， 西奥。

Answer 1

您必须在视图中添加约束以使它们在父布局中居中

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

在每个视图上，您​​的按钮都没有这些约束

Answer 2

您需要添加约束来实现您想要的布局，如下所示：

<Button
        android:id="@+id/reg_create_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:text="Create account"
        android:textAllCaps="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout4"
        />

Answer 3

试试这个 .. 仅更改按钮。

 <android.support.constraint.ConstraintLayout   xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegisterActivity">

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout2"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_display_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Display name" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout3"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout2">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Email" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout4"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout3">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/reg_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:text="Password" />
</android.support.design.widget.TextInputLayout>

<Button
    android:id="@+id/reg_create_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="64dp"
    android:text="Create account"
    android:textAllCaps="false"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputLayout4"
    tools:layout_editor_absoluteX="132dp" />
</android.support.constraint.ConstraintLayout>

Answer 4

由于这个属性，您的按钮会在 Android Studio 的预览中居中显示：

tools:layout_editor_absoluteX="132dp"

不过，这些tools 属性在运行时无效。要使按钮居中，您应该将其开始和结束限制为父级的开始和结束：

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"