树型列表结构宽度调整_Material Design 网格列表

网格列表是标准列表视图的替代方法。

网格列表由以垂直和水平布局排列的重复单元格图案组成。

网格列表最适用于类似的数据类型。它们有助于提高对其所包含内容的视觉理解。

用法

网格列表最适合于呈现同质数据（通常是图像），并且针对视觉理解和区分相似数据类型进行了优化。

甲网格列表由重复图案的细胞的网格列表内垂直和水平排列。

平铺包含内容，可以垂直或水平跨越一个或多个单元格。

如果拼贴中的文本需要足够突出以区分主要内容片段，请考虑使用不同的容器，如列表或卡片，优化用于显示文本和促进阅读理解。

列表：针对阅读理解进行了优化，尤其是在比较包含多种数据类型的一组数据时。

卡片：用于格式不一致的内容，例如带有可变长度字幕的照片，或具有异构内容的数据集，例如照片和视频以及书籍的混合集合。

内容

瓷片内容

平铺内容包括主要内容和次要内容。主要内容是主要的区分元素，通常是图像。辅助内容可以是动作或文本。

为缺少主要内容图像的切片提供默认图像。

瓷片中的操作

主要内容和辅助内容上的操作（例如播放，放大，删除或选择）是立即的，通常不会导致网格列表中的选项子菜单（操作溢出）。

操作可以打开后续视图，例如卡片。

主要行动

• 填充整个图块，因此不会通过图标或文本表示
• 在特定网格列表中的整个图块中是一致的。例如，单个网格列表中所有切片的主要操作可能是查看图像的详细信息。

次要动作或内容

• 用图标或文字表示瓷砖
• 在特定网格列表中的整个图块中是一致的
• 放置在特定网格列表的切片内的一致位置，但该一致位置可能在网格列表（角落或边缘）之间变化。例如，一个网格列表中的所有标题可以位于左下角，而另一个网格列表中的所有切片可以将标题放在左上角。

行为

滚动

网格列表通常仅垂直滚动。

不鼓励水平滚动网格列表，因为滚动会干扰典型的阅读模式，从而影响理解。一个值得注意的例外是水平滚动的单行网格图像列表，例如图库，它与典型的阅读模式兼容。

在视图的初始滚动位置切断网格图块以传达内容溢出的滚动方向。

通过切断网格图块来指示内容溢出。

手势

不允许使用每个切片滑动操作。不鼓励采取行动。

平铺过滤和排序

网格列表中的内容可以按编程方式过滤或按日期，文件大小，字母顺序或其他参数排序。

网格列表中的第一个项目位于网格列表的左上角，顺序从左到右，从上到下进行。

尺寸和尺寸调整

调整网格列表的大小会导致切片在水平空间可用时重新排序。全出血网格列表切片调整大小以适应屏幕宽度。

当水平空间收缩时，网格列表不会转换为列表。网格列表和列表是用于强调不同数据类型的单独结构。网格列表优先考虑文本上的图像，并列出文本优先于图像。

要在整个网格列表中保持一致的节奏，请截断对于图块宽度而言太长的文本内容。或者，增加网格大小，以便切片可以容纳更长的标题。

响应式设计

全屏网格列表应使用具有最小和最大宽度的流体图像比率，使用比率基线。它们应该保持固定的高度，边距和填充。

中心网格列表具有最小宽度的流体边距。它们保持固定的图像宽度，高度和填充。

标注

网格列表页眉/页脚

单行页眉/页脚

高度：48dp
文本填充：16dp
默认字体大小：16sp
辅助操作是向页脚右侧齐平。

双行页眉/页脚

高度：68dp
文本填充：16dp
每行的默认字体大小：16sp / 12sp或14sp / 14sp

仅图像网格列表
网格列表填充：4dp或1dp
网格列表中的切片可以跨越多列。
仔细考虑在使用多列切片的网格列表中是否需要辅助文本，因为较大的切片可能会产生显着的空白空间。

单行网格列表

纯文本

高度：48dp
文本填充：16dp
默认字体大小：16sp
网格列表填充：4dp或1dp

带有图标的文本

高度：48dp
文本填充：16dp
默认字体大小：16sp
网格列表填充：4dp或1dp

辅助动作可以在页脚或标题内向右齐平或向左齐平。

双线网格列表

纯文本

高度：68dp
文本填充：16dp
每行默认字体大小：16sp / 12sp或14sp / 14sp
网格列表填充：4dp或1dp

带有图标的文本

高度：68dp
文本填充：16dp
每行的默认字体大小：16sp / 12sp或14sp / 14sp

辅助动作可以在页脚或标题内向右齐平或向左齐平。

网格列表填充：4dp或1dp