本節書摘來自華章計算機《swift ios應用開發實戰》一書中的第2章,第2.5節,作者:劉銘 著, 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
通過前面的學習,我們已經知道如何在故事闆中建立使用者界面,但在搭建好使用者界面以後又要做什麼呢?接下來就需要将控件對象和程式代碼關聯起來。我們在建立calculator項目的時候使用了預設的single view controller模闆,該模闆關聯了故事闆中的view controller場景和viewcontroller.swift檔案中的viewcontroller類。現在我們在故事闆中查驗一下。
在故事闆中選中view controller場景,使用command+option+3快捷鍵切換出辨別檢視窗(identity inspector),在custom class部分中,檢視class是否被設定為viewcontroller。
class中所設定的viewcontroller指的就是項目中的view-controller類(viewcontroller.swift檔案中),viewcontroller類是一個控制器類,它包含一個view屬性(指針),該屬性指向故事闆中的viewcontroller視圖,也就是說viewcontroller類控制着這個視圖。但是,這個控制器類還不能操作剛剛在這個視圖中所添加的那些可視化控件,接下來就需要建立控制器和視圖之間的關聯。
2.5.1要完成的效果
本章的實踐中,我們需要通過uibutton輸入操作數和運算符,最後還要将計算結果顯示到uilabel對象上,如圖2-17所示。
2.5.2了解outlet和actions
在前面的實戰練習中,我們使用interface builder設計了一個簡單的電腦界面,并且還在identifier檢視窗中看到了所對應的viewcontroller.swift類。那麼問題就是,我們通過什麼方法能夠讓viewcontroller類中的代碼與故事闆中的使用者界面元素進行互動呢?
方法肯定是有的,一個控制器類中的屬性(執行個體變量)可以通過引用的方式與故事闆或者nib檔案中的視圖對象建立聯系,隻要我們在類中聲明屬性的時候加上關鍵字iboutlet。我們可以把outlet想象成一個指向使用者界面對象的指針。例如在calculator項目中,我們建立了一個label對象,當進行計算時,需要這個label顯示使用者輸入的資料以及計算的結果,是以通過outlet就可以在代碼中更新label的顯示内容。
與outlet相反,當觸發故事闆或者nib檔案中的界面對象時,需要執行指定類中的方法,這個指定的方法就是action方法。例如calculator項目中的數字按鈕,當使用者點選這些按鈕的時候就要執行action方法。我們甚至可以設定成當使用者點選按鈕以後執行某個方法,或者是當使用者點選按鈕後在手指離開的時候執行某個方法。
我們可以先在模拟器中檢視使用者界面的搭建效果。
步驟1點選xcode工具欄中左側的“run”按鈕,當編譯成功以後,啟動ios模拟器并自動運作calculator項目(裝置建議選擇iphone 5或iphone 5s)。此時,點選電腦中任何按鈕的時候,隻會看到按鈕有被點選的效果反應,程式方面并不會執行什麼。
當使用者點選電腦按鈕的時候,視圖就會觸發一個動作(action),動作會以指定的方法形式呈現在viewcontroller類中。通過執行該方法,我們可以将運算結果回報到故事闆的label中。所謂的回報,實際上就是通過代碼修改故事闆中label對象的屬性,是以需要建立outlet關聯。
我們可以通過助手編輯器為viewcontroller類添加1個outlet和17個action。
在項目導航中選擇main.storyboard檔案,從菜單中選擇“view→assistant editor→ show assistant editor”打開助手編輯器。
如果在故事闆裡面選中了某個視圖場景,那麼當我們打開助手編輯器後,會自動顯示與場景對應的視圖控制器類檔案。比如,在目前main.storyboard中選中的是viewcontroller場景,則切換到助手編輯器模式的時候,會自動打開viewcontroller.swift檔案。如果沒有打開該檔案,則可以通過編輯器頂部的工具欄選擇相應的檔案,如圖2-18所示。
接下來,我們開始建立viewcontroller類與故事闆中label的outlet關聯。
步驟2确定viewcontroller.swift檔案顯示在助手編輯視窗中。
步驟3故事闆中,在label控件上按住滑鼠右鍵,将其拖曳至右側視窗中viewcontroller.swift檔案的@interface指令的下方,如圖2-19所示。
松開滑鼠以後會彈出關聯設定面闆,如圖2-20所示。将connection設定為outlet,将name設定為labelresult,type和storage不用修改,設定好後點選“connect”按鈕。
在outlet關聯建構好以後,viewcontroller類中會新增加一行@iboutlet聲明:
在這個例子中,我們建立了一個叫labelresult的outlet,這個指針指向故事闆中viewcontroller場景裡面的label對象。
在編譯項目代碼時,swift編譯器不會對@iboutlet聲明做任何特别的事情。@iboutlet唯一的目的就是告訴xcode這個屬性會連接配接故事闆或nib檔案中的一個視圖對象。也就是說,任何想要指向故事闆或nib檔案的屬性必須被聲明為@iboutlet。
action與outlet正好相反,它代表一個動作,當使用者在控件對象上進行互動操作并需要回報給viewcontroller時,就會調用這個動作所關聯的程式代碼。當使用者點選場景中按鈕時,就會觸發一個事件,這個事件會調用我們在類中定義的action方法。
建立action關聯的方法與outlet稍微有些差別,接下來我們為故事闆中的uibutton與viewcontroller類建立action關聯。
步驟4在iboutlet的下面添加5個執行個體變量的定義:
步驟5故事闆中,在按鈕為0的button控件上按住滑鼠右鍵,然後将其拖曳至助手編輯器視窗中viewcontroller類中的didreceivememorywarning方法的下面,如圖2-21所示。
松開滑鼠以後,在彈出的關聯設定面闆中,将connection設定為action,将name設定為buttontap,将type設定為uibutton,将event設定為touch up inside,arguments設定為sender,如圖2-22所示。設定好以後點選“connect”按鈕。
在預設情況下,關聯設定面闆中的connection是outlet,在選擇action以後面闆會發生一些變化。name代表所定義的action方法的名稱;type代表該方法會攜帶一個參數,這個參數的類型是uibutton(傳遞給buttontap方法的參數就是故事闆中指向uibutton對象的指針變量),是以這裡的type我們設定為uibutton類型。event代表使用者所觸發的事件,當使用者點選按鈕後并離開的時候會觸發buttontap方法;arguments代表buttontap方法所攜帶的參數形式,它分為3種:不帶參數、帶一個參數(sender,表示使用者在故事闆中所互動的那個對象)、帶兩個參數(sender和event,除了所互動的視圖對象外還有所觸發的事件)。
在關聯設定面闆中點開event清單後,會發現很多不同的事件,我們可以根據需要選擇。
在建立好action以後,viewcontroller.swift檔案應該如下面這樣:
步驟6以此類推,将1~9按鈕與buttontap方法建立ibaction關聯。因為使用者按0~9這10個按鈕調用的都是buttontap方法,是以我們不用為接下來的9個再單獨建立新的方法。在1按鈕上按住滑鼠右鍵,拖曳至buttontap方法上,如圖2-23所示,再将2~9按鈕照此方法操作。
步驟7在編輯器的右側視窗中編輯viewcontroller.swift檔案,找到buttontap方法并在該方法中添加下面的代碼:
建構并運作應用程式,當我們按下數字鍵以後,數值就會同時顯示在label和控制台中。接下來,我們還要處理有關小數點的問題。
步驟8将故事闆中的小數點按鈕與viewcontroller類建立ibaction關聯。在小數點按鈕上按住滑鼠右鍵,拖曳至buttontap方法的下面,在彈出的面闆中connection設定為action,name設定為decimalpointtap,event設定為touch up inside,arguments設定為none。
通過ibaction關聯,當我們點選小數點按鈕以後,系統就會調用decimalpointtap方法,而且我們也不需要所傳遞的參數資訊,是以将arguments設定為none。
步驟9在viewcontroller.swift檔案中添加下面關于小數點的程式代碼:
建構并運作應用程式,此時可以正常輸入帶小數部分的數字。在第3章中我們還會繼續完善calculator項目,将添加更多的ibaction方法。
2.5.3使用快速檢查器檢視關聯
如果我們在建立關聯時出現了錯誤,比如關聯了錯誤的outlet變量,為錯誤的事件指定了一個action方法等。要想檢視某場景所有的關聯資訊,可以在故事闆大綱視圖的viewcontroller圖示上點選滑鼠右鍵調出快速檢查器,如圖2-24所示。
在快速檢查器中,我們可以點選已關聯好的對象前面的“x”移除關聯,也可以點選後面的圓圈建立新的關聯。點選檢查器左上角的“x”可以關閉整個快速檢查器。
除了通過快速檢查器檢查關聯以外,在代碼檔案中也可以檢視是否成功關聯。
1)在項目導航中選擇viewcontroller.swift檔案。
2)在iboutlet和ibaction的聲明語句之前看到實心的圓點,代表已經成功建立關聯,如圖4-31所示。如果看到的是空心圓點,則代表沒有建立關聯。
在故事闆中成功建立關聯以後,如果此時想要在代碼中删除outlet變量或action方法,還需要在故事闆中删除建立的關聯,否則會導緻程式崩潰退出。