如何用 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 官方博客。