创建具有定义大小的表格布局的 3x3 图像按钮

Question

我在尝试创建如下所示的布局时遇到问题：

所需布局

到目前为止，我有这个：

我得到了什么

我正在使用表格布局，我希望的是 3x3 正方形（图像按钮），完美的正方形，每个按钮都有一个图像，应该是正方形的确切大小。

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"
        android:layout_alignParentBottom="true">
        <!-- Row 2 with 3 columns -->

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
            <TextView
                android:id="@+id/TextView01" android:text="Row 2 column 1"
                android:layout_weight="1" android:background="#dcdcdc"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
            <TextView
                android:id="@+id/TextView02" android:text="Row 2 column 2"
                android:layout_weight="1" android:background="#d3d3d3"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
            <TextView
                android:id="@+id/TextView03" android:text="Row 2 column 3"
                android:layout_weight="1" android:background="#cac9c9"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
            <TextView
                android:id="@+id/TextView04" android:text="Row 2 column 1"
                android:layout_weight="1" android:background="#dcdcdc"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
            <TextView
                android:id="@+id/TextView05" android:text="Row 2 column 2"
                android:layout_weight="1" android:background="#d3d3d3"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
            <TextView
                android:id="@+id/TextView06" android:text="Row 2 column 3"
                android:layout_weight="1" android:background="#cac9c9"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
        </TableRow>
        <TableRow
            android:id="@+id/tableRow3"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
            <ImageButton
                android:id="@+id/TextView07"
                android:layout_weight="1"
                android:background="#dcdcdc"
                android:textColor="#000000"
                android:gravity="center"
                android:src="@drawable/btn1" />
            <TextView
                android:id="@+id/TextView08" android:text="Row 2 column 2"
                android:layout_weight="1" android:background="#d3d3d3"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
            <TextView
                android:id="@+id/TextView09" android:text="Row 2 column 3"
                android:layout_weight="1" android:background="#cac9c9"
                android:textColor="#000000"
                android:padding="20dip" android:gravity="center"/>
        </TableRow>
        <!-- Row 3 with 2 columns -->

    </TableLayout>
</RelativeLayout>

Answer 1

您的 TableRow 应包含 WeightSum = 3（列），然后添加 3 个线性布局（记得设置 android：layout_weight="1"），其中包含带有文本视图的图像视图

<TableRow
    android:weightSum="3"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:layout_width="0dp">
        <ImageButton....../>
        <TextView ...../>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:layout_width="0dp">
        <ImageButton....../>
        <TextView ...../>
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_height="100dp"
        android:layout_width="0dp">
        <ImageButton....../>
        <TextView ...../>
    </LinearLayout>

</TableRow>