图像按钮展开以环绕图像

Question

我正在尝试制作一个火柴棒游戏，所以我需要创建一个火柴棒网格。最终它需要更大，但我从小开始。所以，如果你不熟悉这个游戏，开始它看起来像这样：

 --   --   --
|   |    |    |
 --   --   --
|   |    |    |
 --   --   --
|   |    |    |
 --   --   --

其中每个-- 是水平火柴，每个| 是垂直火柴。因此，为了创建一个盒子版本，我创建了一个 3x3 网格，然后在 (0, 1) 和 (2, 1) 处填充水平火柴棒，在 (1, 0) 和 (1, 2) 处填充垂直火柴棒.我使用图像按钮做到了这一点。但是，当我在 xml 编辑器中查看设计选项卡时，我看到只有右上角完全可见，并且网格单元格很大。我怀疑这是因为 ImageButtons 正在扩展以环绕两张图片，这两张图片都相当大，所以我想知道是否有一种方法可以强制 ImageButtons 保持相同的大小并缩放图片。我的xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:id="@+id/matchgame"
    android:layout_height="match_parent"
    android:weightSum="4" >
    <GridLayout
        android:id="@+id/board"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:columnCount="3">

        <ImageButton
            android:layout_row="0"
            android:layout_column="1"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:src="@drawable/matchstick_horizontal" />

        <ImageButton
            android:layout_row="1"
            android:layout_column="0"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:src="@drawable/matchstick_vertical"/>

        <ImageButton
            android:layout_row="1"
            android:layout_column="2"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:src="@drawable/matchstick_vertical"/>

        <ImageButton
            android:layout_row="2"
            android:layout_column="1"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:src="@drawable/matchstick_horizontal"/>

    </GridLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical">

            <TextView
                android:id="@+id/timer"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:gravity="center_vertical|center_horizontal"
                android:text="HH : MM : SS"/>

            <ImageButton
                android:id="@+id/playPause"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical|center_horizontal"
                android:src="@drawable/button2"
                android:backgroundTint="@color/white"/>

        </LinearLayout>

    </LinearLayout>
</LinearLayout>

Answer 1

首先，您应该有不同尺寸的可绘制对象以与不同的视口兼容，比例在这里：页面底部的https://material.io/guidelines/layout/units-measurements.html#units-measurements-designing-layouts-for-dp。

您应该从您想要的实际像素数量开始（出于您的目的，我将从 48 像素开始）作为最小的图像，然后如图所示放大。这些需要放置在具有完全相同名称的相应 res/mipmap 文件夹中。 （文件夹与该网站上的名称匹配）例如，在 res/mipmap/xxxhdpi 中应该有“matchstick.png”，在 res/mipmap/xxhdpi 中应该有“matchstick.png”然后在 xml 中使用 android:src="@mipmap/matchstick.png" 和它会自动缩放。

然后在 xml 代码中将图像的宽度和高度设置为 48dp。这样，它可以适当地与设备一起扩展，并且看起来正确。