九、利用 page control，segmented control，button & gesture 更換內容-動物森友會角色

談到任天堂，曾經身為智財相關領域作為一個超小顆螺絲釘的我，要告訴大家不要在網路上販賣盜版商品，這樣是違法的，NG～而且不論你在哪，They’ll find you, and then they’ll sue you（？）

但我還是得沒有盈利地（強調）使用動物們的圖片做一個作業。Let me introduce my favorite characters from Animal Crossing～

一、構想呈現

1. 用耐心、細心跟愛心（？）感化storyboard，讓他變成我喜歡的樣子。
2. 要先決定想呈現的動物資料，並寫成struct。因為我想要讓動物站在自己的家前，在這邊花了不少時間思考與調整圖片跟資料呈現方式。

struct Character {
    let name: String
    let image: String
    let smallImage: String
    let gender : String
    let traits: String
    let motto:String
    let catchphrase: String
    let home: String
}

二、加入page control，segmented control，button，gesture

1. 我先大致做好Auto Layout才開始寫程式，後來發現這順序似乎不順？因為後來決定要呈現的動物有四隻，而我page control，segmented control拉到畫面後忘記調整。
2. 臨時再在畫面寫code，也再對應地調整constraints。
3. 拉IBOutlet跟IBAction

override func viewDidLoad() {
        super.viewDidLoad()
        
        characterPage.numberOfPages = characters.count
        characterSegment.setTitle(characters[0].name, forSegmentAt: 0)
        characterSegment.setTitle(characters[1].name, forSegmentAt: 1)
        characterSegment.insertSegment(withTitle: characters[2].name, at: 2, animated: false)
        characterSegment.insertSegment(withTitle: characters[3].name, at: 3, animated: false)
       
        // Do any additional setup after loading the view.
    }

三、寫資料

1. 雖然只想寫四隻動物，但還是先麻煩AI幫我寫Array，結果claude在胡說八道。
2. 要注意檢查資料來源。動物森友會的翻譯，台灣版跟香港版不同，動物名稱似乎一樣，但是有些口頭禪跟座右銘會有所不同。

var characters = [
        Character(
            name: "傑克",
            image: "jack3DImage",
            smallImage: "jack2DImage",
            gender: "♂",
            traits: "自戀",
            motto: "自有品牌！",
            catchphrase: "嚴肅",
            home: "jacksHome"
        ),
        Character(
            name: "風杰",
            image: "hopkins3DImage",
            smallImage: "hopkins2DImage",
            gender: "♂",
            traits: "悠閒",
            motto: "君子不立危牆之下",
            catchphrase: "風",
            home: "hopkinsHome"
        ),
        Character(
            name: "牛奶糖",
            image: "goldie3DImage",
            smallImage: "goldie2DImage",
            gender: "♀",
            traits: "普通",
            motto: "恰到好處的幸福才是最棒的",
            catchphrase: "汪",
            home: "goldieHome"
        ),
        Character(
            name: "瑞奇",
            image: "filbert3DImage",
            smallImage: "filbert2DImage",
            gender: "♂",
            traits: "悠閒",
            motto: "童言無忌",
            catchphrase: "是囉",
            home: "filbertHome"
        )
    ]

四、寫code

1. 加入gesture的時候，往右滑是觸發pre function，往左滑是觸發next function，因為我心裡想著的是箭頭方向，所以做出來的成果跟我期待的完全相反。才反應過來原來是按照手勢的物理動作。
2. 因為動物的詳細資料我只寫四個Label，並沒有把標題與資料分開，接資料的時候要有所調整。如：characterGenderLabel.text = “性別：” + character.gender
3. 取圖片變數的時候有點便宜行事，什麼smallImage，反省。

 func updateUI() {
        let character = characters[myIndex]
        characterNameLabel.text = character.name
        characterGenderLabel.text = "性別：" + character.gender
        characterTraitsLabel.text = "個性：" + character.traits
        characterCatchPhraseLabel.text = "口頭禪：" + character.catchphrase
        characterMottoLabel.text = "座右銘：" + character.motto
        character2DImageView.image = UIImage(named: character.smallImage)
        character3DImageView.image = UIImage(named: character.image)
        characterHomeImageView.image = UIImage(named: character.home)
    }
    
    @IBAction func next(_ sender: Any) {
        myIndex += 1
        if myIndex == characters.count {myIndex = 0}
        updateUI()
    }
    
    @IBAction func pre(_ sender: Any) {
        myIndex -= 1
        if myIndex < 0 {myIndex = characters.count - 1}
        
        updateUI()
    }
    
    @IBAction func segmentIndex(_ sender: UISegmentedControl) {
        myIndex = characterSegment.selectedSegmentIndex
        updateUI()
    }
    
    @IBAction func page(_ sender: UIPageControl) {
        myIndex = characterPage.currentPage
        updateUI()
    }

五、Auto Layout

最後constraints一點出來有些驚人，大概看了一下，也不知道有沒有多餘的constraints?但是工程師前輩們都有說，既然能跑，就先不要動比較好⋯⋯

六、GitHub

GitHub - YenciChen/changeContentForStructAndIfElsePractice

七、後語

前幾天在thread上看到有人說他的同事為了打一千行code但不小心刪掉的事哭泣，下面一堆人都在問他寫程式不commit的嗎？

我這次在拉畫面的時候也發生類似的事情，很想undo回之前的設定，但不小心被我覆蓋掉了。以後應該早一點commit，才可以簡單地回復以前的版本設定。

即使只是個小作業，但也該早點開始培養好習慣。

參考文章：

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

開發 iOS App 的 Gesture (手勢)功能 — UIKit 版本

八、研究UI元件：Segmented Control

（自己的文章ＸＤ）