『iOS APP-13』Slider 練習

Marcus Chen

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

5 min readMar 16, 2023

首先，要先在畫面下方欄位，將畫面轉成橫的。

接著在畫面中規劃需要的 ImageView 位置與數量。
這邊要特別注意，如果後續拉動 slider 做動時，ImageView會有重疊的話，要規劃一下圖層的先後順序（先放會在下層）！

透過 IBOutlet 連結 ImageView，並取好變數名稱。

    @IBOutlet var 伊之助: UIImageView!
    @IBOutlet var 善逸: UIImageView!
    @IBOutlet var 炭治郎: UIImageView!
    @IBOutlet var 彌豆子: UIImageView!
    @IBOutlet var 宇髓: UIImageView!
    @IBOutlet var 甘露寺: UIImageView!

將事前去背好放在 Assets 中的圖片依序放入 UIImageView 中。

拉 Slider 的 IBAction 時，Type 請選擇 UISlider。（如下圖）
這樣才能夠在畫面中拉動 Slider 時，將 Slider 的數值回傳至程式中。

而 Slider 的參數可以從右方欄位中設定。
依序為當前數值、最小值、最大值。

這邊可以設定一個變數 speed ，透過 sender 將 Slider 回傳進來的數值乘上一個數字，可以讓我們調整角色的移動速度。

接著透過：
改變 x 座標來水平移動，
炭治郎.frame.origin.x ＝CGFloat(UIImageView的x座標 + 速度)
改變 y 位置來垂直移動，
炭治郎.frame.origin.y ＝CGFloat(UIImageView的y座標 + 速度)

隨著 Slider 拉動，透明度隨著改變：
因爲 Slider 的數值設定為 0 ~ 350，所以 sender.value 要除以350，讓 alpha 介於 0 ~ 1 之間。
宇髓.alpha = CGFloat(sender.value / 350)

如果一開始角色要完全看不見，隨著拉動 Slider 慢慢顯現出來的話，須先將角色的 alpha 值設定為 0。

為了讓畫面更加豐富，將後面兩隻角色除了改變透明度、改變位置之外，也透過 宇髓.frame.size = CGSize(width: CGFloat(240 + speed * 0.7) , height: CGFloat(128 + speed * 0.7))，改變 ImageView 的大小。

@IBAction func slider(_ sender: UISlider) {
        let speed = sender.value * 0.47
                
//炭治郎
        炭治郎.frame.origin.x = CGFloat(90 + speed)
        炭治郎.frame.origin.y = CGFloat(190 - speed * 0.15)
//彌豆子
        彌豆子.frame.origin.x = CGFloat(490 - speed)
        彌豆子.frame.origin.y = CGFloat(190 - speed * 0.15)
//伊之助     
        伊之助.frame.origin.x = CGFloat(140 + speed * 0.65)
        伊之助.frame.origin.y = CGFloat(40 + speed * 0.35)
//善逸        
        善逸.frame.origin.x = CGFloat(450 - speed * 0.65)
        善逸.frame.origin.y = CGFloat(40 + speed * 0.35)
//宇髓
        宇髓.alpha = CGFloat(sender.value / 350)
        宇髓.frame.origin.x = CGFloat(30 + speed * 0.25)
        宇髓.frame.origin.y = CGFloat(15 + speed )
        宇髓.frame.size = CGSize(width: CGFloat(240 + speed * 0.7) , height: CGFloat(128 + speed * 0.7))
//甘露寺
        甘露寺.alpha = CGFloat(sender.value / 350)
        甘露寺.frame.origin.x = CGFloat(540 - speed * 0.55)
        甘露寺.frame.origin.y = CGFloat(15 + speed )
        甘露寺.frame.size = CGSize(width: CGFloat(240 + speed * 0.7) , height: CGFloat(128 + speed * 0.7))

    }

『iOS APP-13』Slider 練習

Written by Marcus Chen