如何在ConstraintLayout中将布局的所有内容居中显示

Question

我正在制作一个登录界面，其中有两个EditText和两个Buttons。我将它们垂直放置在彼此下方。但是我想把所有的内容都居中放置在我的布局中。

以下是我的activity_login.xml：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/loginLayout"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/passwordLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_user"
            android:hint="@string/email"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailLayout"
        app:layout_constraintBottom_toBottomOf="@+id/logi">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_password"
            android:hint="@string/password"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginSubmit"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/passwordLayout" />

    <Button
        android:id="@+id/registerText"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/register"
        android:theme="@style/RegistrationButton"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>

这里是布局的图片： 我无法将这些视图居中显示。

- sagar suri

---

实际上它们似乎是“居中”的。但我猜你想让它们的宽度更小，同时保持居中？或者你是指垂直居中？ - Michael Troger

垂直居中 @MichaelTroger - sagar suri

将所有视图放在一个父布局中，并将父布局的重心设置为中心。 - nivesh shastri

但是在ConstraintLayout中，我们应该避免给视图添加深度，对吗？@niveshshastri - sagar suri

可能是如何在ConstraintLayout中居中元素的问题的重复。 - Yogesh Mane

我认为您应该按照下面的链接进行操作：https://dev59.com/95nga4cB1Zd3GeqPZoTD - komal akhani

Answer 1

首先，请确保您使用最新版本的ConstraintLayout（撰写本文时为1.0.2）。您可以通过给最上面的元素（emailLayout）添加app:layout_constraintVertical_chainStyle="packed"属性来实现垂直居中。

此外，您需要确保所有元素在代码中像链条一样连接。即最上面的视图（emailLayout）受到父级上方的约束，并受到下一个兄弟（passwordLayout）的下方约束。

第二个视图（passwordLayout）需要在顶部（emailLayout）受到前面的兄弟的约束，在底部受到后面的兄弟（loginSubmit）的约束，依此类推...

最后一个视图（registerText）也是这样，顶部约束到前面的兄弟，但底部约束到父级的底部。

提示：在ConstraintLayout中，android:orientation="vertical"无用。可以省略这一行。

编辑： 以下是使用ConstraintLayout进行垂直居中的最小代码示例：

<?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">
    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff0000"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/view2"/>
    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#00ff00"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintBottom_toTopOf="@+id/view3"/>
    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#0000ff"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

导致如下结果：

- Michael Troger

Answer 2

我正在我的ConstraintLayout中使用紧凑链。所以，你的应该像这样：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/loginLayout"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/passwordLayout"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_user"
            android:hint="@string/email"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/emailLayout"
        app:layout_constraintBottom_toTopOf="@+id/loginSubmit"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_password"
            android:hint="@string/password"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginSubmit"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        app:layout_constraintTop_toBottomOf="@+id/passwordLayout"
        app:layout_constraintBottom_toTopOf="@+id/registerText"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/registerText"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/register"
        android:theme="@style/RegistrationButton"
        app:layout_constraintTop_toBottomOf="@+id/loginSubmit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>

最终的布局应该如下所示：

- Mehmed