列表项

列表视图在垂直滚动的单列列表中将内容显示为订单项。如果用户依靠阅读文本和查看数据来进行选择,那么此视图效果最佳。

与网格项相比,列表项的垂直空间要小,因此可在屏幕上显示更多项。


解剖学

在列表视图中,每一行都包含一个表示一个列表项的图块。主要操作可以填充图块,以便用户从图块中的任何位置执行操作。对于以图标和文本表示的补充操作,只有包含图标和文本的区域才可供操作。

1. 主图标
2. 切换器按钮
3. 切换器按钮关闭
4. 主要文本和次要文本
5. 内容图块

规格

单行列表项

两行式列表项

两行式列表项已反转

含标题的多行列表项

多行列表项(无标题)

包含文字溢出的列表项

包含拆分操作的列表项

指示器项在列表项中的位置


缩放布局

这些参考布局展示了如何调整列表项以适应各种宽度和高度的屏幕。(宽度和高度类别在布局部分定义。)请注意,所有降采样或上采样之前,所有像素值都是渲染的像素。

标准屏幕、宽屏幕和超宽屏幕

带内容图块的标准屏幕、宽屏幕和超宽屏幕

超宽屏幕


样式

Typography(排版)

类型样式 字体 重量 大小 (dp)
正文 1 Roboto 正常 32
正文 3 Roboto 正常 24

颜色

元素 颜色(日间模式) 颜色(夜间模式)
主要类型 / 图标 White 白色 @ 88%
次要类型 / 图标 白色 @ 72% 白人 60%
分隔线 白色 @ 22% 白色 @ 12%
列表项背景 黑色 黑色

尺寸

元素 大小 (dp)
列表项高度 96(短屏幕)/116(标准屏幕)/128(高屏幕)
主图标 44
三级图标 24
内容图块 列表项高度减去 1dp
中等头像 76
分隔线粗细 1

示例

设置列表 - 白天
设置列表 - 夜晚
设置列表 - 白天
设置列表 - 夜晚
媒体列表 - 白天
媒体列表 - 夜间