ImageButtonがラップアラウンド画像に展開されます

Question

マッチ棒ゲームを作ろうとしていますので、マッチ棒のグリッドを作成する必要があります。事実、それはもっと大きくなる必要がありますが、私は小さいから始めます。各--が水平マッチ棒であり、各|が垂直マッチ棒で

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

：だから、場合にあなたはそれがこのようになります開始するには、ゲームに慣れていません。そこで、1箱のバージョンを作成するために、3x3グリッドを作成し、水平マッチ棒を（0,1）と（2,1）、垂直マッチ棒を（1,0）と（1,2） 。私はイメージボタンを使ってこれをしました。しかし、XMLエディターでデザインタブを見ると、右上のコーナーのみが完全に視認可能であり、グリッドセルは巨大であることがわかります。私はこれがImageButtonsが2つの写真を包み込むように拡大しているからだと思う。どちらもかなり大きいので、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に設定します。この方法では、デバイスに合わせて適切にスケールされ、正しく表示されます。