Android圖片上疊加Button並自由定位的佈局實現

RelativeLayout/FrameLayout + 背景圖 + 絕對邊距實現自由拖拽定位

需求：在一張圖片上放置多個按鈕，並能精確控制每個按鈕的位置（如標記點、熱區交互）。

方案一：RelativeLayout作為容器，圖片做背景

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/your_image"
    android:adjustViewBounds="true">

    <Button
        android:id="@+id/btn_mark1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="150dp"
        android:text="A" />

    <Button
        android:id="@+id/btn_mark2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="200dp"
        android:layout_marginTop="300dp"
        android:text="B" />

</RelativeLayout>

原理：RelativeLayout允許子View通過layout_marginLeft/Top相對容器左上角定位。圖片作為背景自動鋪滿，按鈕懸浮其上。

方案二：FrameLayout + ImageView + 絕對定位（推薦複雜場景）

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

    <Button
        android:id="@+id/btn_mark1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="top|left"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="150dp" />

</FrameLayout>

優勢：FrameLayout專為疊加設計，layout_gravity+margin控制更直觀，圖片可獨立設置scaleType適配不同螢幕。

動態代碼添加/移動按鈕

// 容器：FrameLayout container = findViewById(R.id.container);
Button btn = new Button(this);
btn.setText("動態點");
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
    FrameLayout.LayoutParams.WRAP_CONTENT, 
    FrameLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = 120; // x坐標
params.topMargin = 200;  // y坐標
params.gravity = Gravity.TOP | Gravity.LEFT;
container.addView(btn, params);

// 移動按鈕：更新LayoutParams後requestLayout()
params.leftMargin = 150;
btn.setLayoutParams(params);

進階：支持拖拽移動按鈕

1. 按鈕設置OnTouchListener。
2. ACTION_DOWN記錄初始rawX/rawY與leftMargin/topMargin。
3. ACTION_MOVE計算偏移量，更新LayoutParams並requestLayout()。
4. ACTION_UP可保存最終位置到數據庫/SharedPreferences。

適配不同螢幕尺寸

若圖片與按鈕位置需按比例縮放：

• 獲取圖片原始寬高、顯示寬高，計算縮放比scale = displayWidth / imageWidth。
• 按鈕邊距 = 原始設計邊距 * scale。
• 或使用PercentFrameLayout（支持庫）直接用百分比定位。