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

我从事过类似的项目，而设法使事情正常运行的两种简单方法是：

不要将按钮包含在背景中，而是将其作为单独的可绘制对象。

和

使用透明按钮，应该按字面意思或多或少覆盖背景上的按钮图形，因此即使您没有触摸到在背景上绘制的假按钮，也能给人以印象不适合100％。

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

对于这两种选择，要使用ContraintLayout定位按钮，我添加了horizontal guideline并使用了一定百分比的高度。这样，我创建了一个矩形区域，用于放置隐形按钮。
例如，在您的版式中，看起来好像是底部的25％或30％。

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

希望大多数情况下，用户在背景上按下按钮时，就会触摸不可见的按钮。

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

1 个答案: