下載教程文件** ·····密碼: ahgt**

選擇對應(yīng)名稱的文件夾下載，內(nèi)包含一個(gè)（開始）和一個(gè)（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結(jié)果。

Add horizontal scroll behavior to your designs. 添加垂直滾動(dòng)。

Scrolling views are easy to build in Origami and highly flexible too. We're going to learn how to use scroll by creating a basic Messenger prototype. Make sure you download the tutorial files to follow along.

滾動(dòng)視圖在 Origami 里超簡單啊。怎么給消息列表添加一個(gè)基礎(chǔ)的滾動(dòng)呢？下載好教程文件，跟著一步一步來。

Setting up 配置

Once you have the tutorial files open, you might notice that we have a layer named List set up below the Navigation Bar and the Tab Bar in our Layers panel. Take note of how the List layer is anchored to the top, and positioned exactly below the Navigation Bar.

打開標(biāo)記為（開始）的文件，圖層窗口中 Navigation Bar 和 Tab Bar 下面由一個(gè)叫 List 的圖層。注意 List 圖層的錨點(diǎn)，圖層被錨定到頂部，并且位于 Navigation Bar 下面一層被遮擋了一部分。

Adding scroll interaction 添加滾動(dòng)交互

We can add Scroll to our layer just like any other type of interaction. Hover over the List layer, click the Touch button, and since we want vertical scrolling, select Scroll Y from the menu.

鼠標(biāo)懸停到 List 圖層上，點(diǎn)擊 Touch 菜單里的 Scroll Y ，編輯器中添加了一個(gè) Scroll 模塊。

Our List layer is now scrollable with all the behaviors you would expect from something scrollable — things like velocity and rubber banding etc.

現(xiàn)在 List 圖層可以滾動(dòng)了。

Try scrolling the List layer within the Viewer. 試著在查看器中滾動(dòng) List 圖層。

Containing a scroll 創(chuàng)建容器

You might have noticed that adding Scroll interaction to the layer reset its position to 0
, clipping the Navigation Bar from view. Hide the Navigation Bar layer to see the List layer is now positioned at the top of the screen, rather than below the Navigation Bar as intended.

你肯能注意到了 List 圖層被 Navigation Bar 遮蓋了一步分，不是按照預(yù)期位從 Navigation Bar 下面開始滾動(dòng)。

Another issue is at the very bottom of the scroll. The prototype is not taking into account that our Tab Bar is in the way.This Scroll should be contained above the Tab Bar.

還有一個(gè)問題就是結(jié)束滾動(dòng)后，List 圖層沒有在 Tab Bar 上面，底部被 Tab Bar 擋住了。

We need to contain our List view Scroll to the space between the Navigation Bar and the above the Tab Bar. We can do this with a Group layer.

解決這倆問題需要把 List 的滾動(dòng)范圍限制在 Navigation Bar 和 Tab Bar 之間?？梢杂媒M Group 圖層解決。

Add a Group by clicking on the New Layer button Shift Cmd N, and selecting Group. Make sure the Group is placed below the Navigation Bar and Tab Bar layers.

新建一個(gè) Group ，按 Shift Cmd N 打開新圖層下拉框，選擇 Group。把 Group 放在 Navigation Bar 和 Tab Bar 下面。

Visual alignment 對齊

It can be useful to temporarily add a Color Fill to a new Group layer, just to see how much space it is occupying. Add in a Color Fill layer by clicking on the New Layer button Shift Cmd N, and adding in a Color Fill. Move your Color Fill layer into Group.

在 Group 內(nèi)添加一個(gè) Color Fill 圖層，用來檢查 Group 的大小。按 Shift Cmd N 打開新圖層下拉框，選擇 Color Fill，把 Color Fill 拖到 Group 內(nèi)。

板栗：這步和上一步覺得可以調(diào)一下，先添加 Color Fill，選中 Color Fill 按 Cmd G 給 Color Fill 添加一個(gè)父級 Group。

Groups have no visible state (only their content), hence why Color Fill is going to sit in Group temporarily. 因?yàn)?Group 是沒有顏色的，只有在里面放一個(gè)填充顏色才能看到這個(gè) Group 的尺寸和位置。

Re-enable the Navigation Bar for the remaining steps.

Adjusting our container 調(diào)整容器尺寸

The layer size of Group is the same size as the device screen by default. The screen width is fine in the case, as our List content fits within it. Our height however needs some tweaking.

默認(rèn)情況下 Group 圖層的尺寸和屏幕的尺寸一樣。List 的寬度和屏幕寬度一樣，所以寬度保持不變，只需要調(diào)整高度就行了。

The height we wish to achieve is equivalent to the device screen height minus the height of the Navigation Bar layer, 64.5, minus the height of the Tab Bar layer, 49.

高度等于屏幕高度減去 Navigation Bar 圖層的高度64.5，減去Tab Bar 圖層的高度 49。

Select the Group layer. In the Size H property inside the Layers panel, enter 667-49-64.5 and hit Return.

選中 Group 圖層，在屬性 Size H 中輸出 -64.5-49，按 Return 確定。

You should see a new Size H value of 553.5 appear. 可以看到計(jì)算出的新高度值。

Aligning our container 對齊容器位置

In in the Viewer you should see that the List (underneath our Color Fill) is not perfectly aligned with our new height values. This is because our Group is still anchored to the center of the screen.

在查看器中可以到看到計(jì)算后的新高度值也沒有對齊 List 圖層（Color Fill 下方）。這是因?yàn)?Group 圖層對齊屏幕的中心。

Change the Anchor of our Group to the top of the screen. Then change the Group Y position to the height of the Navigation Bar, which was 64.5. You should then see that our Group (and Color Fill) are now perfectly aligned in our prototype.

將 Group 的錨點(diǎn)改為上中點(diǎn)，Y 軸位置輸入和 Navigation Bar 一樣的64.5?，F(xiàn)在 Group 的位置和原型一致了。

The Y position is measured from the top of the screen, since that is how we positioned our Anchor. Y 軸位置從屏幕頂部測量是由錨點(diǎn)決定的。

Ordering the container

Now that the Group is correctly placed, we can delete our temporary Color Fill, and drag our layer List inside the Group.

現(xiàn)在 Group 在正確的位置上，可以臨時(shí)圖層 Color Fill 了，并將 List 拖動(dòng)到 Group 內(nèi)。

You can now give the prototype a spin in the Viewer. Notice how List is now neatly constrained between the top Navigation Bar and the bottom Tab Bar.

完成。

相關(guān)教程

6. Horizontal Scrolling 水平滾動(dòng)
創(chuàng)建水平分頁滾動(dòng)。

7. Screen Transitions 屏幕切換
創(chuàng)建頁面流程

案例

11. Messenger Home
滾動(dòng)對話列表。
▲ 教程文件里的

5. Facebook New Stories
當(dāng)新聞滾動(dòng)一定距離時(shí)觸發(fā)提示出現(xiàn)。

6. Facebook Popular Events
創(chuàng)建一個(gè)簡單的水平滾動(dòng)。

相關(guān)模塊

Scroll Scroll Settings

相關(guān)圖層

Group Color Fill

NEXT UP
6. Horizontal Scrolling 水平滾動(dòng)
創(chuàng)建水平分頁滾動(dòng)。