iOS 14 進化的 page control

在 iOS 14 UIPageControl 變得更厲害了，多了不少新的 API，主要包含以下新亮點:

• 背景樣式。
• 客製小圓點圖片。
• 小圓點的數量不再受限。
• 拖曳快速移動小圓點。

參考文章: Mukesh 大大的 Take a Look at iOS 14’s New UIPageControl。

Take a Look at iOS 14’s New UIPageControl

接下來就讓我們一步步挖掘它的新功能吧，假設我們已經參考以下連結實作出搭配 page control 的分頁畫面。

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

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

page control 的 outlet 是 pageControl。

@IBOutlet weak var pageControl: UIPageControl!

設定 page control 的背景樣式

型別 UIPageControl.BackgroundStyle 的 backgroundStyle 控制 page control 的背景樣式，將它改成 prominent 將在背後顯示灰色圓角長條。

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        pageControl.backgroundStyle = .prominent
}

設定小圓點採用同一個圖片

小圓點滿好的，不過有時我們希望 App 能特立獨行，不想跟別的 App 一樣。在 iOS 14，我們可以客製 page control 的圖片，想把小圓點換成太陽月亮也不是問題。

設定 preferredIndicatorImage 控制小圓點的圖片。

pageControl.preferredIndicatorImage = UIImage(systemName: "sun.max.fill")

剛剛的例子採用的是 SF Symbols，我們也可以使用自己在 assets 加入的圖片，不過請記得它會變成單色，而不是原來的彩色。

pageControl.preferredIndicatorImage = UIImage(named: "peter")

設定小圓點採用不同圖片

我們也可以設定小圓點採用不同的圖片，透過 function setIndicatorImage(_:forPage:)。

以下程式設定第一個小圓點顯示月亮，其它則顯示太陽。

pageControl.preferredIndicatorImage = UIImage(systemName: "sun.max.fill")
pageControl.setIndicatorImage(UIImage(systemName: "moon.fill"), forPage: 0)

甚至我們還可讓每個小圓點都不一樣，例如以下例子將小圓點換成數字圖:

for page in 0..<pageControl.numberOfPages {
   pageControl.setIndicatorImage(UIImage(systemName: "\(page).circle"), forPage: page)
}

小圓點的數量不再受限

從前小圓點的數量是受限的，比方當我們有 30 個小圓點時，它顯示時將超出螢幕。

如下圖所示，第一個小圓點在螢幕之外，所以我們滑到第三頁時才看到變色，畫面裡的第一個小圓點其實是第三個點。

在 iOS 14，同樣是 30 個小圓點，它並不會傻傻地一次全部顯示。如下圖所示，它只會顯示前幾個點，當我們滑動時，小圓點將聰明地移動更新，讓我們知道滑到下一頁了。

拖曳快速移動小圓點

在 iOS 14，我們可以在小圓點上用拖曳的方式快速移動到某個小圓點。

如果想關掉拖曳模式，則可將 allowsContinuousInteraction 設為 false，此時在小圓點上只能用點擊的方式換到下個小圓點。

pageControl.allowsContinuousInteraction = false