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。這樣它會適當擴展設備，看起來是正確的。