台羅小測驗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的好用一百萬倍…)

Github

--

--