Android 九宮格背景 + 文字左右對齊：RelativeLayout 替代單一 TextView 實現復雜佈局

問題現象

嘗試用單個 TextView 疊加在 ImageView (九宮格背景) 上，設置 layout_alignLeft/Right/Top/Bottom 但文字無法正確分佈在左中右三區域。

根本原因

單一 TextView 無法同時實現「左側文字靠左、中間彈性、右側文字靠右」的三區佈局，需拆分為多個 View。

正確方案：RelativeLayout 容器 + 三個 TextView

<RelativeLayout
    android:id="@+id/container"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:background="@drawable/nine_patch_bg" > <!-- 九宮格背景在容器 -->

    <TextView
        android:id="@+id/leftText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:text="Left"
        android:textColor="#000" />

    <TextView
        android:id="@+id/centerText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center"
        android:textColor="#000" />

    <TextView
        android:id="@+id/rightText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:text="Right"
        android:textColor="#000" />

</RelativeLayout>

動態代碼構建

RelativeLayout rl = new RelativeLayout(this);
rl.setBackgroundResource(R.drawable.nine_patch_bg);
RelativeLayout.LayoutParams rlParams = new RelativeLayout.LayoutParams(
    dp(200), dp(50));
rl.setLayoutParams(rlParams);

// 左
TextView left = new TextView(this);
left.setText("Left");
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
lp.addRule(RelativeLayout.CENTER_VERTICAL);
lp.leftMargin = dp(10);
rl.addView(left, lp);

// 中
TextView center = new TextView(this);
center.setText("Center");
RelativeLayout.LayoutParams cp = new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
cp.addRule(RelativeLayout.CENTER_IN_PARENT);
rl.addView(center, cp);

// 右
TextView right = new TextView(this);
right.setText("Right");
RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
rp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
rp.addRule(RelativeLayout.CENTER_VERTICAL);
rp.rightMargin = dp(10);
rl.addView(right, rp);

進階：LinearLayout + weight 也可實現

<LinearLayout
    android:background="@drawable/nine_patch_bg"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_width="200dp"
    android:layout_height="50dp">

    <TextView android:text="Left" android:layout_width="0dp" android:layout_weight="1" android:gravity="left|center_vertical" android:paddingLeft="10dp"/>
    <TextView android:text="Center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center"/>
    <TextView android:text="Right" android:layout_width="0dp" android:layout_weight="1" android:gravity="right|center_vertical" android:paddingRight="10dp"/>

</LinearLayout>

避坑指南

• 九宮格圖 (.9.png) 必須設置給**容器背景**，而非 ImageView 疊加，否則拉伸區域計算錯誤。
• RelativeLayout 規則 addRule 需 API 17+ 用 RelativeLayout.LayoutParams 構造。
• 文字過長擠壓：設置 ellipsize="end" + maxLines="1" 防止佈局崩壞。

復雜文字佈局拆分多 View 是鐵律：RelativeLayout 精確定位、LinearLayout 彈性分配，單一 TextView 只能做簡單單行/多行文本。