【史丹佛 2015 iOS 課程筆記】1.打造計算機 App,Storyboard 和 Swift 初體驗

史丹佛新一季的 iOS App 課程,"Developing iOS 8 Apps with Swift" 發燒出爐!一樣親切的白髮教授,全然不同的課程內容。不只  Xcode 從5進步到6,iOS 從7升級到8,過去萬年不變的男主角 Objective-C 由於年華老去,在新一季終於可以安心退休,由年輕帥氣,快速安全,功能強大的新人 Swift 接手。彼得潘將在4月份開始於 ALPHA Camp 開設的 Stanford 2015 iOS 課程讀書會 和大家一起跟隨像甘道夫一樣睿智的白髮教授,展開像魔戒冒險一樣好玩的 Swift App 學習之旅。


旅程進行的同時,彼得潘也將同時在 ALPHA Camp Blog 記錄這趟旅程的點點滴滴,分享史丹佛每堂課程的重點整理和讀書會投影片分享,畢竟世上的事難說得很,說不定未來某一天會有電影公司想拍一部 "那些年,我們一起追的 Swift" 呢!
 


接下來,就讓我們趕緊來瞧瞧學生出席率最高的第一堂課,"Logistics, iOS 8 Overview",甘道夫教授傳授了哪些高深的 Swift 真諦。


一. 課程先修條件:

需學過程式語言,了解 if else和迴圈等控制程式流程的基本概念。了解物件導向,見到以下名詞時不會想起蕭亞軒 "最熟悉的陌生人"

class, instance, object, method, inheritance, instance variable。


倘若覺得信心不足,現在退出還來得及。如果真心想學習 Swift,不學會 Swift 誓不罷休,也是有補救的方法。史丹佛在 iTunes U 還有其它兩門課可做為先修參考。

1. Programming Paradigms

2. Programming Abstractions

另外由於我們並未真的入學史丹佛,所以也可以考慮從他的敵對學校哈佛大學偷師,學習其知名的計算機概論課程 CS50。

二. iOS的分層:


iOS 由上而下分成 Cocoa Touch, Media, Core Services, Core OS 四層。我們開發 App 時,主要使用 Cocoa Touch 層提供的 API打造 App 畫面,偵側使用者手指和 App 畫面的親密接觸。

 
三. 開發工具: Xcode 6.1

史丹佛的課程以 Swift 1.1和 Xcode 6.1為主,但日前 Apple 發表了更上一層樓的 Swift 1.2和 Xcode 6.3,彼得潘也將在旅程的適當時機補充,搶搶甘道夫的風頭。(不過目前只有付費的 App 開發會員才有機會一睹 Swift 1.2和 Xcode 6.3的風采。)

四. App Demo: 計算機 App

打造第一個 iOS App,以計算機 App為範例:

1. 如何建立 Xcode 專案。

2. Xcode 的基本操作。

3. 從 storyboard 打造 App 畫面。

  • Label 元件:  顯示文字。
  • Button 元件: 可點選的按紐

  • 4. 從模擬器執行 App



    問題: Storyboard 裡我們辛苦加入,為了顯示數字的 label 消失了! App 畫面一片空白

    疑點:  Storyboard 的 App 畫面怎麼會是正方形? 明明地球上的 iPhone 都是長方形 (也許火星會有)

    原因: label 依然存在,只是他太長了,超出5s的螢幕寬度,而且數字還靠右對齊,所以我們就算有火眼金睛也看不到它。

    解法其實很簡單,既然問題出在 iPhone 的螢幕尺寸,倘若我們為每個尺寸量身訂做不同的畫面,總該萬無一失吧。可惜,這是過時的解法,費工又費時,那麼多的 iPhone 尺寸,甚至還有 iPad,光一個 App 畫面就要做好幾個版本,看來還是早點轉行,App 這條路看來是條天天加班的不歸路呀 ~

    別害怕,這些都是過去式了。Apple 後來發明打造 App 畫面的全新技術 Auto Layout。有了它,我們將可一次打造滿足各種尺寸的 App 畫面!

    五、使用 Auto Layout 打造 App 畫面

    關鍵技術:


    • Trailing Space to Container Margin

    • Leading Space to Container Margin
    • Bottom Space to Bottom Layout Guide
    • Top Space to Top Layout Guide



    Auto Layout 以 Constraint 設定條件,再由條件計算 UI 元件的位置和尺寸。因此,如果條件設得不好,將產生天大的災難,生成奇怪的畫面,就好像彼得潘畫畫時,最後的成品總跟原本心裡想的有落差一樣。當 Constraint 出問題時,主要會在 storyboard 的畫面上看到兩條特別顏色的線,橘線代表 Constraint 太少,不夠完整,紅線代表 Constraint 太多,產生衝突。唯有把這些可怕顏色的線條清除,App 畫面才能正常呈現。

    除了新增移除 Constraint,調整 Constraint 的條件外,Update Frame,Update Constraints,Reset to Suggested Constraints 也是我們解決 Auto Layout 問題時常用到的手段。

    六. 連結 storyboard 和 Swift 程式,從程式控制畫面上的 UI 元件


    @IBOutlet: 讓 property 指到畫面上的 UI 元件

    @IBAction: 讓 UI 元件的某個事件觸發程式裡的某個 method。

    七. Swift 程式碼語法初體驗


    (1) class 的定義和繼承,property 和 method

    (2) var 宣告變數,let 宣告常數

    (3) type inference 和指定型別

    (4) 可有可無的 optional,利用!取出 optional 的值,當 optional 為 nil 時程式會 crash

    (5) option + 點擊觸碰板可查詢相關說明

    (6) 列印小幫手 println function

    (7) 字串置換的

    (8) 物件生成時,它的屬性一定要已完成初始

    (9) 可由 UIButton 的 currentTitle 取得按紐目前的文字

    八. 成果


    App 畫面上顯示從0到9十個數字的button,

    右上角有個 label 顯示目前使用者輸入的數字。

     

    等等,史丹佛教授該不會口是心非,說要教我們做計算機 App,

    卻做出一個只能輸入數字,比三歲小孩還不如,連1+1等於2都算不出的計算機?

    別著急,下堂課 "More Xcode and Swift, MVC",App 馬上會變身為加減乘除樣樣精通的強大計算機!

    如果對以上內容有什麼問題或是純粹想要和彼得潘交流,歡迎在下面留言!