如何將Android Studio中的ConstraintLayout內容垂直居中？

Question

我是Android Studio的begginer，我試圖垂直居中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是可以使安排非常靈活，但是從你的描述，我認爲一個「盒裝鏈」將滿足您的要求的。

「鏈」意味着一行中的所有視圖在兩個方向上彼此約束，因此頂視圖會約束到下一個視圖，並且下一個視圖約束回到頂視圖等等鏈。然後您可以選擇鏈條的行爲方式。所以，在你的例子（爲簡單起見去除多餘的東西）：

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

在鏈，頂視圖（或左側臥式鏈）是「頭」，你可以改變鏈的行爲，在此case chainStyle是packed這意味着所有的視圖擠在一起。默認情況下，它們將被打包在屏幕的中心，但是你可以通過改變「head」視圖中的屬性來改變它，例如app:layout_constraintVertical_bias="0.9"會把它們放到屏幕的90％。

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