模式 滚动技术

滚动技术

滚动技术会影响在有应用栏时,内容该如何滚动。

下列这些模式描述了滚动内容的海拔,如何调整弹性区域,以及何时固定指定元素。

应用栏可滚动的区域

状态栏
工具栏
选项卡栏/搜索栏
弹性区域

应用栏可滚动的区域 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

设计滚动行为时,应用栏包含 4 个主要区域(简称为),包含下列滚动结构:

  • 状态栏
  • 工具栏
  • 选项卡栏/搜索栏
  • 弹性区域:可容纳期望宽高比的图片或扩展应用栏

应用栏组件可以包括:状态栏、导航栏、选项卡栏/搜索栏、弹性区域

状态栏、导航栏、选项卡栏/搜索栏、弹性区域

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

标准应用栏

规格:

标准应用栏在手机上为 56dp,在更大屏幕的设备上为 64dp。

应用栏有两个滚动选项:

  1. 应用栏可以和内容一起滚动离开屏幕,并在用户反向滚动时重新回到屏幕。
  2. 应用栏可以固定在屏幕顶部,内容可以在应用栏后面滚动。

标准应用栏

状态栏高度:24dp
工具栏高度:56dp/64dp

滚动时应用栏离开屏幕的动画

带选项卡的应用栏

标准应用栏组件可以包含以下块:工具栏、选项卡栏、弹性区域。

选项卡可以具有其中的一种行为:

  1. 工具栏离开屏幕时,选项卡栏可以固定在屏幕顶部
  2. 应用栏始终固定在屏幕顶部,内容在应用栏后面滚动
  3. 工具栏和选项卡栏都会随着内容一起滚动离开屏幕。选项卡栏会在反向滚动时重新回到屏幕,工具栏会在完成反向滚动后回到屏幕。

状态栏、工具栏、选项卡栏

状态栏高度:24dp
工具栏高度:56dp/64dp
选项卡栏高度:48dp

动画显示工具栏滚动时离开屏幕,选项卡栏和应用栏固定显示。

弹性区域

因为应用栏是弹性的,它可以扩展以适应更大的排版或图片。要扩展应用栏,请添加一个弹性区块。

弹性区域可以通过以下其中一种方式来显示:

  1. 弹性区域缩小到只显示工具栏。标题在导航栏中缩小到 20sp。当滚动到页面顶部时,弹性区域和标题再次增大到原来位置。
  2. 整个应用栏滚动离开屏幕。当用户反向滚动时,工具栏回到屏幕并固定到屏幕顶部。当反向滚动到顶部时,弹性区域和标题会再次增大到原来位置。

状态栏、工具栏、弹性区域

状态栏高度:24dp
工具栏高度:56dp/64dp

动画显示滚动时的弹性区域

含图片的弹性区域

使用弹性区域来容纳应用栏期望宽高比比的图片。

在此示例中,宽高比是 4:3。滚动时,内容向上推动图片同时缩小弹性区域。在变化结束时,图片变成了应用的主色,并且独立于滚动的内容。

状态栏、工具栏、弹性区域

状态栏高度:24dp
工具栏高度:56dp/64dp

动画显示滚动时的弹性区域和图片

与内容部分重叠的弹性区域

内容可以与应用栏部分重叠。

应用栏有两种滚动方式:

  • 应用栏最初位于内容的后面。向上滚动时,应用栏比内容滚动的更快,直到不再与内容重叠,然后固定下来,之后应用栏会立即升高海拔,使内容在应用栏后面滚动。
  • 应用栏可以和内容一起滚动离开屏幕,并在用户反向滚动时返回。

以这种方式交互时,应用栏不能包含选项卡栏。

弹性区域

状态栏:24dp
工具栏:56dp/64dp

动画显示滚动时的弹性区域与部分重叠内容

Z 轴的空间图,侧视图