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

首先，您应该将不同大小的drawable与不同的视口兼容，比率如下：https://material.io/guidelines/layout/units-measurements.html#units-measurements-designing-layouts-for-dp位于页面底部。

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

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

ImageButton扩展为包装arround图像

1 个答案: