在图像上重叠按钮

Question

我想在一张图片上重叠 10 个按钮。我正在使用 RelativeLayout 做同样的事情，但结果是，按钮的位置在不同的设备上发生了变化。那么，有人可以告诉我解决方法吗？这是 activity 的 xml 文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/exercise1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
tools:context="nmss.example.com.coach.Exercise1">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/humanbody"
    android:layout_marginStart="20dp"/>

<Button
    android:id="@+id/btn_neck"
    android:layout_width="wrap_content"
    android:layout_height="35dp"
    android:layout_marginStart="145dp"
    android:layout_marginTop="62dp"
    android:text="Neck"
    android:textSize="12sp" />

<Button
    android:id="@+id/btn_shoulder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="35dp"
    android:layout_marginTop="75dp"
    android:text="Shoulder"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_biceps"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="25dp"
    android:layout_marginTop="135dp"
    android:text="Biceps"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_forearm"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="3dp"
    android:layout_marginTop="195dp"
    android:text="Forearm"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_quads"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="68dp"
    android:layout_marginTop="315dp"
    android:text="Quads"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_chest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="145dp"
    android:layout_marginTop="100dp"
    android:text="Chest"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_abs"
    android:layout_width="65dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="150dp"
    android:layout_marginTop="160dp"
    android:text="Abs"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_triceps"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="246dp"
    android:layout_marginTop="125dp"
    android:text="Triceps"
    android:textSize="12sp" />

<Button
    android:id="@+id/btn_mid_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="215dp"
    android:layout_marginTop="175dp"
    android:text="Middle back"
    android:textSize="12sp"/>

<Button
    android:id="@+id/btn_calves"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="210dp"
    android:layout_marginTop="400dp"
    android:text="Calves"
    android:textSize="12sp"/>

</RelativeLayout>

This is the view in Android Studio

Answer 1

永远不要硬编码这样的大小，25dp，将此 link 添加到您的依赖项中，以获取每个屏幕的尺寸。

 compile 'com.intuit.sdp:sdp-android:1.0.4'

它的用途是这样的，

  android:layout_marginTop="@dimen/_110sdp"

写完@dimen/...Ctrl+Space，可以看到从1dp到600dp的维度值。试试看，很有用。

Answer 2

只需使用 LinearLayout 而不是 RelativeLayout。尝试使用百分比在顶部、底部、右侧和左侧排列图像按钮。您还需要在 res 文件夹 中为所有设备创建不同的布局文件夹，并相应地使用尺寸。

在图像上重叠按钮

Overlapping a button on an image

android

android-layout

android-relativelayout