#11 研究 Segmented Control、Page Control、Button 功能及用法

Segmented Control、Page Control、Button這三個元件在APP介面是很常使用到的元件，主要可以用來控制畫面中圖片切換，下面利用3個元件及圖片示範～

1. 在View Controller中建立圖片及這個3個件
   (1) 拉一個Image View及Scroll View，在Asset放入5張圖片
   (2) 2個Button的Image屬性左邊設成arrowtriangle.backward.fill，右邊的Image設成arrowtriangle.right.fill
   (3) 放置Segmented Control及Page Control
   (4) 拉好元件的@IBOutlet

    @IBOutlet weak var pageControl: UIPageControl! 
    @IBOutlet weak var scrollView: UIScrollView! 
    @IBOutlet weak var segmentedControl: UISegmentedControl!
    @IBOutlet weak var rightButton: UIButton! 
    @IBOutlet weak var leftButton: UIButton! 

2. 手機可以直接滑動畫面換圖，所以需要透過Scroll View的delegate同步Button、Segmented Control、Page Control狀態

//滑動Scroll View圖片時，透過delegate同步button,segmented control,page control
extension ViewController: UIScrollViewDelegate {
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        let page = Int(scrollView.contentOffset.x / scrollView.bounds.width)

        pageControl.currentPage = page
        segmentedControl.selectedSegmentIndex = page

        buttonState(page)
    }
}

3. 宣告2個函數來改變Button、Segmented Control的狀態

    func buttonState(_ ePage: Int) {
        if ePage == 0 {
            rightButton.isEnabled = true
            leftButton.isEnabled = false
        } else if ePage == 4 {
            rightButton.isEnabled = false
            leftButton.isEnabled = true
        } else {
            rightButton.isEnabled = true
            leftButton.isEnabled = true
        }
    }
    
    func pageSegmentedControlState(_ eSender: UIButton, _ ePage: Int) {
        
        if eSender.restorationIdentifier! == "right" {
            segmentedControl.selectedSegmentIndex = ePage + 1
            pageControl.currentPage = ePage + 1
        } else {
            segmentedControl.selectedSegmentIndex = ePage - 1
            pageControl.currentPage = ePage - 1
        }
    }

4. 設置Button的功能，程式碼如下：

    //往右滑動
    @IBAction func rightButtonAction(_ sender: UIButton) {

        //當圖片為左邊最後一張時，向左的鈕為disable，故往右時先將往左鈕設為true
        leftButton.isEnabled = true

        //計算圖片為第幾張
        let page = Int(scrollView.contentOffset.x / scrollView.bounds.width)
        
        if page <= 4 {
            //設置顯示的圖片
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page + 1)
        }
        //圖片為右邊最後一張，將往右鈕設為disable
        if page == 3 {
            rightButton.isEnabled = false
        }
        //連動Segmented Control
        pageSegmentedControlState(sender, page)
    }
    
    //往左滑動
    @IBAction func leftButtonAction(_ sender: UIButton) {

        //當圖片為右邊最後一張時，向右的鈕為disable，故往左時先將往右鈕設為true
        rightButton.isEnabled = true
        //計算圖片為第幾張
        let page = Int(scrollView.contentOffset.x / scrollView.bounds.width)
        
        if page >= 0 {
            //設置顯示的圖片
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page - 1)
        }
        //圖片為左邊最後一張，將往左鈕設為disable
        if page == 1 {
            leftButton.isEnabled = false
        }
        //連動Segmented Control
        pageSegmentedControlState(sender, page)
    }

5. 設置Segmented Control功能，程式碼如下：

@IBAction func segmentedAction(_ sender: Any) {
        
        //Segmented Control選擇的Index
        let page = segmentedControl.selectedSegmentIndex

        //設置Page Control的狀態及顯示第幾張圖片
        pageControl.currentPage = page
        
        //以Index判斷並設置Scroll View圖片
        if page == 0 {
            scrollView.contentOffset.x = 0
        } else if page == 1 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 2 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 3 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 4 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        }
        
        //改變Button狀態
        buttonState(page)
        
    }

6. 設定Page Control的功能，有個小特點說明一下，Page Control不管是往左點或是往右點，都只會一張一張的改變，無法呈現跳躍的方式，程式碼如下：

    @IBAction func pageContrlAction(_ sender: Any) {
        //獲得目前在第幾張圖
        let page = pageControl.currentPage
        
        //設定Segmented Control在第幾張
        segmentedControl.selectedSegmentIndex = page
        
        //根據Page Control設置Scroll View圖片
        if page == 0 {
            scrollView.contentOffset.x = 0
        } else if page == 1 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 2 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 3 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        } else if page == 4 {
            scrollView.contentOffset.x = scrollView.bounds.width * CGFloat(page)
        }
        
        //改變Button狀態
        buttonState(page)
    }

以上為這3個元件主要功能分享，謝謝觀賞～～

成品動圖：