設計師如何用週末把 Swift 從不會到學會并做了一個 App

導言

起先，本來想用 React Native 做一個微信名片導入到錢包的 App。某日重裝系統后，原來的 React Native 的環境怎麼裝都跑不起來原來寫的 App。因此，我怒而轉向 Swift 陣型。

其實在 React Native 寫 UI 這過程很方便，但是接入 iOS 錢包這個過程，真的看到我一頭暮水。

新建項目

當然打開你的 Xcode，我建立了一個叫 Play 的項目。

選擇「 Single View App 」，下一步，不使用 Core Data。

入門

我覺得一切的語言，最重要還是莫過於。

print("...")

無論你想寫什麼命令，用 Print 一下就正解了。

我在網絡上找了一個庫，叫「 PlainPing 」

https://github.com/naptics/PlainPing

PlainPing.ping("www.google.com", withTimeout: 1.0, completionBlock: { (timeElapsed:Double?, error:Error?) in
    if let latency = timeElapsed {
        self.pingResultLabel.text = "latency (ms): \(latency)"
    }

    if let error = error {
        print("error: \(error.localizedDescription)")
    }
})

我突然間開始覺得，Swift 這個語言怎麼做起來跟 node 差不多，想要什麼功能？想網找一個庫回來。

所以，我就這樣子，入門了一個 Swift 面向 Google 的開發人員了。

開始嘗試寫一個 App

在開始寫一個 App 之前，我推薦使用 StoryBoard （ IB ）作為 App 的 UI 編輯工具。

IB 的使用規則很簡單，核心就是一個「約束」概念。

IB 的入門課程我是看了這篇文章入門的（Auto Layout 入門教學 | 設計自適應介面 Adaptive UI）。

至於大家如何入門，我覺得 Google 多點就可以了。

我們當然可以先拖動一個空間到我們的 IB，再設定一下水平垂直居中。

接著，用我們的簡單代碼，來體驗一下第一次使用 IB 并可以運行的愉悅感。

按照上圖，我們使用在 IB 添加了一個叫 Label 的控件，接著，把界面切換成「 Assistant 」模式。

對著我們的 Label 控件右擊后拖動到左邊，建立一個 Outlet。

先這樣。

什麼是 Outlet 和 Action 呢？

其實，這裡就是一個綁定的過程。在 Storyboard，我們做完的界面是不會和代碼綁定的。作為設計師的你，就理解為 Storyboard 就在另一個次元空間吧。我們使用神之鼠標把控件給綁定到代碼之中，給代碼暴露了一個可以控制某個控件的接口，這裡，稱呼為 Outlet。不過這個 Outlet 只能讀取和修改控件的一些樣式，文本內容。

如果遇到按鈕類的控件呢？我們就要用 Action 這個事情了。在使用鼠標把控件拖動到代碼，選擇 Action，就會要求你新建一個 Function 了。這樣，你點一下那個控件的操作，就會由 Function 來完成了。如果，你需要修改一個按鈕的名字，還是需要綁定上 Outlet 才可以。

簡單而言，Outlet 比較類似一個數據上的綁定。然而 Action 就是去觸發 Function。

我們繼續回來，原來的代碼。我們這次，在添加一個 Action，使用剛才的辦法。添加完 Action 后，我們就寫一個事情進來。

    @IBOutlet weak var PlayLabel: UILabel!
    @IBAction func doAction(_ sender: UIButton) {
        PlayLabel.text = "Hey"
    }

做完這些事情，我們就按下 Command （⌘）+ R 來在模擬器運行我們的 App。

我們就可以點一下「 Button 」，yo，我們的 Label 的文字就變成，Hey 了！

是很簡單的吧？

我們的入門課程就如此結束了。

設計師如何開發一個 Swift App ？

首先，我們要做一個設計圖。

接著，我們把設計圖的樣子，用 Xcode 的 IB 佈局出來。

放心，在 IB 的樣式不能完全反映 App 的最終樣子。因為有部分樣式，我們只能使用代碼添加，不能使用 IB 完成。

接著，引入一大堆的庫和寫一大堆的代碼。

難點﹣UITableView

UITable 是整個佈局之中最難的第一個地方。
我從下午 7 點折騰到凌晨 2 點才搞定這個 UITableView。
這裡分享兩個視頻，我是後期看了這兩個視頻才知道怎麼折騰。

Auto Resizing Table View Cell height in swift 3 and Xcode - YouTube

https://www.youtube.com/watch?v=6bQYd9N6g6A

最後，在真機運行 App 吧！

GitHub 項目位置

https://github.com/qoli/dailyVerse

項目應該快可以上架，我週末買了 Apple 開發者會員，可惜都週一過去了，還沒顯示通過會員。這種 App 寫完了，但是開發者還沒下來真奇怪。哈哈哈

大家也可以透過這裡查看操作視頻： https://www.youtube.com/watch?v=Y4xG7LScOT8&feature=youtu.be