行跨度和列跨度设计的最佳布局

Question

如何实现这样的设计我不知道该怎么做，抱歉图像模糊。

我有三个选择

带权重的线性布局（困难）
TableLayout（不支持列跨度）
GridLayout（不知道）

我试过这个table布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/space1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="3dp"
        android:text="Fir 08 Jul 10:44GMT +01 " />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:shrinkColumns="*"
        android:stretchColumns="*">

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="5dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:layout_span="4"
                android:background="#FFFFFF"
                android:gravity="center"
                android:padding="3dp"
                android:text="ATP Singles Winmbeldon"
                android:textColor="#000000" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="A"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="B"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="C"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="D"
                android:textColor="#000000" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="E"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="F"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="G"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="H"
                android:textColor="#000000" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="I"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="J"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="K"
                android:textColor="#000000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="1dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:text="L"
                android:textColor="#000000" />
        </TableRow>

    </TableLayout>


</LinearLayout>

Answer 1

android.support.v7.widget.GridLayout 符合您的情况。

在你的build.gradle中（任何版本都可以）：

compile "com.android.support:gridlayout-v7:24.1.1"

在您的布局 xml 文件中：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:padding="16dp">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="Fir 08 Jul 10:44GMT +01"/>

    <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/darker_gray"
            app:columnCount="8">

        <!--
          Header Row
        -->

        <TextView
                style="@style/CellStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_columnSpan="7"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:padding="3dp"
                android:background="@android:color/darker_gray"
                android:text="ATP Singles Winmbeldon"
                android:textColor="@android:color/white"/>

        <!-- Spacer for green -->
        <View
                style="@style/CellSpacerStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"/>


        <!--
          First Row  SF 13:00
         -->

        <!-- Title -->
        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="2"
                android:text="SF\n13:00"/>

        <!-- Sore 1 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Raonic M. (6)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="3"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="5"/>

        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!-- Sore 2 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Federer R. (3)"/>


        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="5"/>


        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!--
        Second Row  SF 15:00
         -->

        <!-- Title -->
        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="2"
                android:text="SF\n15:00"/>

        <!-- Sore 1 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Berdych T.(10)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="3"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="5"/>


        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!-- Sore 2 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Murray A (2)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="5"/>

        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>

        <!--
         Bottom Brders
        -->
        <View
                android:layout_width="0dp"
                android:layout_height="@dimen/border_size"
                app:layout_columnSpan="7"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"/>

        <View
                android:layout_width="0dp"
                android:layout_height="@dimen/border_size"
                android:layout_marginLeft="@dimen/border_size"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:background="@android:color/white"/>

    </android.support.v7.widget.GridLayout>

</LinearLayout>

在你的 style.xml:

<resources>
    ...
    <style name="CellStyle">
        <item name="android:layout_marginTop">@dimen/border_size</item>
        <item name="android:layout_marginLeft">@dimen/border_size</item>
        <item name="android:background">@android:color/white</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="CellSpacerStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_marginLeft">@dimen/border_size</item>
        <item name="android:background">@android:color/white</item>
    </style>
    ...
</resources>

在你的 dimens.xml:

<resources>
    ...
    <dimen name="border_size">1px</dimen>
    <dimen name="row_height">54dp</dimen>
    ...
</resources>

结果如下：

GridLayout 的属性[document]

app:columnCount为Gridlayout的列数
app:rowCount是Gridlayout的行数。

GridLayout 子项的属性 [document]

app:layout_columnSpan是这个视图占用的列数。
app:layout_rowSpan是这个视图占用的span数

行跨度和列跨度设计的最佳布局

Row span and column span best layout for design

android

android-layout

android-linearlayout

android-gridlayout