【Material Design视觉设计语言】UI组件设计（七）：网格

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[email protected]
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

网格列表是一种标准列表视图的可选组件，通常用来展示同类数据。

一 网格用途

网格列表通常用来展示同类数据（例如：图片）。

二 网格布局

2.1 单元格

单元格（cell）：单元格网格里一系列的连续元素。

单元格在网格中以垂直和水平的方式排列。

2.2 瓷砖

瓷砖（tiles）：瓷砖是单元格里填充的内容。

瓦片用以存放内容，并且可以跨越一个或者多个垂直或者水平的单元格。

2.2.1 瓷砖内容

瓷砖内容包括：

• 主要内容（primary content）：主要内容是有着重要区别的内容，典型的如图片
• 次要内容(secondary content)：次要内容可以是一个动作按钮或者文本。

2.2.2 瓷砖动作

瓷砖动作包括：

主要动作：

• 充满整个瓷砖，因此不会通过图标或者文本呈现。
• 在指定的网格中，所有瓷砖的动作是一致的。比如，在单个网格中，对– 于所有瓷砖的主要动作可以用于查看图片的详细信息。

次要动作：

• 通过图标或者文本呈现出来。
• 在指定的网格中，所有瓷砖的动作是一致的。
• 在指定网格的瓦片中放置的位置是一致的，但是位置可能会在不同的网格（边角或者边界， corners or edges）间有变化。例如：所有网格中的标题可以放置在左下角。

2.2.3 瓷砖行为

滚动行为：网格典型的滚动只有垂直滚动，水平滚动的网格是不鼓励使用的，这通常与用户的阅读习惯有关，影响阅读上的理解。

2.2.4 瓷砖过滤与排序

网格列表中的内容可以编程实现其过滤和排序，例如：通过数据类型、文件大小、字母顺序或者其他参数等。

网格中的第一个条目置于网格的左上角，并且其顺序为从左到右，自上而下。

重置网格列表的尺寸会导致瓷砖在有水平空间可用时重新排序。但是瓷砖并不会缩放以填充可用的水平空间。

当水平空间受限时，网格列表不会转换为列表。网格列表与列表在强调不同数据类型的不同结构。

下面我们就来看几组实际的网格布局。

举例1

仅有图片的网格列表

网格内边距： 4dp

网格列表中的瓦片可以跨多列。

举例2

单行网格列表

高： 48dp

文本内边距： 16dp

默认字体大小： 16sp

网格内边距： 4dp

举例3

两行网格列表

高： 68dp

文本内边距： 16dp

每行的默认字体大小： 16sp/12sp或14sp/14sp

网格内边距： 4dp

举例4

带有图标的文本

高： 68dp

文本内边距： 16dp

每行的默认字体大小： 16sp/12sp 或 14sp/14sp

网格列表表尾或者表头中的次要文本可以右对齐或左对齐。

网格内边距是4dp