Question

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

如何放置与拉伸图像一致的按钮以填充不同的屏幕尺寸。

现在使用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" />

我正在使用的临时图片： options http://ft.trillian.im/17107e0bd3d38d3147acf89ff7b55b6543455af6/6ypgZtJZUrzBt6UacYIWSqvJotOJc.jpg

Answer 1

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

要调整和定位这些按钮，请确定它们的左/右和上/下边距是屏幕宽度和高度的百分比。然后，您可以创建自定义布局（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);
    }
}

将按钮放在ImageView顶部，使用不同的屏幕尺寸进行拉伸

1 个答案: