設定 content size,實現scroll view

這次以Apple Store app做為模仿對象,學習Scroll View功能。

水平捲動的 Scroll View

1. 在畫面中加入與螢幕等寬的Scroll View
2. 在 scroll view 內放入一個寬於Scroll View的View。

畫面中灰色框為:與螢幕等寬之Scroll View,六個點點為:寬於Scroll View的View

因看不到超出螢幕的區塊,先將 View 拉至 Exit 下方,會變成長在controller 外一塊獨立的長方形。

3. 點選 View ,切換到 Size inspector,設定所需之寬高。
4. 在View內加入欲捲動顯示之圖片的Image View

5. 將完成的 View 放回scroll view 裡:從左邊的 Document Outline 點選 View並拖曳至右邊畫面上的 scroll view裡。

6. 當 View 加到 Scroll View 裡時,會落在奇怪的位置。至右方 Size inspector,設定 View 的 X 和 Y,讓它出現在 scroll view 上。
*可先設定{0,15},讓View回家後再開始調整位置。

7.Scroll view 的 content size 決定內容的大小,也就是能夠捲動的範圍。content size 需寬於 scroll view才能水平捲動。
・Key Path 欄位輸入 contentSize
・Type 欄位選擇 Size
・Value 欄位輸入 {與view同寬, 0}。
*第一個數字是寬度,第二個數字是高度。當高度的數字小於 scroll view 的高度時,代表 scroll view 不會上下捲動。

8. 最後將View的顏色設成 Clear Color,就完成啦~

分頁效果

  1. 勾選 Paging Enabled,打開被封印的分頁功能。
  2. 分頁的大小由 Scroll View 的寬度決定。
    當 Scroll View 的寬度等於手機顯示螢幕的寬度 390時,每頁的寬度即為 390。若我們希望有三頁,則可將 contentSize 設為 390 的 3 倍,設為 1560 (390 * 3)。

上下捲動的 Scroll View

原理和左右捲動的 Scroll View 差不多,主要差別在 contentSize 的第二個數字決定上下捲動的範圍,比方 {0, 1000} 表示上下捲動的範圍為 1000,左右不捲動。

--

--