導言

昨天我們用 Table View Controller 實現了書本的選單瀏覽，今天我們將深入學習如何使用 Scroll View 來展示多張書本結局預覽圖片，並實現左右捲動的效果。你將看到 Scroll View 如何提升用戶的互動體驗，且依然不需要撰寫程式碼！

今天學習目標

• 透過 Storyboard 添加並設置 Scroll View。
• 設定 Scroll View 的內容大小 (content size)，確保所有的圖片都能捲動顯示。
• 將圖片按順序排列，並啟用 Paging 功能以頁為單位捲動。將圖片按順序排列，並啟用 Paging 功能以頁為單位捲動。
• 設置一個按鈕作為進入故事的入口，提供更多互動性。

預覽效果

在完成這篇教程後，使用者可以滑動 Scroll View 來瀏覽多張書本結局預覽圖片，並在適當位置點擊按鈕進入下一個場景。

教學步驟

Step 1: 新增 View Controller

• 打開 Main.storyboard，從物件庫中拖入一個 View Controller，這將作為展示書本結局預覽的畫面。
• 將 View Controller 移到第一本書的書本選單頁及 和書本的起點頁 ViewController 之間。
• 加入一個按鈕：拖入一個 UIButton 並將其放置在 View 的最底部。這個按鈕將引導使用者進入下一個故事章節，你可以自定義按鈕的外觀和文字，例如「開始冒險」。
• 調整畫面布局：確保該 View Controller 與書本選單頁面通過 segue 相連，並把開始冒險按鈕通過 segue 連到故事的第一頁。

Step 2: 添加 Scroll View

• 從物件庫中拖入 Scroll View：設置 Scroll View 的尺寸為 300x500，這將決定可視區域的大小。你可以根據實際應用需求調整這個數值。
• 加入內容 View：在 Scroll View 中拖入一個普通的 View，它將作為承載圖片的容器。在這個 View 上，我們將會添加圖片，並確保其大小足以容納所有圖片。
  

Step 3: 配置 Scroll View 的內容

• 按 內容 View 先移出 Scroll View ，拉到最上層 Viwe 的外面，會看到 view 顯示在 View Controller 上面，方便我們進行編輯 。
  

• 設置內容 View 的尺寸：假設我們有 8 張寬度為 300px 的圖片，這意味著我們需要將內容 View 的寬度設為 2400px（8 張圖片 × 每張 300px）。高度保持為 500px，以與 Scroll View 的高度一致。
  

• 添加圖片：拖入 8 個 UIImageView 並分別設置圖片，將每個圖片的寬度設為 300px，確保圖片不會重疊。這些圖片將是用戶可以捲動查看的書本結局預覽。
  

• 將 View 放回 Scroll View：將內容 View 放回 Scroll View 中，並確保其 X 坐標設為 0，對齊 Scroll View 的左上角。

Step 4: 設定 Scroll View 的 Content Size

• 設定 Content Size：點選 Scroll View，然後在右側屬性面板中的 User Defined Runtime Attributes 新增一個 contentSize 屬性，並設為 2400x0。這會讓 Scroll View 知道它的內容需要多寬，以便能夠左右捲動，因為是左右捲動，所以在這裡不用設定高度值。
  

• 啟用 Paging：在 Attributes Inspector 中，啟用 Paging Enabled 選項，讓 Scroll View 以頁為單位捲動。這樣每次滑動將停在圖片的邊緣，提供更佳的用戶體驗。

Step 5: 測試應用

• 運行應用並滑動 Scroll View，你會發現使用者可以左右捲動查看多張圖片，且每張圖片都能順利捲動並停留在頁面邊緣。點擊按鈕可進一步操作。

回顧重點

• 透過 Storyboard 添加 Scroll View 並設置其內容尺寸，無需撰寫程式碼。
• 學習如何通過 Paging Enabled 提供更好的滑動體驗。
• Scroll View 可以用來顯示大量內容或圖片，是展示書本預覽、商品或故事結局的好工具。

總結

今天我們學習了如何使用 Scroll View 來展示豐富的書本內容，並實現左右捲動效果。這個技巧不僅適合書本介紹，還能應用於許多其他需要展示大量圖片的情境。通過調整 content size 和啟用 Paging，我們能夠實現更平滑且直觀的用戶體驗。

附錄：已接觸的 UIKit 元件

• UILabel （Day 01）– 顯示文字。
• UIButton （Day 01）– 處理按鈕的點擊事件。
• UIImageView （Day 01）– 顯示圖片。
• UINavigationController （Day 02）– 管理畫面之間的導航，提供返回按鈕。
• Segue (UIStoryboardSegue) （Day 02）– 在畫面之間進行跳轉。
• Relationship Segue （Day 03）– 建立控制器之間的層級關係。
• UITabBarController（Day 03） – 底部導航。
• UITableViewController（Day 04）– 顯示和管理大量的列表內容。
• UITableViewCell（Day 04）– 設計和顯示列表中的每個單元格。
• UIScrollView （Day 05）– 顯示可捲動的內容，特別適合顯示大量的圖片或文字。

參考

• 設定 content size，實現水平捲動，上下捲動和分頁的 scroll view