Android 多個 TextView 垂直排列被覆蓋的佈局修復

問題現象

在 XML 佈局中定義兩個 TextView，預期垂直排列顯示，但運行後第一個 TextView 內容不見，僅顯示第二個，推測發生重疊覆蓋。

原始佈局代碼

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:textSize="18dip"
    android:background="#00FF00"
    android:text="文本內容"
    android:gravity="center_vertical|center_horizontal" />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="18dip"
    android:background="#FFFFFF"
    android:textColor="#FF0000"
    android:text="設置字符串顯示為*"
    android:gravity="center_vertical|center_horizontal" />

根因分析

• 代碼片段缺少父佈局容器（如 LinearLayout、RelativeLayout、ConstraintLayout）。
• 直接在 XML 根節點放置多個同級 TextView，且無任何佈局參數指定位置關係，系統無法正確測量與排列，導致重疊。
• 若父佈局為 FrameLayout 或無佈局屬性的 RelativeLayout，子 View 預設堆疊在左上角。

解決方案

方案一：使用 LinearLayout 垂直排列（最簡單）

<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="18sp"
        android:background="#00FF00"
        android:text="文本內容"
        android:gravity="center" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:background="#FFFFFF"
        android:textColor="#FF0000"
        android:text="設置字符串顯示為*"
        android:gravity="center" />

</LinearLayout>

方案二：使用 RelativeLayout 明確指定位置關係

<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="18sp"
        android:background="#00FF00"
        android:text="文本內容"
        android:gravity="center" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"  // 關鍵：指定在 textView1 下方
        android:textSize="18sp"
        android:background="#FFFFFF"
        android:textColor="#FF0000"
        android:text="設置字符串顯示為*"
        android:gravity="center" />

</RelativeLayout>

方案三：使用 ConstraintLayout（現代推薦）

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="18sp"
        android:background="#00FF00"
        android:text="文本內容"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:background="#FFFFFF"
        android:textColor="#FF0000"
        android:text="設置字符串顯示為*"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/textView1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

關鍵點總結

最佳實踐建議

• 任何多 View 佈局必須包裹在父容器中，否則渲染行為未定義。
• 為每個 View 指定 android:id，便於相對定位與代碼查找。
• 優先使用 ConstraintLayout 構建扁平佈局層級，提升渲染性能。
• 使用 match_parent 替代已棄用的 fill_parent。
• 文字大小單位統一使用 sp，非 dip/dp。

總結：多個 TextView 重疊覆蓋根因是缺少父佈局容器或未指定位置關係。使用 LinearLayout、RelativeLayout 或 ConstraintLayout 明確定義垂直排列規則，即可輕鬆解決。