#11 尋找台北的彩繪人孔蓋。
熟練目標:利用 Page Control、Segmented Control、Button & Gesture更換內容。
(上一頁的英文應該是Previous…腦殘打錯,請鞭小力一點)
台北的人孔蓋”學習”日本精神,把毫無生氣的孔蓋彩繪了一番,這幾年走在台北街頭的低頭族,不只是在滑手機,也增加了許多找尋彩繪人孔蓋的尋寶客。
這次選了四個人孔蓋來練習,水利處有公佈其他人孔蓋的設計組圖,有興趣的人可以參考:台北蓋水計畫
步驟如下:
1.xcode新增project,在Assets加入四張人孔蓋圖片。
2.一定要在初始的View Controller才能拉IBOutlet和IBAction。
3.新增背景Image View,拉成滿版。
4.新增Image View,選擇第一張人孔蓋圖片。接著陸續加入Label、Button、Page Control、Segmented Control。
5.打開Assistant,定義pics和labels的Array[,],訂出起始點index。
6.拉出其他UI元件的outlet。
7.拉出IBAction,從Button開始設定。下一頁跟上一頁的數學公式不太一樣,課堂上講的餘數概念可直接應用。
8.加入Gesture UI,注意滑動的方向,以及連結的Image View有沒有打開User Interaction Enabled。IBAction跟Button一樣,直接拉過去即可,往左滑是下一頁,往右上一頁。
可參考Peter教學:
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E9%96%8B%E7%99%BC-ios-app-%E7%9A%84-gesture-%E6%89%8B%E5%8B%A2%E5%8A%9F%E8%83%BD-uikit-%E7%89%88%E6%9C%AC-f6cb95075705
9.設定Page control、Segmented control。幾乎都是在後面呼叫屬性。
模擬開起來如下:
import UIKit
class ViewController: UIViewController {
//先宣告轉換時會牽動其他資料的pics和labels
let pics=["CZ001","East001","WH002","DDD002"]
let labels=["有鳳來儀","未來。新都。","萬華日夜巡","人生求解,癒見大稻埕"]
//設定起始點index
var index=0
//拉出UI outlet:image,label,page control,segmented control
@IBOutlet weak var manholeImageView: UIImageView!
@IBOutlet weak var manholeLabel: UILabel!
@IBOutlet weak var manholePage: UIPageControl!
@IBOutlet weak var manholeSeg: UISegmentedControl!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
//button下一頁、上一頁的func設定
@IBAction func next(_ sender: Any) {
index=(index+1)%pics.count
let display=pics[index]
print(index,display)
manholeImageView.image=UIImage(named: display)
manholeLabel.text=labels[index]
manholePage.currentPage=index
manholeSeg.selectedSegmentIndex=index
}
@IBAction func pre(_ sender: Any) {
index=(index+pics.count-1)%pics.count
let display=pics[index]
print(index,display)
manholeImageView.image=UIImage(named: display)
manholeLabel.text=labels[index]
manholePage.currentPage=index
manholeSeg.selectedSegmentIndex=index
}
//page control設定
@IBAction func pageChange(_ sender: UIPageControl) {
index=sender.currentPage
let display=pics[index]
print(index,display)
manholeImageView.image=UIImage(named: display)
manholeLabel.text=labels[index]
manholeSeg.selectedSegmentIndex=index
}
//segmented control 設定
@IBAction func segChange(_ sender: UISegmentedControl) {
index=sender.selectedSegmentIndex
let display=pics[index]
print(index,display)
manholeImageView.image=UIImage(named: display)
manholeLabel.text=labels[index]
manholePage.currentPage=index
}
}
這次先試著自己操作擁有多樣UI元件時的設定,但屬性有點難記,若沒對照Swift的文件,幾乎完全背不起來XD 好在有優秀的學長姐作業可參考,以後還是得多加練習才能熟悉。
感謝HP迷的學長姐,受益良多!