如何将布局的所有内容置于ConstraintLayout的中心

Question

我正在制作一个登录界面,我有2 EditText和2 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>

这是布局的图像:

我无法将这些观点带到中心.

Answer 1

首先确保您使用最新版本的ConstraintLayout（在编写 1.0.2 时）。您可以通过为最顶部的元素 ( emailLayout ) 提供app:layout_constraintVertical_chainStyle="packed"属性来实现垂直居中。

除此之外，您需要确保所有元素都像代码中的链一样连接。即最上面的视图（emailLayout）在顶部的父视图和底部的下一个兄弟节点（passwordLayout）的约束下。

第二个视图（passwordLayout）需要在顶部（emailLayout）之前受兄弟姐妹的约束，在底部受下一个兄弟姐妹（loginSubmit）的约束，依此类推...

最后一个视图（registerText）对之前的同级也有一个顶部约束，但对父级的底部有一个底部约束。

提示：android:orientation="vertical"在ConstraintLayout 中是无用的。你可以忽略这个。

编辑：这里是使用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>

导致：

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>

结果布局应如下: