ImageButton展开以包裹圆形图像

Question

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

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

其中每个--是水平火柴杆和各|是垂直火柴。因此，为了创建一个盒子版本，我创建了一个3x3的网格，然后在（0,1）和（2,1）以及在（1,0）和（1,2）的垂直火柴杆上填充水平火柴梗， 。我用图像按钮做了这个。但是，当我查看xml编辑器中的设计选项卡时，发现只有右上角是完全可见的，并且网格单元很大。我怀疑这是因为ImageButtons扩展为将两张图片放在一起，两者都相当大，所以我想知道是否有一种方法可以强制ImageButton保持相同的大小并缩放图片。我的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在页面的底部。

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

然后在xml代码中将您的图像宽度和高度设置为48dp。这样它会适当扩展设备，看起来是正确的。