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

I am using packed chaining in my ConstraintLayout. So, yours should be like this:

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

The resultant layout should be as follows:

Answer 2

First make sure you use an up to date version of the ConstraintLayout (at the time of writing 1.0.2). You can achieve vertical centering by giving the top most element (emailLayout) the app:layout_constraintVertical_chainStyle="packed" attribute.

Besides that you need to make sure that all elements are connected like a chain in the code. I.e. the upper most view (emailLayout) is under constraint of the parent on top and under constraint of the next sibling (passwordLayout) on the bottom.

The second view (passwordLayout) needs to be under constraint of the sibling before it at the top (emailLayout) and under constraint of the next sibling (loginSubmit) at the bottom and so on...

The last view (registerText) has a top constraint to the sibling before as well but has a bottom constraint to the bottom of the parent.

Hint: android:orientation="vertical" is useless in a ConstraintLayout. You can leave this out.

EDIT: Here a minimum code example of vertical centering with the 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>

Resulting in:

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

2 个答案: