Android 如何在屏幕中央对齐 3 个视图

Question

我正在尝试在屏幕中央对齐三个元素（视图），如下图所示：

目标是将屏幕中央的这 3 个框与“倒三角形”格式对齐，其中两个框位于第一行，第三个框位于第二行，两者垂直居中标题和按钮，水平位于 parent 的限制之间。

这是我试过的：

<View
    android:id="@+id/v_box_male"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/iv_other"
    app:layout_constraintEnd_toStartOf="@id/v_box_female"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv_gender"/>

(...)

<View
    android:id="@+id/v_box_female"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="10dp"
    android:background="@drawable/border"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/v_box_male"
    app:layout_constraintTop_toTopOf="@id/v_box_male" />

(...)

<View
    android:id="@+id/v_box_other"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="@drawable/border"
    app:layout_constraintTop_toBottomOf="@id/v_box_male"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@id/bt_next" />

然而，第三个盒子没有被“打包”到它上面的其他两个盒子。

这是目前的结果：

Answer 1

男盒使用此码

<View
 android:id="@+id/v_box_male"
 android:layout_width="120dp"
 android:layout_height="120dp"
 android:layout_marginEnd="10dp"
 android:background="@drawable/border"
 app:layout_constraintEnd_toStartOf="@id/v_box_female"
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@id/tv_gender"
/>

Answer 2

尝试在 v_box_other 中添加一个 layout_marginTop:

<View
    android:id="@+id/v_box_other"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="@drawable/border"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@id/v_box_male"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@id/bt_next" />

Answer 3

看来我找到了答案。问题出在 v_box_male 的 app:layout_constraintBottom_toTopOf="@id/iv_other" 上。它引用的是图像视图（性别符号）而不是视图（框）。

它还缺少 app:layout_constraintVertical_chainStyle="packed"。

正确代码如下：

<View
    android:id="@+id/v_box_male"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/v_box_other"
    app:layout_constraintEnd_toStartOf="@id/v_box_female"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv_gender"
    app:layout_constraintVertical_chainStyle="packed" />

<View
    android:id="@+id/v_box_female"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="10dp"
    android:background="@drawable/border"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/v_box_male"
    app:layout_constraintTop_toTopOf="@id/v_box_male" />

<View
    android:id="@+id/v_box_other"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="10dp"
    android:background="@drawable/border"
    app:layout_constraintBottom_toTopOf="@id/bt_next"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/v_box_male" />

Answer 4

<LinearLayout 
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:orientation="vertical">
    <LinearLayout 
       android:layout_height="match_parent"
       android:layout_width="wrap_content"
       android:orientation="horizontal">
       <View android:layout_height="match_parent"
             android:layout_width="wrap_content"
             android:layout_gravity="center"
             android:layout_weight="1"/>
       <View android:layout_height="match_parent"
             android:layout_width="wrap_content"
             android:layout_gravity="center"
             android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout 
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:orientation="vertical">
       <View android:layout_height="match_parent"
             android:layout_width="wrap_content"
             android:layout_gravity="center"/>
    </LinearLayout>
</LinearLayout>

是示例代码，因为现在无法拥有设备，但我认为它可能对了解想法很有用。上面的代码您可以使用 LinearLayout 而不是 View 并且该布局可以放置性别图像。

希望大家能理解，不明白的请评论

Android 如何在屏幕中央对齐 3 个视图

How to align 3 Views in the center of the screen in Android

xml

android

android-layout