“`html

簡要介紹

在這篇文章中，我們將學習如何使用 UISegmentedControl 與 UIPageViewController 來實現左右滑動切換的 ViewController。這種設計在許多應用中都非常常見，像是 Uber Eats 的過去訂單與即將推出的功能。以下將提供完整的步驟與實作範例，讓你能夠輕鬆掌握這個技術。

UISegmentedControl 與 UIPageViewController 示例動態效果

UISegmentedControl 的使用

UISegmentedControl 是一個常見的用於選擇的控制元件，可以在應用中實現簡單的按鈕切換效果。接下來，我們將學習如何創建並配置一個 UISegmentedControl。

宣告 UISegmentedControl

var segmentedControl = UISegmentedControl()

在 viewDidLoad 中設置 segmentedControl

我們將在 viewDidLoad 方法中設置 segmentedControl 的項目及相關屬性：

override func viewDidLoad() {
    super.viewDidLoad()
    segmentedControl = UISegmentedControl(items: ["過去的訂單", "即將推出"])
    segmentedControl.backgroundColor = UIColor.lightGray
    segmentedControl.frame = CGRect(x: 0, y: 44, width: self.view.frame.width, height: 30)
    segmentedControl.addTarget(self, action: #selector(segmentedChange), for: .valueChanged)
    self.view.addSubview(segmentedControl)
}

處理 segmentedControl 點擊事件

當使用者點擊 segmentedControl 的時候，我們需要處理這個事件，以獲取選擇的索引或按鈕的文字：

@objc func segmentedChange(sender: UISegmentedControl) {
    // index
    print(sender.selectedSegmentIndex)
    // 文字
    print(sender.titleForSegment(at: sender.selectedSegmentIndex)!)    
}

效果示範
UISegmentedControl 點擊效果示範

UIPageViewController 的使用

UIPageViewController 可用於創建可滑動的視圖控制器，允許用戶通過手勢在不同的視圖之間切換。我們需要將 UIPageViewController 與 UISegmentedControl 進行結合。

宣告 UIPageViewController

var pageViewControl = UIPageViewController()
var viewControllerArr = [UIViewController]()
var selectedIndex: Int = 0

在 viewDidLoad 中設置 pageViewControl

在 viewDidLoad 中，我們將初始化 pageViewControl 並設置其代理和資料來源：

pageViewControl = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
pageViewControl.view.frame = CGRect(x: 0, y: 74, width: self.view.frame.width, height: self.view.frame.height - 74)
pageViewControl.delegate = self
pageViewControl.dataSource = self
self.addChild(pageViewControl)
self.view.addSubview(pageViewControl.view)

創建 ViewController 並添加到陣列

我們需要創建兩個簡單的 UIViewController，並將它們添加到 viewControllerArr 陣列中：

let viewController1 = UIViewController()
viewController1.view.backgroundColor = UIColor(red: 1, green: 0.2, blue: 0.4, alpha: 0.3)
let viewController2 = UIViewController()
viewController2.view.backgroundColor = UIColor(red: 0.4, green: 0.3, blue: 1, alpha: 0.3)

viewControllerArr.append(viewController1)
viewControllerArr.append(viewController2)

pageViewControl.setViewControllers([viewControllerArr[0]], direction: .forward, animated: false)

實現 pageViewController 的資料來源方法

我們需要實現 UIPageViewControllerDataSource 的方法，以便在滑動時返回相應的視圖控制器：

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
    let pageIndex = viewController.view.tag - 1
    return pageIndex < 0 ? nil : viewControllerArr[pageIndex]
}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
    let pageIndex = viewController.view.tag + 1
    return pageIndex >= viewControllerArr.count ? nil : viewControllerArr[pageIndex]
}

連動 UISegmentedControl 與 UIPageViewController

在 segmentedChange 方法中，我們需要更新 pageViewControl 的當前視圖控制器：

@objc func segmentedChange(sender: UISegmentedControl) {
    pageViewControl.setViewControllers([viewControllerArr[sender.selectedSegmentIndex]], direction: .forward, animated: true)
}

效果示範
UIPageViewController 切換效果示範

常見問題解答 (Q&A)

1. UISegmentedControl 的點擊事件如何處理？

在 UISegmentedControl 中，我們可以使用 addTarget 方法來設置點擊事件，並在事件處理方法中獲取選中的索引和文字。

2. 如何使用 UIPageViewController 實現左右滑動效果？

使用 UIPageViewController，我們需要設置其資料來源，並在資料來源方法中返回相應的視圖控制器，以實現滑動效果。

3. UISegmentedControl 和 UIPageViewController 如何聯動？

在 segmentedChange 方法中，我們可以通過 setViewControllers 方法來更新當前的視圖控制器，實現兩者之間的聯動。

“`
—

Categorized in:

swift