如何在Android中對齊螢屏中心的3個視圖

我正在嘗試對齊螢屏中心的三個元素（視圖），如下圖所示：

目標是將螢屏中心的這 3 個框與“倒三角形”格式對齊，其中兩個框位于第一行，第二行第三個框上方，在標題和按鈕之間垂直居中，水平居中父母的界限之間。

這是我嘗試過的：

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

然而，第三個盒子并沒有被“打包”到它上面的其他兩個盒子里。

這是目前的結果：

uj5u.com熱心網友回復：

將此代碼用于男性框

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

uj5u.com熱心網友回復：

嘗試添加layout_marginTop一個v_box_other：

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

uj5u.com熱心網友回復：

看來我找到了答案。問題app:layout_constraintBottom_toTopOf="@id/iv_other"出在v_box_male. 它參考的是影像視圖（性別符號）而不是視圖（框）。

它也缺少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" />

uj5u.com熱心網友回復：

<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并且您可以放置??性別影像的布局。

希望你能理解，如果不是請評論

標籤：安卓 xml 安卓布局

上一篇：我在我的專案中添加MPAndroidChart但在我的xml中我找不到LineChart

下一篇：LinearLayout-右對齊影像