#7 內容更換的ABCDE
IBAction&IBOutlet連結與Page Control, Segmented Control, Button, Gesture
這次的App實際演練了IBOutlet及IBAction的操作,集合各種不同元件和App內容互動(更換頁面)
其中使用到的元件:
Segmented Control
Image View
Swipe Gesture Recognizer
Page Control
Button
Label
A. 將元件在Storyboard上就定位
首先出場的還是我們熟悉的Storyboard,將這次會使用到的元件們依序上場
Swipe Gesture Recognizer有三件事需要注意
1.拉元件時直接和要控制的元件拉一起,這裡要滑動的是Image View,所以拉到Image View之上
2. 左滑與右滑各自為一個Swipe Gesture Recognizer,並且在畫面最右邊的Inspector > Attributes Inspector將其Swipe分別設定為Left, Right
3. ImageView需在Inspector > Attributes Inspector勾選User Interaction Enabled
B. 定義陣列(Array)
接下來我們要把這次更換的內容們(圖片及文字)整理成Array的形式
圖片先放入Assest中,陣列中的檔名則需要一字不差;代表頁數的變數(atoeIndex)一併在這裡定義
陣列和變數都定義完成後,可以在viewDidLoad裡加入App開啟時顯示的內容(圖片及文字)
在viewDidLoad加入的程式碼在畫面載入時就會自動呼叫,於是使用者啟動App就會看到ateoLabel和atoeImageView顯示在A,而不是空白
C. IBOutlet
IBAction和IBOutlet就像標籤,建立起Storyboard和Controller的溝通橋樑。IBAction標記了Storyboard發生的事件在Controller對應的功能(Function);IBOutlet則記載了Controller執行Function後得到的變數該反應在Storyboard哪個元件上
IBOutlet:
Segmented Control(換頁變動Segment)
Image View(換頁變動圖片)
Page Control(換頁變動圓點)
Label(換頁變動文字)
Ctrl+左鍵拖曳到Assistant就可以建立IBOutlet
IBOutlet命名常以名詞為首加上元件型別結尾,若建立時連線拉到viewDidLoad前,系統會自動將Connection帶入Outlet,反之則會帶入Action,但都可從Connection選單更改
IBOutlet建立完成的程式碼
D. IBAction
建立完IBOutlet後就換IBAction了,這裡要建立的是在螢幕上可互動(產生事件)的元件
IBAction:
Segmented Control(點按分類會換頁)
Swipe Gesture Recognizer(往左/右滑會換頁)
Page Control(點擊圓點會換頁)
Button(按左/右會換頁)
其中Segmented Control與Page Control是既可產生事件也會被變數影響的,所以IBOutlet和IBAction兩邊都必須建立
建立的主要方式和IBOutlet相同,Ctrl+左鍵拖曳到Assistant,命名則以動詞為首,元件型別結尾
這裡有兩件事需要注意
- 將Type設定為該元件的型別,讓Controller知道它是什麼,我們才能利用這些不同型別的功能。即程式碼中@IBAction後的(_ sender: UISegmentedControl)
- IBAction可以一個打十個,即多個元件連到同一個IBAction
建立完成的IBAction們,除了左右兩個Button外,另外三個都有選擇Type,即(_ sender: )中有型別。而Swipe Gesture則是將左右兩個元件都連到同一個IBAction中
E. 換頁Function
走到這裡大夥都已經就定位,元件擺在對的位置,定義好的資料陣列,也建立起Storyboard和Controller的橋樑,最後就是告訴大家該怎麼合作了
這個App要做到的功能是不管換頁的方式為何,顯示的文字、頁數及圖片都會同步改變
因為同樣執行換頁功能的元件有四種(Segmented Control, Swipe Gesture, Page Control, Button),所以使用Function寫一次,之後要使用只需要呼叫Function就行
這裏的程式碼讓需要換頁的元件都和頁數變數(atoeIndex)連結在一起,也加入讓換頁循環(E->A, A->E)的功能,防止換頁超過陣列的範圍產生Crash
有了Functiond可以將它一一加入前面的IBAction中
首先是Segmented Control和Page Control,讓儲存頁數的變數atoeIndex和Segmented(dot)換頁後的Index(currentPage)相等,再執行Function
再來是Swipe Gesture和Button,做了相應的動作(左/右滑,點擊左/右按鈕),會使得頁數變數(atoeIndex) -/+1,再執行Function告訴其他元件
寫好四種IBAction的換頁功能後,ABCDE App完成了
完整程式碼可以參照GitHub