Android 调整 GridLayout 中的 ImageButton

Question

我有一个 GridLayout 有七个 ImageButton。我想让它们在两个高度相等的行和四个相等的宽度列中，第一行有 4 个按钮，第二行有 3 个按钮。这是我的问题......我想让最后一个按钮跨越两列。我使用了一些尺寸比原始按钮尺寸更大的测试图像。此外，我制作了一个 XML 文件，如下所示，以供按钮样式参考。

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="ButtonStyle">
    <item name="android:textColor">#00FF00</item>
    <item name="android:typeface">monospace</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:background">@android:color/background_light</item>
    <item name="android:layout_marginLeft">5dip</item>
    <item name="android:layout_marginRight">5dip</item>
    <item name="android:layout_marginTop">5dip</item>
    <item name="android:layout_marginBottom">5dip</item>
    <item name="android:layout_width">0dip</item>
    <item name="android:layout_gravity">fill</item>
    <item name="android:layout_columnWeight">20</item>
    <item name="android:scaleType">fitXY</item>
  </style>
</resources>

我可以使用 ImageButton7 的默认值 layout_columnSpan 来排列它们，即 1。但是，当我将那个 ImageButton 的 layout_columnSpan 设置为 2 时，第二行的高度会延伸，给出第二种观点。

View when ImageButton7, layout_columnSpan=1

View when ImageButton7, layout_columnSpan=2

这是我的 XAML 代码：

<?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:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <GridLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridLayout1"
        android:columnCount="4">
        <ImageButton
            android:src="@drawable/btn0"
            android:id="@+id/imageButton1"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn1"
            android:id="@+id/imageButton2"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn2"
            android:id="@+id/imageButton3"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn3"
            android:id="@+id/imageButton4"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn4"
            android:id="@+id/imageButton5"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn5"
            android:id="@+id/imageButton6"
            style="@style/ButtonStyle" />
        <ImageButton
            android:src="@drawable/btn6"
            android:id="@+id/imageButton7"
            style="@style/ButtonStyle"
            android:layout_columnSpan="2" />
    </GridLayout>
</LinearLayout>

目标是获得如下图所示的视图。任何帮助，将不胜感激。

Answer 1

为什么要为此使用 GridLayout？我会使用带权重的 LinearLayout（伪 xml）：

<Vertical LinearLayout>

<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
<element with weight 1/>
</Horizontal LinearLayout with weightsum=4>

<Horizontal LinearLayout with weightsum=4>
<element with weight 1/>
<element with weight 1/>
<element with weight 2/>
</Horizontal LinearLayout with weightsum=4>

</Vertical LinearLayout

Answer 2

图像按钮会尝试保持图像的宽高比，因此当您跨度 Button7 时，它的宽度会扩展，因此它的高度会扩展以保持宽高比。

然后当高度变大时，所有行的高度都会变大，这就会发生 ;)

要解决您的问题，只需使您的 button7 图像的宽高比适合两列（例如现在的 2 倍宽度），您的问题就会得到解决；）

解决您的问题的另一种方法是创建 9patch 图像。看这个 link:

https://developer.android.com/studio/write/draw9patch.html

9pAtch 图像是可扩展的，很棒的东西。

Android 调整 GridLayout 中的 ImageButton

Android Adjusting ImageButtons in a GridLayout

android

xamarin.android

android-gridlayout

android-imagebutton