Origami Studio 教程 第五节 滚动页面

添加垂直滚动。

滚动视图在 Origami 里超简单啊。怎么给消息列表添加一个基础的滚动呢？下载好教程文件，跟着一步一步来。

开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

▲▲

1. 设置

打开标记为（开始）的文件，图层窗口中 Navigation Bar 和 Tab Bar 下面由一个叫 List 的图层。注意 List 图层的锚点，图层被锚定到顶部，并且位于 Navigation Bar 下面一层被遮挡了一部分。

▲▲

2. 添加滚动交互

鼠标悬停到 List 图层上，点击 Touch 菜单里的 Scroll Y ，编辑器中添加了一个 Scroll 模块。

现在 List 图层可以滚动了。

▲ 试着在查看器中滚动 List 图层。

▲▲

3. 创建容器

你肯能注意到了 List 图层被 Navigation Bar 遮盖了一步分，不是按照预期位从 Navigation Bar 下面开始滚动。还有一个问题就是结束滚动后，List 图层没有在 Tab Bar 上面，底部被 Tab Bar 挡住了。

解决这俩问题需要把 List 的滚动范围限制在 Navigation Bar 和 Tab Bar 之间。可以用组 Group 图层解决。

新建一个 Group ，按 Shift Cmd N 打开新图层下拉框，选择 Group。把 Group 放在 Navigation Bar 和 Tab Bar 下面。

对齐

在 Group 内添加一个 Color Fill 图层，用来检查 Group 的大小。按 Shift Cmd N 打开新图层下拉框，选择 Color Fill，把 Color Fill 拖到 Group 内。

板栗：这步和上一步觉得可以调一下，先添加 Color Fill，选中 Color Fill 按 Cmd G 给 Color Fill 添加一个父级 Group。

▲ 因为 Group 是没有颜色的，只有在里面放一个填充颜色才能看到这个 Group 的尺寸和位置。

调整容器尺寸

默认情况下 Group 图层的尺寸和屏幕的尺寸一样。List 的宽度和屏幕宽度一样，所以宽度保持不变，只需要调整高度就行了。

高度等于屏幕高度减去 Navigation Bar 图层的高度64.5，减去Tab Bar 图层的高度 49。

选中 Group 图层，在属性 Size H 中输出 -64.5-49，按确定。

▲ 可以看到计算出的新高度值。

对齐容器位置

在查看器中可以到看到计算后的新高度值也没有对齐 List 图层（Color Fill 下方）。这是因为 Group 图层对齐屏幕的中心。

将 Group 的锚点改为上中点，Y 轴位置输入和 Navigation Bar 一样的64.5。现在 Group 的位置和原型一致了。

▲ Y 轴位置从屏幕顶部测量是由锚点决定的。

现在 Group 在正确的位置上，可以临时图层 Color Fill 了，并将 List 拖动到 Group 内。

完成。

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！