♯8.輕鬆使用 page control，segmented control，button & gesture 更換內容

在各大網頁中很常看到這種類似輪播的控制項目，他可以運用最小空間來展示我們想要帶給使用者的內容，那就來實作看看吧！

先拉出我們想要的畫面：

首先需要內容陣列(含名稱、圖片)、各式變數：目前第幾張的變數(nowIndex)、segmented control(segmentIdx)、page control(pagesIdx)、imagesView(imagesViewShow)、名稱label(radioNameLabel)、目前第幾張的label(countLabel)。

let radioNameArray:Array = ["BTS-Butter","EricGraduation","GenHoshino-Comedy","NAYEON-POP","髭男-MixedNuts"]
let radioPic:Array = ["BTS.jpeg","Eric.jpeg","GenHoshino.jpeg","NAYEON.jpeg","OfficialHIGEDANdism.jpeg"]
var nowIndex:Int = 0
@IBOutlet weak var segmentIdx: UISegmentedControl!
@IBOutlet weak var pagesIdx: UIPageControl!
@IBOutlet weak var imagesViewShow: UIImageView!
@IBOutlet weak var radioNameLabel: UILabel!
@IBOutlet weak var countLabel: UILabel!

再來需要三個函式，分別是切換下一張(func nextIdx (){})、切換上一張(func prevIdx (){})、依照切換張數來變更內容(func changeContent(idx:Int){})。

nextIdx ()、 prevIdx ()，顧名思義就是張數的遞增或是遞減。

changeContent(idx:Int)這個函數改變圖片、名稱、label數字並同步改變page control，segmented control當前的數字，因此當我在進行切換時也需要呼叫這個函數並將當前數字傳入。

func changeContent(idx:Int){
        nowIndex = idx
        
        imagesViewShow.image = UIImage(named: radioPic[nowIndex])
        radioNameLabel.text = radioNameArray[nowIndex]
        
        segmentIdx.selectedSegmentIndex = nowIndex
        pagesIdx.currentPage = nowIndex
        countLabel.text = "\(nowIndex + 1) / (radioNameArray.count)"
        
    }
    func prevIdx (){
        if nowIndex > 0 {
            nowIndex -= 1
        }else {
            nowIndex = radioNameArray.count - 1
        }
        changeContent(idx:nowIndex)
    }
    func nextIdx (){
        if nowIndex < radioNameArray.count - 1{
            nowIndex += 1
        }else{
            nowIndex = 0
        }
        changeContent(idx:nowIndex)
    }

我覺得xcode厲害的是元件中其實都已經寫好可以運用的參數：

UIPageControl 的 currentPage ：目前選取的小圓點是第幾個。

UISegmentedControl 的 selectedSegmentIndex ：目前選取的是第幾個 segment

此外，/() 很常用於組合字串與變數之間的好物！

基本需要的內容與函數寫好之後，我們就要來控制page control，segmented control，button & gesture囉！

page control：

@IBAction func pagesChange(_ sender: UIPageControl) {
       
     changeContent(idx: sender.currentPage)
}

segmented control：

@IBAction func segmentChange(_ sender: UISegmentedControl) {
       
    changeContent(idx: sender.selectedSegmentIndex)
}

button：

@IBAction func prevChange(_ sender: Any) {
    prevIdx()
}
    
    
@IBAction func nextChange(_ sender: Any) {
    nextIdx()
}

gesture：如何新增手勢功能可以看這裡

@IBAction func swipeChange(_ sender: UISwipeGestureRecognizer) {
    if sender.direction == .right{
       prevIdx()
            
    } else if sender.direction == .left{
       nextIdx()
    }
}

完成圖如下：

然後順便練習一下日期XD

@IBOutlet weak var dateLabel: UILabel! //放置日期的 label 變數
override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始時先把圖片與名稱都先帶入
        imagesViewShow.image = UIImage(named: radioPic[nowIndex])
        radioNameLabel.text = radioNameArray[nowIndex]
        let time = Date()
        let date =  Calendar.current.dateComponents(in:TimeZone.current, from: time)
        let month = date.month!
        let day = date.day!
        
        dateLabel.text = "今天是\(month)月\(day)號"
}

以上！