c# - 如何使用 TableLayout 创建我想要的设计？

Question

帮助我使用 TableLayout 和 TableRow，在下图中，我试图将 No.4 和 No.6 合并在一起，就像 No.1 一样，但是我不知道该怎么做。对于 1 号，我能够做到，因为我只是使用 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>

下面的img是我想要的结果

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>

Screen shot

编辑 1

只是替换

android:layout_height="match_parent"

代替

android:layout_height="wrap_content"

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