Android LinearLayout 子元素居中與右對齊：layout_weight 與 gravity 組合技巧

需求分析

水平 LinearLayout 中：

• TextView：水平居中顯示
• ImageButton：右側對齊
• 兩者垂直居中對齊

核心解決方案：layout_weight 佔位

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:background="@color/usualBike"
    android:gravity="center_vertical"> <!-- 容器垂直居中 -->

    <!-- 左側佔位，推擠 TextView 到中間 -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/usesLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tituloUsos"
        android:textSize="30sp"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:gravity="center" />

    <!-- 中間佔位，推擠 Button 到右側 -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/disconnect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_logout"
        android:background="@null" />
</LinearLayout>

原理解析

三等分空間：[空白] [TextView] [空白] [Button] → 視覺上 TextView 居中，Button 右對齊

替代方案對比

方案二：RelativeLayout (舊版本常用)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/usesLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/tituloUsos" />

    <ImageButton
        android:id="@+id/disconnect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/icon_logout" />
</RelativeLayout>

✅ 直觀、無嵌套權重計算 | ❌ 相對佈局性能略低、不支持 layout_weight 分配

方案三：ConstraintLayout (現代標準)

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/usesLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tituloUsos"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/disconnect"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ImageButton
        android:id="@+id/disconnect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_logout"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

✅ 扁平佈局、性能最優、可視化編輯 | ❌ 需添加依賴、學習成本稍高

方案四：FrameLayout + gravity (最簡潔但局限大)

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/tituloUsos" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:src="@drawable/icon_logout" />
</FrameLayout>

⚠️ 當 TextView 過長會遮擋 Button，無自動換行/擠壓機制

最佳實踐建議

1. 新項目優先 ConstraintLayout：扁平層級、性能最好、功能最全
2. 簡單對齊用 LinearLayout + weight：無額外依賴、代碼可讀性強
3. 避免嵌套 RelativeLayout：雙重相對定位導致測量複雜度指數增長
4. 垂直居中統一在父容器：android:gravity="center_vertical" 而非每個子 View 設置

避坑提醒

• layout_gravity 在 LinearLayout 中僅對垂直方向生效 (水平由 weight 決定)
• gravity 控制子元素內部對齊，layout_gravity 控制自身在父容器位置
• 權重分配需設置 layout_width="0dp" (水平) 或 layout_height="0dp" (垂直)
• 過度使用 weight 導致多次測量，複雜佈局建議遷移 ConstraintLayout