将 Button 放置在具有不同屏幕尺寸的 ImageView 之上

Posted 2023-02-22

【中文标题】将 Button 放置在具有不同屏幕尺寸的 ImageView 之上

【英文标题】：Placing Button on top of ImageView that stretches with different screen sizes

【发布时间】：2015-08-29 19:37:34

【问题描述】：

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

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

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

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

<Button
    android:layout_
    android:layout_
    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_
    android:layout_
    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）}

【问题讨论】：

你能发布你的布局代码吗？

您可以使用 ImageButton 进行相同的工作。

已发布。我需要一个透明按钮，所以应该不重要吧？

发布设计。会更容易实现。

添加了我用于演示的临时图像。

【参考方案1】：

您可以从背景图像中省略两个按钮图形（只留下一个空白区域），并将它们分开为图像。然后，您可以将它们放在两个ImageButtons 上。这解决了必须完美排列绝对像素的直接问题。

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

自定义 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);