android - 如何在 Android Studio 中垂直居中 ConstraintLayout 内容？

Question

我是 Android Studio 的初学者，我试图将 ConstraintLayout 的内容垂直居中，但没有成功。我尝试使用 android:gravity="center" 并删除了所有元素的 app:layout_editor_absoluteY，但没有发生......所以，我怎么能集中这个？

<?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:background="@layout/gradient"
    android:gravity="center"
    tools:context="com.test.test.MainActivity"
    tools:layout_editor_absoluteY="81dp"
    tools:layout_editor_absoluteX="0dp">

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:ems="10"
        android:hint="@string/lblEmail"
        android:inputType="textEmailAddress"
        android:textColorHint="@color/colorGray"
        android:background="@color/colorWhite"
        android:padding="15dp" />

    <EditText
        android:id="@+id/txtSenha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="@string/lblSenha"
        android:inputType="textPassword"
        android:textColorHint="@color/colorGray"
        android:background="@color/colorWhite"
        android:padding="15dp"
        app:layout_constraintTop_toBottomOf="@+id/txtEmail" />

    <Button
        android:id="@+id/btnEntrar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:text="@string/lblEntrar"
        app:layout_constraintTop_toBottomOf="@+id/txtSenha" />

</android.support.constraint.ConstraintLayout>

Answer 1

ConstraintLayout 在您可以做出的安排上非常灵活，但根据您的描述，我认为“打包链”可以满足您的要求。

“链”意味着一条线中的所有 View 在两个方向上相互约束，因此顶 View 约束到下一个 View ，下一个 View 约束回到顶 View ，依此类推链.然后，您可以选择链的行为方式。所以在你的例子中(为简单起见删除了额外的东西):

<android.support.constraint.ConstraintLayout
 ....
 android:layout_width="match_parent"
 android:layout_height="match_parent">

    <EditText
        android:id="@+id/txtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/txtSenha"
        app:layout_constraintVertical_chainStyle="packed" />

    <EditText
        android:id="@+id/txtSenha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toBottomOf="@+id/txtEmail"
        app:layout_constraintBottom_toTopOf="@+id/btnEntrar"/>

    <Button
        android:id="@+id/btnEntrar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...
        app:layout_constraintTop_toBottomOf="@+id/txtSenha"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

在链中，顶部 View (或水平链的左侧)是“头部”，您可以在其中更改链的行为，在这种情况下 chainStyle 是 packed 意思是所有 View 都挤在一起。默认情况下，它们会位于屏幕中央，但您可以通过更改“head” View 中的属性来更改此设置，例如 app:layout_constraintVertical_bias="0.9" 会将它们放在屏幕的 90%而是沿着屏幕向下。

More about chains (including diagrams) in the ConstraintLayout guidance here.