如何在 Android 中将按钮与背景图像对齐

Question

我正在尝试制作一个非常简单的“Zune 模拟器”，其中我有一个 Zune 图像，我想在其上放置透明按钮，以便用户似乎可以单击按钮来使用其功能。 This is the background image I'm using，播放/暂停按钮调用一个播放 mp3 的方法，返回按钮只是关闭活动。

我遇到的问题是将按钮放置在图像中的按钮上方。使用这些限制，我可以让它们在我朋友的手机上对齐，但在我的手机上却不行，因为我的手机有不同的纵横比。

我能找到的最接近的答案是this 问题，但所有答案似乎都误解了操作员的要求。

This 是我的活动当前的外观，深灰色矩形是按钮。请注意它们都显着低于图像上的按钮。

如何设置按钮，以使它们保持在图像的相同部分上，而不管屏幕显示的纵横比如何？ 我应该使用相对布局还是其他？ 这甚至可能吗？任何帮助表示赞赏

作为参考，这是我当前的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Zune">

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/zune" />

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.56" />

<Button
    android:id="@+id/play"
    style="@android:style/Widget.Holo.Button.Small"
    android:layout_width="40dp"
    android:layout_height="45dp"
    android:onClick="playZune"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintHorizontal_bias="0.91"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.83" />

<Button
    android:id="@+id/back"
    style="@android:style/Widget.Holo.Button.Small"
    android:layout_width="48dp"
    android:layout_height="55dp"
    android:layout_marginTop="16dp"
    android:onClick="clickBack"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.845" />
</android.support.constraint.ConstraintLayout>

Answer 1

我从事过类似的项目，我设法使事情顺利进行的两种简单方法是：

1. 不要将按钮作为背景的一部分，而是将其作为单独的可绘制对象。

和

1. 使用透明按钮，或多或少字面意思应该覆盖在背景上绘制的按钮，因此它给人的印象是您正在触摸绘制在背景上的假按钮，即使它没有不适合 100%。

在您的情况下，我认为 (2) 会是一个更好的选择，因为按钮的绘制有点与屏幕边框“集成”。

对于这两种选择，为了使用ContraintLayout 定位按钮，我使用高度百分比添加了horizontal guideline。通过这种方式，我创建了一个矩形区域来放置隐形按钮。
例如，在您的布局中，距离底部 25% 或 30%。

放置guideline后，将不可见按钮的顶部约束到guideline，将按钮的底部约束到布局的底部，并将其水平居中。

希望大多数时候用户点击背景上的按钮时会触摸到不可见的按钮。