如何使用 TableLayout 来创建我想要的设计？

Question

帮助我使用 TableLayout 和 TableRow，在下图中，我试图像 No.1 一样将 No.4 和 No.6 合并在一起，但我不知道该怎么做。对于第一，我能够做到，因为我只是使用 Layout-weight 将屏幕划分为 3row,3col 。

<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow
    android:layout_weight="2"
    android:id="@+id/tableRow1">
    <TextView
        android:text="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:background="@android:color/holo_blue_dark" />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="2"
        android:stretchColumns="*"
        android:id="@+id/tableLayout1">
        <TableRow
            android:layout_weight="1"
            android:id="@+id/tableRow1"
            android:background="@android:color/holo_red_dark">
            <TextView
                android:text="2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_span="2"
                android:gravity="center" />
        </TableRow>
        <TableRow
            android:layout_weight="1"
            android:id="@+id/tableRow3">
            <TextView
                android:text="3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center" />
            <TextView
                android:text="4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center" />
        </TableRow>
    </TableLayout>
</TableRow>
<TableRow
    android:layout_weight="1"
    android:id="@+id/tableRow1">
    <TextView
        android:text="5"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_span="2"
        android:gravity="center"
        android:background="@android:color/holo_green_dark" />
    <TextView
        android:text="6"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="right" />
</TableRow>

下面是我想要的结果

Answer 1

使用 GridLayout 。试试下面的代码

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="5dp"
android:rowCount="3"
android:columnCount="3"
android:layout_height="wrap_content">


<Button
android:text="1"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:layout_rowSpan="2"
android:layout_width="wrap_content"
android:background="#abc012"/>

<Button
android:text="2"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#a01012"/>
<Button
android:text="3"
android:layout_gravity="fill"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#10fa5c"/>

<Button
android:text="4"
android:layout_rowSpan="2"
android:layout_gravity="fill_vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#9d34a1"/>

<Button
android:text="5"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#f0f53f"/>

</GridLayout>

截图

编辑 1

只需替换

android:layout_height="match_parent"

而不是

android:layout_height="wrap_content"

在<GridLayout> 中。然后你会得到如下输出，