台羅小測驗app:實作segue傳送資料、Auto Layout等功能
這是選擇題App的作業,其中用到許多之前沒做過的功能,包括segue傳送資料、Auto Layout、SafariServices、UIActivityViewController……等等。
台羅是臺灣閩南語羅馬字拼音方案的簡稱,是現在政府公定的台語書寫標準,也是大多數人使用的台語書寫方式之一,我的Medium名字也是台羅,從我的姓氏「陳」來的!
既然如此就來做個台羅的小測驗吧,成果如下:
- 初始畫面:
- 第二頁測驗畫面,對錯分別有不同的AlertController:
- 總共10題完成後,跳到第三頁完成頁面,可以分享或重來
問答Array
創一個Swift File,用struct去定義QandA的類別,再做出[QandA]的Array:
起始畫面中的開啟網頁
要import SafariServices,然後用以下方式連到Button:
多個Button連到同一個@IBAction
選項有4個,也就是有4個按鈕,如果連到同一個@IBAction,就可以用tag去區分,再用switch去辨認不同的動作:
用segue傳送到下一頁
主要的構想是,當做完10題之後,按下UIAlertController的Action的時候,跳到下一頁去,就不是透過哪個Button傳送的,因此就去找了一下怎麼用程式觸發segue。
後來主要是參考學長的這一篇,還有stack overflow上的這篇,大概用下列的方式做出來:
首先先從第二頁的View Controller,也就是最上面那排左邊那顆,拉出segue到第三頁去,拉完應該會長這樣:
然後幫segue設定一個identifier,例如我設成EndQuiz:
在第二頁(segue的起始頁)中,先override prepare這個func,為這個segue傳送過去的資料做準備。其中用if去篩選segue.identifier,就可以確保是用我們剛剛做的segue,傳送資料的部分在我的例子中,是要把答對的題數 * 10,傳送到下一頁變成FinalScore變數:
完成這個prepare之後,再去寫觸發segue的功能preformSegue,短短一行而已,非常簡單,做完再放到UIAlertAction裡面去:
要注意的是,要放進UIAlertAction的function,都要附註(alert: UIAlertAction!)才可以用。
UIActivityViewController分享內容
最後一頁有個Button,是想讓使用者可以分享自己得到幾分,分享的內容就只是很簡單的一串字串:
Auto Layout
因為我的字體調蠻大的,為了讓小螢幕也能使用,在拉AutoLayout的時候,就要區分成從畫面上方拉下來,跟從畫面下方拉上去兩個部分:
這樣雖然字體很大,但如果數據有調整好,在小螢幕還是可以從上下分別畫下來,就不會擠成一團:
當然,這可能不是最理想的做法,如果字體可以隨著裝置調整,整體的美感就會好很多,未來有機會學到之後可以再回來調整!
(這篇開始改用Github Gist貼程式碼,比medium的好用一百萬倍…)