android - 将 Button 放在 ImageView 的顶部，以适应不同的屏幕尺寸

Question

我有一个图像 (match_parent)，其中包含 2 个包含选项的矩形。我试图在图像顶部放置 2 个透明按钮，以便单击图像会产生一个 Action 。但是，我正在尝试支持多种屏幕尺寸，因此虽然我能够使用布局边距来排列特定分辨率智能手机按钮中的矩形，但测试平板电脑完全失败了。

如何放置始终与可拉伸(stretch)以填充不同屏幕尺寸的图像对齐的按钮。

现在使用 dp 的非常简单的布局代码不起作用

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/banner"
    android:background="@drawable/banner"
    android:contentDescription="@string/banner" />

<Button
    android:layout_width="120dp"
    android:layout_height="90dp"
    android:id="@+id/vs_computer"
    android:layout_marginTop="135dp"
    android:layout_marginLeft="135dp"
    android:alpha="0"
    android:clickable="true"
    android:shadowColor="@android:color/transparent"
    android:singleLine="true" />

<Button
    android:layout_width="120dp"
    android:layout_height="100dp"
    android:id="@+id/multiplayer"
    android:layout_marginTop="260dp"
    android:layout_marginLeft="135dp"
    android:alpha="0"
    android:clickable="true"
    android:shadowColor="@android:color/transparent"
    android:singleLine="true" />

我正在使用的临时图像:
_{(来源:trillian.im)}

Answer 1

您可以从背景图像中省略两个按钮图形(只留一个空白区域)并使它们成为单独的图像。然后，您可以将它们放在两个 ImageButton 上。这解决了必须绝对像素完美排列的紧迫问题。

要调整这些按钮的大小和位置，请计算出它们的左/右和上/下边距占屏幕宽度和高度的百分比。然后，您可以创建一个自定义布局(ViewGroup 的子类)并实现 onLayout(...) 方法以将这两个按钮放置在背景图像的所需区域内，方法是将这些百分比应用于您的 View 大小。

自定义 ViewGroup 可能看起来像这样:

public class Blah extends ViewGroup {

    Button b1;

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        b1 = (Button) findViewById(R.id.button_1);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // In dimensions XML: <fraction name="button_margin_horizontal">20%p</fraction>
        int left = (int) getResources().getFraction(R.fraction.button_margin_horizontal, 0, getWidth());
        int right = getWidth() - left;
        int buttonHeight = b1.getMeasuredHeight();
        b1.layout(left, 0, right, buttonHeight);
    }
}