#29 利用 page control、segmented control、button & gesture 更換內容

Lazzzy Animals，各種切換畫面方式連動的練習

用友人畫的可愛動物（鬼畫符）來練練🙈

一開始完全問號，參考了學長姐的作品+各種亂試＋Peter救援後終於誕生啦！

大致步驟：

1.Storyboard：拉好要顯示的各種元件，ImageView、Label、Segmented Control、Page Control、Button及Swipe Gesture Recognizer

2.定義陣列：會隨著按鈕切換而改變的圖片、文字、頁數內容用Array儲存

3.拉IBOutlet：產生變數，變數儲存畫面上的元件，存取元件的內容

• 用名詞命名，並以元件的型別結尾，如animalImageView
• Page Control & Segmented Control除了要拉IBAction，IBOutlet也要！

4.拉IBAction：Page Control、Segmented Control、Button、Swipe Gesture Recognizer，用動詞命名，說明此function做的事，如changeSegment

5.切換Segmented Control及Page Control的function：

• 用selectIndex儲存要顯示圖片、文字的陣列順序

var selectIndex = 0

• 用function定義要同步改變的內容：圖片、文字、頁數、Page Controll、Segmented Controll

func sync() {
        animalImageView.image = UIImage(named: lazyImages[selectIndex])
        lazyLabel.text = lazyLabels[selectIndex]
        pageLabel.text = pageNumberLabels[selectIndex]
        pageDot.currentPage = selectIndex
        segment.selectedSegmentIndex = selectIndex
    }

• 用if寫出3種可能，以下為Page Control，Segmented Control以此類推～

@IBAction func changePageDot(_ sender: UIPageControl) {
        selectIndex = sender.currentPage
        if pageDot.currentPage == 0 {
            selectIndex = 0
            sync()
        } else if pageDot.currentPage == 1 {
            selectIndex = 1
            sync()
        } else {
            selectIndex = 2
            sync()
        }
    }

6.上一頁&下一頁的Button：

參考了此篇學習到無限輪迴的技能，讓selectIndex到-1直接變2

實戰9：切換圖片用IBOutlet ＆IBAction ＆IF

@IBAction func changePageDot(_ sender: UIPageControl) {
        selectIndex = sender.currentPage
        if sender.currentPage == 0 {
            selectIndex = 0
            sync()
        } else if sender.currentPage == 1 {
            selectIndex = 1
            sync()
        } else {
            selectIndex = 2
            sync()
        }
    }

7.Swipe Gesture Recognizer：

• 點選要滑動的imageView，勾選User Interaction Enabled

• 點選Swipe Gesture Recognizer，設定Swipe左or右，兩個Swipe Gesture Recognizer都要設定

• 將兩個Swipe Gesture Recognizer連結到同一個IBAction，第二條從右邊的點點拉線往回連結

@IBAction func swipeChangePage(_ sender: UISwipeGestureRecognizer) {
if sender.direction == .left {
            selectIndex += 1
            if selectIndex == 0 {
                sync()
            } else if selectIndex == 1 {
                sync()
            } else if selectIndex == 2 {
                sync()
            } else {
                selectIndex = 0
                sync()
            }
        } else if sender.direction == .right {
            selectIndex -= 1
            if selectIndex == 2 {
                sync()
            } else if selectIndex == 1 {
                sync()
            } else if selectIndex == 0 {
                sync()
            } else {
                selectIndex = 2
                sync()
            }
        }
        
    }

8.設定viewDidLoad畫面顯示的Label內容：

override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor(red: 59/255, green: 55/255, blue: 51/255, alpha: 1)
        animalImageView.layer.cornerRadius = 20
        animalImageView.clipsToBounds = true
        lazyLabel.text = lazyLabels[0]
        pageLabel.text = pageNumberLabels[0]
    }

若未設定的話，一開始文字會顯示”Label”，而不是想要顯示的文字

完整程式碼：

參考資料：

#38 利用 page control，segmented control，button & gesture 更換內容

#38 Segmented Control 和 Button 更換圖片：近期愛用彩妝

Who can help — By Swift

實戰9：切換圖片用IBOutlet ＆IBAction ＆IF

100道iOSApp謎題#38 愛情的模樣 — 點選 Segmented Control 和 Button 更換圖片

Github：

Andeline/-