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

【问题标题】：Row span and column span best layout for design行跨度和列跨度设计的最佳布局
【发布时间】：2016-12-15 03:54:26
【问题描述】：

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

我有三个选择

  1. 带权重的线性布局（硬）

  2. TableLayout（不支持列跨度）

  3. GridLayout（不知道）

我试过这个表格布局

<?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>

【问题讨论】：

  • 我认为您使用线性布局分为 2 个水平布局，在第一个线性布局中放置 textview，在另一个布局中放置 listView，因为在第二个数据中几乎相同...

标签： android android-layout android-linearlayout android-gridlayout


【解决方案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'children[document]的属性

  • app:layout_columnSpan 是该视图占用的列数。
  • app:layout_rowSpan 是该视图占用的 ​​span 数。

【讨论】：

  • 抱歉回复晚了，您能否在此表中添加此绿色图像视图，这样会更有帮助。看我的截图
  • 并添加一些关于网格布局的解释，以便我理解。像 app:columnCount="7" app:rowCount="2"
  • 好的，我会尝试添加绿色的imageview，稍后再解释。
  • @ArpitPatel 我更新了我的答案。更改布局以添加绿色 imageView 并在我的答案底部添加说明。
  • 如果不指定 rowCount，GridLayout 会自动确定行数。因此，无需为您的布局指定 rowCount。
猜你喜欢
  • 2011-09-06
  • 2020-07-23
  • 1970-01-01
  • 2011-05-27
  • 1970-01-01
  • 2014-07-27
  • 2012-10-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode