#17 利用 page control,segmented control,button & gesture 更換內容
Published in
13 min readMar 8, 2023
展示寶可夢朱紫隊伍
定義陣列
//寶可夢圖片及名稱
let pokemonArray = ["#1008 密勒頓", "#1002 古劍豹", "#992 鐵臂膀", "#991 鐵包袱", "#923 巴布土撥", "#58 風速狗"]
let segmentTitleArray = ["密勒頓", "古劍豹", "鐵臂膀", "鐵包袱", "巴布土撥", "風速狗"]
let pokemonImageArray = ["密勒頓", "古劍豹", "鐵臂膀", "鐵包袱", "巴布土撥", "風速狗"]
let pokemonShinyImageArray = ["密勒頓閃光", "古劍豹閃光", "鐵臂膀閃光", "鐵包袱閃光", "巴布土撥閃光", "風速狗閃光"]
//寶可夢六項個體值
let hpValue = [100, 80, 154, 56, 70, 90]
let attackValue = [85, 120, 140, 80, 115, 110]
let defenseValue = [100, 80, 108, 114, 70, 80]
let spAttackValue = [135, 90, 50, 124, 70, 100]
let spDefenseValue = [115, 65, 68, 60, 60, 80]
let speedValue = [135, 135, 50, 136, 105, 95]
命名Outlet
outlet 的名字一般會用名詞,且以元件的型別結尾。
設定預設顯示畫面
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
pokemonImageView.image = UIImage(named: pokemonImageArray[0])
pokeLabel.text = pokemonArray[0]
pageBot.currentPage = 0
pokemonSegment.selectedSegmentIndex = 0
//設定segment名稱
for index in 0...5 {
pokemonSegment.setTitle(segmentTitleArray[index], forSegmentAt: index)
}
//設定六項個體數值
hpLabel.text = hpValue[0].formatted()
attackLabel.text = attackValue[0].formatted()
defenseLabel.text = defenseValue[0].formatted()
spAttackLabel.text = spAttackValue[0].formatted()
spDefenseLabel.text = spDefenseValue[0].formatted()
speedLabel.text = speedValue[0].formatted()
//設定個體質progressview 特別注意型別Float
hpProgressView.progress = Float(hpValue[0])/upperLimit
attackProgressView.progress = Float(attackValue[0])/upperLimit
defenseProgressView.progress = Float(defenseValue[0])/upperLimit
spAttackProgressView.progress = Float(speedValue[0])/upperLimit
spDefenseProgressView.progress = Float(spDefenseValue[0])/upperLimit
speedProgressView.progress = Float(speedValue[0])/upperLimit
}
建立可同步修改的function
var num = 0
let upperLimit:Float = 200
func sync() {
pokemonImageView.image = UIImage(named: pokemonImageArray[num])
pokeLabel.text = pokemonArray[num]
pageBot.currentPage = num
pokemonSegment.selectedSegmentIndex = num
shinySwitch.isOn = false
hpLabel.text = hpValue[num].formatted()
attackLabel.text = attackValue[num].formatted()
defenseLabel.text = defenseValue[num].formatted()
spAttackLabel.text = spAttackValue[num].formatted()
spDefenseLabel.text = spDefenseValue[num].formatted()
speedLabel.text = speedValue[num].formatted()
hpProgressView.progress = Float(hpValue[num])/upperLimit
attackProgressView.progress = Float(attackValue[num])/upperLimit
defenseProgressView.progress = Float(defenseValue[num])/upperLimit
spAttackProgressView.progress = Float(speedValue[num])/upperLimit
spDefenseProgressView.progress = Float(spDefenseValue[num])/upperLimit
speedProgressView.progress = Float(speedValue[num])/upperLimit
}
新增switch元件 顯示異色寶可夢功能
//異色寶可夢開關
@IBAction func changeShiny(_ sender: UISwitch) {
if sender.isOn == true {
pokemonImageView.image = UIImage(named: pokemonShinyImageArray[num])
} else{
pokemonImageView.image = UIImage(named: pokemonImageArray[num])
}
}
新增Page Control元件 小圓點換頁功能
@IBAction func changePageDot(_ sender: UIPageControl) {
num = sender.currentPage
switch sender.currentPage {
case 0 :
num = 0
sync()
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
default:
num = 5
sync()
}
}
新增Segment元件 標籤換頁功能
@IBAction func changeSegment(_ sender: UISegmentedControl) {
num = sender.selectedSegmentIndex
switch sender.selectedSegmentIndex {
case 0 :
num = 0
sync()
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
default:
num = 5
sync()
}
}
新增Button元件 左右按鈕換頁功能
//左箭頭換頁
@IBAction func previousPage(_ sender: Any) {
num -= 1
switch num {
case 0 :
num = 0
sync()
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
default:
num = 5
sync()
}
}
//右箭頭換頁
@IBAction func nextPage(_ sender: Any) {
num += 1
switch num {
case 0 :
num = 0
sync()
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
case 5 :
num = 5
sync()
default:
num = 0
sync()
}
}
啟用 Timer方法 ? 自動播放功能
var timer: Timer?
@IBAction func autoPlay(_ sender: UIButton) {
if sender.titleLabel?.text == "自動播放"{
autoPlayButton.setTitle("停止", for: UIControl.State.normal)
timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(startCarousell), userInfo: nil, repeats: true)
} else {
autoPlayButton.setTitle("自動播放", for: UIControl.State.normal)
//停止Timer
timer?.invalidate()
}
}
//寫一個在 Timer觸發所要做的 objc func
@objc func startCarousell() {
num += 1
if num == 6 {
num = 0
sync()
} else {
sync()
}
}
參數介紹:
- timeInterval:觸發Timer的間隔時間,以秒為單位。
- target:Timer 觸發的對象,
self
表示目前使用 UIViewController 本身。 - selector:Timer 觸發後執行哪一個 objc func。
- userInfo:可作為傳入Timer 觸發事件的資料,不使用傳入nil即可。
- repeat:
true
啟用後會根據 timeInterval 時間間隔設定來重複觸發,若填入false
則啟用後只觸發一次。
停止使用 Timer 方法
當不使用 Timer 卻沒停止它的話,會一直在背景執行。
新增swipe gesture手勢換頁功能
點選滑動的View,勾選User Interaction Enabled
//手勢換頁
@IBAction func swipeChangePage(_ sender: UISwipeGestureRecognizer) {
//direction
if (sender.direction == .left) {
num += 1
switch num {
case 0 :
num = 0
sync()
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
default:
num = 5
sync()
}
} else if (sender.direction == .right) {
num -= 1
switch num {
case 1 :
num = 1
sync()
case 2 :
num = 2
sync()
case 3 :
num = 3
sync()
case 4 :
num = 4
sync()
case 5 :
num = 5
sync()
default:
num = 0
sync()
}
}
}
新增Long Press Gesture Recognizer長按手勢 隨機換頁功能
@IBAction func showRandomImage(_ sender: Any) {
num = Int.random(in: 0...5)
sync()
}