如何用 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 屏幕中，顯示效果可能很差。若是你不熟悉自動佈局或約束，那花些力氣來學學。以後你會以爲大有裨益。

爲了讓咱們的應用在 iPhone四、4S、五、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 官方博客。