Swift|25 利用 page control，segmented control，button & gesture 更換內容

運用元件切換來顯示今敏大師的三部動畫電影作品

• Image View
• Segment Control
• Page Control
• Label
• Prev、Next Button
• Swipe Gesture Recognizer

程式碼

把page control、segmented control、label & image view拉outlet出來，
另外有將image view設圓角

//拉outlet
@IBOutlet weak var movieImageView: UIImageView!{
didSet {
movieImageView.layer.cornerRadius = 30
movieImageView.clipsToBounds = true
}
}
@IBOutlet weak var movieSegment: UISegmentedControl!
@IBOutlet weak var moviePageControl: UIPageControl!
@IBOutlet weak var movieLabel: UILabel!

將資料儲存在imageViews、movieDescriptions的Label陣列中，
並定義一個型別為Int的變數，用於之後顯示陣列的排序

//運用陣列array
let imageViews = ["actress","blue","godFather"]
let movieDescriptions = ["以主角藤原千代子一生時緊時鬆的追夢，貫穿演藝人生；而她所演出的每一部電影，全都為其終生的追尋作註解。", "霧越未麻是流行音樂偶像團體「CHAM!」中的成員之一，但是在公司的決策下，未麻告別偶像身分轉往演員發展。但她卻感覺內心有個聲音在拒絕自己的選擇。隨著越來越多電視劇的演出，未麻卻覺得自己的頭腦越來越奇怪，彷彿有「另一個自己」正在形成。這時，她身邊的工作人員竟一個個接連被殺。在面對社會壓力和疑雲之際，未麻感到越來越混亂……", "大雪紛飛的東京，在一個原本應該是全家團圓的聖誕夜裡，流浪漢阿仁、小花和美雪卻在新宿街頭意外撿到一個被遺棄的女嬰。三個看似放棄人生，沒有未來的流浪漢在叢林都市中展開了一段尋人冒險。"]
//顯示陣列排序
var index:Int = 0

每呼叫一次pageChange()，就會顯示func定義的內容

//function定義同步改變的內容
func pageChange(){
movieImageView.image = UIImage(named: imageViews[index])
movieSegment.selectedSegmentIndex = index
moviePageControl.currentPage = index
movieLabel.text = movieDescriptions[index]
}

Segment Control和Page Control的設定

//Segment Control切換
@IBAction func selectSegment(_ sender: Any) {
index = movieSegment.selectedSegmentIndex
pageChange()
}
//下一頁
@IBAction func next(_ sender: Any) {
if index == imageViews.count-1 {
index = 0
}else{
index += 1
}
pageChange()
}
//前一頁
@IBAction func pre(_ sender: Any) {
if index == 0 {
index = imageViews.count-1
}else{
index -= 1
}
pageChange()
}
//Page Control切換
@IBAction func changePage(_ sender: Any) {
index = moviePageControl.currentPage
pageChange()
}

向左向右滑的Gesture設定

將 Gesture Recognizer 加到想辨識手勢的元件上，拖曳到 storyboard 上的 image view。

元件列表裡將長出 Swipe Gesture Recognizer，我們需要加入兩個，一個向左、一個向右

一個設定Left，一個設定Right

想讓 image view 觸碰有反應，能辨識到 swipe 手勢，我們要將它的 User Interaction Enabled 勾選。

從 storyboard 的 gesture recognizer 元件拉 IBAction，設定手勢辨識執行的 function。

//向左、向右滑動翻頁
@IBAction func SwipeToChange(_ sender: UISwipeGestureRecognizer) {
if sender.direction == .left {
index += 1
if index == 0 {
pageChange()
} else if index == 1 {
pageChange()
} else if index == 2 {
pageChange()
} else {
index = 0
pageChange()
}
}else if sender.direction == .right {
index -= 1
if index == 2 {
pageChange()
} else if index == 1 {
pageChange()
} else if index == 0 {
pageChange()
} else {
index = 2
pageChange()
}
}
}

成果

參考

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

運用 page control、segmented control、button & gesture — 愛在三部曲

#9 利用 button & gesture 更換圖片內容

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

GitHub

GitHub - ting3242006/changeImage