#68 Stack View + Scroll View 製作分頁、換頁更新的 Page Control 小圓點

加入 scroll view

選取 Scroll View、View，設定上下左右對齊

⚠️如果怕 Scroll View 的照片被瀏海切到，可以設定 Scroll View、Safe Area 上下左右對齊

此時 Scroll View 還無法推算捲動的範圍，所以會出現錯誤

將 Image View 加到 Scroll View 裡面

讓照片佔滿整個畫面，Content Mode 設為 Aspect Fill

⚠️若照片要維持比例，可選擇 Aspect Fit

將 Image View 加到 Stack View

設定 Stack View

Axis 設為 Horizontal

Alignment 設為 Fill

Distribution 設為 Fill Equally

Spacing 設為 0

將 Stack View 的上下左右間距設為 0

選取 Stack View、Content Layout Guide，然後設定上下左右對齊讓 Stack View 和 Content Layout Guide 的間距為 0

Stack View 的大小由裡面的 Image View 決定，每個 Image View 的大小由一開始照片的大小而定

設定 Image View 和 Frame Layout Guide（ Equal Widths、Equal Heights ）

因為目前只有一張照片，所以還無法滑動

加入其它圖片

利用複製貼上其它四個 Image View，然後換上欲顯示的照片

勾選 Scroll View 的 Paging Enabled，讓 Scroll View 捲動時以本身的大小為單位分頁，讓 Scroll View 捲動停下時都可以剛好停在完整的頁面

加入 Page Control

若想要將 Page Control 固定在畫面上，滑動時只更新目前頁面的小圓點，Page Control 就不能加在 Scroll View 裡面，如果加在 Scroll View 裡面就會跟著一起被移動

頁數設定為 5（# of Pages）

設定 Auto Layout 條件

建立 Page Control 的 IBOutlet

@IBOutlet weak var pageControl: UIPageControl!

設定 Scroll View 的 delegate 為 Page Contorl View Controller

從 Scroll View 連線到 Page Contorl View Controller

選擇 delegate

Page Contorl View Controller 已順利成為 Scroll View 的 delegate

讓 Page Contorl View Controller 遵從 protocol UIScrollViewDelegate

extension PageContorlViewController: UIScrollViewDelegate {
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    let page = scrollView.contentOffset.x / scrollView.bounds.width
    pageControl.currentPage = Int(page)
    }
}

點選或拖曳小圓點時更新頁面

建立 Scroll View 的 IBOutlet

@IBOutlet weak var scrollView: UIScrollView!

建立 Page Control 的 IBAction

在小圓點上點選或拖曳造成小圓點更新時，將觸發 page control 的 value change event

@IBAction func changPage(_ sender: UIPageControl) {
    let point = CGPoint(x: scrollView.bounds.width * 
    CGFloat(sender.currentPage), y: 0)
    scrollView.setContentOffset(point, animated: true)
}

參考文章

stack view + scroll view 製作分頁 tutorial (懶得寫程式版)

隨著換頁更新的 page control 小圓點