如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用？（2）

標籤：應用

【編者按】本篇文章作者是 Reinder de Vries，既是一名企業家，也是優秀的程式員，發表多篇應用程式的部落格。本篇文章中，作者主要介紹了如何基於 Parse 特點，打造一款類似 Instagram 的應用，完整而清晰的步驟，為開發人員提供一次絕佳的學習體驗。本文系 OneAPM 工程師編譯整理，這是本系列的第 2 篇文章。

如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用？（1）

將資料展現在螢幕上

讓我們看看下面這個類的最終方法。它會把資料放在表視圖中：

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? {    let cellIdentifier:String = "Cell"    var cell:PFTableViewCell? = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? PFTableViewCell    if(cell == nil) {        cell = PFTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: cellIdentifier)    }    if let pfObject = object {        cell?.textLabel?.text = pfObject["name"] as? String    }    return cell;}

該方法的特徵是這樣：用帶參數的 tableView、indexPath 和對象，重寫方法 tableView 的 cellForRowAtIndexPath，返回一個顯示展開的 PFTableViewCell 執行個體。換句話說：這裡有一個表視圖、一個對象以及它的索引（行號），現在請返回一個可用的儲存格視圖。

然後，我們首先聲明儲存格的文本標識符。每個單元類型具有不同的標識符。我們這裡只使用一種單元類型，為「儲存格」指定字串類型值。該語句聲明的是一個常數，而不是變數。

然後，我們要聲明 PFTableViewCell 類型的可選變數單元嗎？我們嘗試將 tableView 參數出列。出列是一個機制，重新使用舊錶視圖單元加速表視圖。執行個體方法 dequeueReusableCellWithIdentifier 需要一個參數，即我們這種類型的資料格集的標識符。該方法的傳回值類型是可選的，我們要將它轉成 PFTableViewCell 類，轉換是從一種類型轉成另一種相容的類型。這樣，我們可從 UITableViewCell 類轉成 PFTableViewCell 類。為什麼是可選的？如果沒有單元出列，方法將返回空值。

當儲存格為空白，我們可以建立 PFTableViewCell 類的新單元。用標識符表徵這種單元類型，並賦給它 UITableViewCellStyle.Default 的風格。

在接下來的 if 語句中，我們嘗試做一些很酷的東西。通常情況下，當你使用一個選項，你需要先將它開啟。在開啟之前，你必須檢查可選是否為空白值。你不能開啟值為零的可選項。在本例中，我們使用可選的綁定（if-let），來驗證可選是否為空白。如果它包含一個值，我們可以將這個值作為一個臨時常數（pfObject）。

然後，我們指派至「名稱」填寫到 textLabel 的 Text 屬性中。顯而易見，textLabel 是表視圖中按行顯示的文字標籤。PFObject 類型的變數對象是繼承 NSObject 的，所以我們可以使用 「…」符號，用屬性名稱「name」檢索對象。然後將其轉換成可選字串，因為對象的名稱屬性可有可無，也可能是空值。

最終，我們返回該單元。

CatsTableViewController小結

在 CatsTableViewController 類裡，我們需要做以下三件事情：
1. 通過幾個基本設定來初始化類的執行個體。
2. 通過覆蓋 queryForTable 整合 Parse 後端：這是我們要用的類，也是我們的緩衝策略。
3. 通過建立或重新使用一個儲存格並填充，將資料按行置於螢幕上。

在螢幕上放置表視圖

那麼現在，在運行應用前什麼事情都不會發生。我們並沒有串連應用和 theCatsTableViewController！等等再做。
回到 AppDelegate 類，並調整應用的 didFinishLaunchingWithOptions 方法來反映以下內容：

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool  {    Parse.setApplicationId("...", clientKey: "...")    var tableVC:CatsTableViewController = CatsTableViewController(className: "Cat")    tableVC.title = "Paws"    UINavigationBar.appearance().tintColor = UIColor(red: 0.05, green: 0.47, blue: 0.91, alpha: 1.0)    UINavigationBar.appearance().barTintColor = UIColor(red: 0.05, green: 0.47, blue: 0.91, alpha: 1.0)    UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]    UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent    var navigationVC:UINavigationController = UINavigationController(rootViewController: tableVC)    let frame = UIScreen.mainScreen().bounds    window = UIWindow(frame: frame)    window!.rootViewController = navigationVC    window!.makeKeyAndVisible()    return true}

首先，確保你仍有正確的 Parse 應用 ID 和用戶端密鑰。

其次，我們建立 CatsTableViewController 的新執行個體，並將其分配給變數 tableVC。我們使用初始化程式，只需要一個參數類名「Cat」，之前寫的初始化就會被內部調用。也給 tableVC 一個名字 ——「Paws」，它可用於任何 UIViewController 類（表視圖繼承該類）的屬性，之後通過導航控制器被調用。

然後，我們改變 UINavigationBar 的外觀。該類被導航控制器使用，即許多的應用程式頂部的粗條欄。設定外觀可以確保類的一切執行個體附著到某些樣式規則。比如 tintColor 和 barTintColor。它們均設定為略帶藍色的樣子，並直接分配為 UIColor 的執行個體。導覽列文本顏色被設定為白色，然後設定 iPhone 狀態列的主題（也是白色）。

注意：它不是必需的，但要使狀態列顏色變化生效，你需要添加一行到 Info.plist 檔案。這時，你會發現目錄中支援哪些檔案。開啟支援的檔案，插入一個新行（右鍵菜單），要麼粘貼基於控制器的狀態列外觀屬性，要麼將 UIViewControllerBasedStatusBarAppearance 放置其中。確保該行值是 NO 還是 False。

接下來，我們終於要建立 UINavigationController 執行個體本身，並將其分配給變數 navigationVC。我們用 RootViewController 來初始化，第一個視圖控制器顯示著：tableVC。這是我們的視圖層次：

UIWindow → UINavigationController → CatsTableViewController

因此，我們顯示導航控制器內部的表視圖控制器，並將它放入應用程式的 UIWindow 頂層根視圖控制器。

最後，就是一些常規步驟了：建立一個新的 UIWindow 執行個體，為它指定完整的架構，指定根視圖控制器，使之成為應用程式的關鍵視窗。

運行應用程式

哦耶！按下 command-R 運行應用程式或點擊 Play按鈕的左上方。一切順利的話，你的應用程式應該會出現基本的藍色視圖顯示著10個貓的名字。

你可以下拉表視圖並重新整理，然後它從 Parse 下載新的資料並重新載入表視圖。
之前奠定的基礎，能讓我們的應用程式更加豐富，這是我們接下來要做的。來看看我們的成果！你已經成功將 Parse 加入了一個構建中的應用原型。太棒了！

在 Interface Builder 中建立一個自訂的 UITableViewCell

可以用自訂表格視圖儲存格，讓應用更加豐富。我們將不會再使用純文字的儲存格，取而代之的是 image-name-votes 儲存格。

首先，我們建立一個新的類，命名為 CatsTableViewCell。在 Xcode 檔案導航中右擊 Paws，選擇 「建立檔案」 。從「iOS → 源」添加可觸摸類的模板。命名為 CatsTableViewCell，繼承 UITableViewCell 類。然後，勾選並建立 XIB 檔案。語言是依然是 Swift。在 Paws 目錄中建立檔案。

然後，開啟 CatsTableViewCell.swift 檔案，更改類定義如下：

class CatsTableViewCell: PFTableViewCell

看看我們做了什嗎？此類擴充（繼承） PFTableViewCell 類，而不是 UITableViewCell 類。還記得表視圖儲存格的 ForRowAtIndexPath 方法嗎？它返回 PFTableViewCell 類的儲存格執行個體，我們正是我們做出修改的原因。

添加以下新 CatsTableViewCell 的出口，在該類的首行，第一個大括弧之後。

@IBOutlet weak var catImageView:UIImageView?
@IBOutlet weak var catNameLabel:UILabel?
@IBOutlet weak var catVotesLabel:UILabel?
@IBOutlet weak var catCreditLabel:UILabel?

我們需要這四個出口來顯示四個 Parse 資料：貓的圖片、貓的名字、它得到的票數、圖片原作者。

接下來，從工程導航中開啟 CatsTableViewCell.xib（它會在 Interface Builder 中開啟）。Xcode 裡有一種工具，對於設定應用的使用者介面很有協助。這是一個基礎工具，它不是建立一個功能性的應用介面，只是定義它。與汽車收音機相比，Interface Builder 會建立無線控制台，並用Swift來編寫線路。

首先我們要做的是：

1. 單擊文檔大綱（左）的主要單元元素。
2. 選擇 Inspector 選項卡（右）的大小。
3. 更改行高為350，寬度為320，並再次將高度設為350。

主視圖需要調整大小。

現在，增加四個視圖：

1. 在物件程式庫的右下，找到 UIImageView 類。
2. 將庫中映像拖動到單元視圖查看。
3. 調整映像視圖，水平置中，並從頂部、左側和右邊與它相隔15點。選擇映像視圖時，你也可以通過 Size Inspector 來實現。其 X 和 Y 位置都是15，而寬度和高度均為290。

重複上述步驟建立3個新視圖，都是 UILabel 的執行個體。一個靠左對齊，另一個靠右對齊。參照上面的作為參考。左標籤的位置（317，25，209，21），四個數值分別為X值、Y值、寬度和高度。右標籤的位置（225，69，317，21）。信用標籤被定位在（199，285，106，21）。

下一步，配置所有4個視圖。開啟右側的屬性偵測器，為各個視圖進行如下設定：

1. 映像視圖：填充模式，檢查剪輯子視圖。
2. 左標籤：字型為粗體17.0號，設定為黑色
3. 右標籤：字型為14.0號，顏色為淺灰色。
4. 信用標籤：字型為14.0號，設定為白色。

現在，讓我們串連多個視圖到出口。首先，在左邊的文檔大綱，再次選擇貓的表格視圖儲存格。然後，切換到右邊的串連 Inspector 選項卡。

然後，在檢查器中找到 Outlets 下的四個出口。看到空心圓了嗎？拖動 Cat ImageView 的右圈到儲存格的映像視圖中。一條藍線會出現，在檢查器中，出口都有選擇框。其他三個標籤也重複這一步驟。

為自訂儲存格設定自動布局約束

注意：你其實可以跳過設定自動布局限制，但程式在不同 iPhone 螢幕中，顯示效果可能不好。如果你不熟悉自動布局或約束，那花些力氣來學學。之後你會覺得大有裨益。

為了讓我們的應用在 iPhone4、4S、5、5S、6 和 6Plus 上完美運行，我們必須為 Interface Builder 的 UI 元素添加一些規則。Interface Builder 中有一個叫自動布局的功能，使用約束來管理檢視位置、對準和調整。自動布局是一個很給力的工具，因為它既直觀，又非常合乎邏輯。總的來說，這個工具能非常有效地管理複雜的大小調整，為你節省大量編寫自訂布局代碼的時間。

從技術上講，約束只是我們一直遵行的視圖規則。

• 映像視圖：中心水平，高度固定為290點，寬度任意，但距離儲存格的頂部、左側和右側邊緣均15點。
• 左側標籤：寬度任意，固定高度為21點，距離儲存格左邊緣25點，右邊緣11點。
• 右側標籤：寬度任意，固定高度為21點，距離儲存格左邊緣25點，右邊緣11點。
• 信用標籤：寬度任意，固定高度為21點，距離右側15點，頂部285點（固定該標籤在映像視圖的右下方）

有四種辦法可以建立約束，我們這裡就示範一下最簡單的：通過頂部的編輯目錄。

為了配置映像視圖，按下列目錄選項進行選擇：

1. Editor → Align → Horizontal Center In Container
2. Editor → Pin → Height
3. Editor → Pin → Leading Space To Superview
4. Editor → Pin → Trailing Space To Superview
5. Editor → Pin → Top Space To SuperView

然後，設定左標籤：

1. Editor → Pin → Height
2. Editor → Pin → Leading Space To Superview
3. Editor → Pin → Bottom Space To Superview

然後，設定右標籤：

1. Editor → Pin → Height
2. Editor → Pin → Trailing Space To Superview
3. Editor → Pin → Bottom Space To Superview

最後設定信用標籤：

1. Editor → Pin → Height
2. Editor → Pin → Trailing Space To Superview
3. Editor → Pin → Bottom Space To Superview

看見沒？我們只是將視圖置於邊界，並將其固定到相應的幾個位置。現在你的螢幕應該類似下面的螢幕。

（未完待續…）

回顧 《如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用》系列（1）

敬請持續關註：《如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用》系列（3）.

原文地址：http://www.appcoda.com/instagram-app-parse-swift/

本文系 OneAPM 工程師編譯整理。OneAPM 是應用效能管理領域的新興領軍企業，能協助企業使用者和開發人員輕鬆實現：緩慢的程式碼和 SQL 陳述式的即時抓取。想閱讀更多技術文章，請訪問 OneAPM 官方部落格。

如何用 Parse 和 Swift 搭建一個像 Instagram 那樣的應用？（2）