Android 背景圖片適配變形解決方案

問題成因

RelativeLayout 設定 android:background="@drawable/bg" 時，預設會將圖片**拉伸填滿**整個 View 區域，導致：

• 長寬比不同時：圖片扭曲變形
• 解析度不足時：放大模糊
• 不同螢幕尺寸：無法完美適配

核心解決策略

方案一：使用 ImageView + ScaleType（推薦）

<FrameLayout ...>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg" />
    
    <!-- 你的原始 RelativeLayout 內容 -->
    <RelativeLayout ...> ... </RelativeLayout>
</FrameLayout>

scaleType 對照表：

方案二：Drawable XML 定義適配規則

<!-- res/drawable/bg_adaptive.xml -->
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- 底色填補 -->
    <item android:drawable="@color/bg_base_color" />
    <!-- 圖片置中不拉伸 -->
    <item
        android:drawable="@drawable/bg_image"
        android:gravity="center" />
</layer-list>

<RelativeLayout
    android:background="@drawable/bg_adaptive"
    ... >

方案三：多解析度資源檔（專業做法）

res/
├── drawable-mdpi/    bg.png   (基準 1x)
├── drawable-hdpi/    bg.png   (1.5x)
├── drawable-xhdpi/   bg.png   (2x)
├── drawable-xxhdpi/  bg.png   (3x)
└── drawable-xxxhdpi/ bg.png   (4x)

系統會自動根據裝置密度選取最適圖片，配合 centerCrop 達到最佳效果。

方案四：程式碼動態計算（特殊需求）

public class AdaptiveBgLayout extends RelativeLayout {
    private Drawable bgDrawable;
    
    public AdaptiveBgLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        bgDrawable = ContextCompat.getDrawable(context, R.drawable.bg);
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (bgDrawable != null) {
            // 計算保持比例的繪製區域
            int dw = bgDrawable.getIntrinsicWidth();
            int dh = bgDrawable.getIntrinsicHeight();
            float scale = Math.max((float)w/dw, (float)h/dh);
            int nw = (int)(dw * scale), nh = (int)(dh * scale);
            int left = (w - nw)/2, top = (h - nh)/2;
            bgDrawable.setBounds(left, top, left+nw, top+nh);
        }
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        if (bgDrawable != null) bgDrawable.draw(canvas);
        super.onDraw(canvas);
    }
}

最佳實踐建議

1. 優先使用方案一：FrameLayout + ImageView(centerCrop)，效能最好、程式碼最少
2. 提供多解析度圖片：避免低解析度放大模糊
3. 設定底色：android:background="@color/fallback" 防止圖片載入前閃白
4. 避免在 Java 代碼中 setBackgroundResource：XML 宣告更利於預覽與維護

Web 端對應關係（參考）

/* CSS 等價寫法 */
.bg-container {
    background-image: url(bg.jpg);
    background-size: cover;        /* 等同 centerCrop */
    background-position: center;
    background-color: #f0f0f0;     /* 等同 fallback color */
}

掌握這幾種方案，即可從容應對從啟動頁、引導頁到各式業務頁面的背景圖適配需求，確保在折疊螢幕、平板、手機等多樣裝置上呈現最佳視覺效果。