設計師如何用週末把 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