如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?（3）

【编者按】本篇文章做者是 Reinder de Vries，既是一名企业家，也是优秀的程序员，发表多篇应用程序的博客。本篇文章中，做者主要介绍了如何基于 Parse 特色，打造一款相似 Instagram 的应用，完整而清晰的步骤，为开发者提供一次绝佳的学习体验。本文系 OneAPM 工程师编译整理，这是本系列的第 3 篇文章。

如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用？（1）

如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用？（2）

##使用 Swift 和自定义表视图单元格

如今让咱们再次回归代码——已经有足够的接口。打开 CatsTableViewController.swift 并找到指定初始化 init（风格：类名:)。

在这个方法中，咱们能够在 self.parseClassName = className;下添加如下两行代码：

self.tableView.rowHeight = 350
self.tableView.allowsSelection = false

第一行设置合适的行高，第二行禁止单元格选择。 而后添加下列代码到 viewDidLoad just above super.viewDidLoad(): 方法

tableView.registerNib(UINib(nibName: "CatsTableViewCell", bundle: nil), forCellReuseIdentifier: cellIdentifier)

该行极可能引起错误。为了尽可能不出错，将下面代码从 tableView 的 cellForRowAtIndexPat 方法移动到类的顶部，并从新将其值命名为「CatCell」。

let cellIdentifier:String = "Cell"

类的定义应该相似这样：

class CatsTableViewController: PFQueryTableViewController  
{
	let cellIdentifier:String = "CatCell"

	override init!(style: UITableViewStyle, className: String!)
}

咱们刚刚将 cellIdentifier 常量从局部方法范围扩展成类范围，使得它在整个类中都可用，包括 tableView 的 cellForRowAtIndexPath 和 viewDidLoad。 接下来，咱们用下面代码替换 tableView 的 cellForRowAtIndexPath 的内容：

var cell:CatsTableViewCell? = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? CatsTableViewCell

if(cell == nil) {
	cell = NSBundle.mainBundle().loadNibNamed("CatsTableViewCell", owner: self, options: nil)[0] as? CatsTableViewCell
}

if let pfObject = object {
	cell?.catNameLabel?.text = pfObject["name"] as? String

	var votes:Int? = pfObject["votes"] as? Int
	if votes == nil {
		votes = 0
	}
	cell?.catVotesLabel?.text = "\(votes!) votes"

	var credit:String? = pfObject["cc_by"] as? String
	if credit != nil {
		cell?.catCreditLabel?.text = "\(credit!) / CC 2.0"
	}
}

return cell

你不由疑惑，这与咱们之前使用的旧代码相比有什么区别？主要体如今：

1. 单元格类型从 PFTableViewCell 改成 CatsTableViewCell
2. 当单元格为空，新单元格从咱们刚才建立的 XIB 文件中获得。咱们将从集合中检索，赋予全部当前类全部权，而后将它转换为 catstableviewcell。
3. 而后，咱们检查对象是否存在，并尝试将 Parse 对象的列名赋给它的文本属性，就像以前那样。
4. 而后，catVotesLabel 和文本属性也同样。Parse 每列的票数是 String 类型，但不是 int，因此要转换成 int 类型吗？若是票数刚好是空值，那么咱们就将其设置为零。而后，使用一种称为字符串插值的骚亮技术，设置标签文本。

最后，咱们返回单元格。

让咱们再次运行应用程序。一切看上去太完美了！没有 Bug 和死机！可是...图像在哪儿？

##从 Parse 异步下载图像

图像不见了，这怎么能够！让咱们加上它。在 TableView 的 cellForRowAtIndexPath 添加以下代码「在最后一个 if 语句（用于信用标签）以后，在返回语句以前」。

var cell:CatsTableViewCell? = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? CatsTableViewCell

if(cell == nil) {
	cell = NSBundle.mainBundle().loadNibNamed("CatsTableViewCell", owner: self, options: nil)[0] as? CatsTableViewCell
}

if let pfObject = object {
	cell?.catNameLabel?.text = pfObject["name"] as? String

	var votes:Int? = pfObject["votes"] as? Int
	if votes == nil {
    	votes = 0
	}
	cell?.catVotesLabel?.text = "\(votes!) votes"

	var credit:String? = pfObject["cc_by"] as? String
	if credit != nil {
    	cell?.catCreditLabel?.text = "\(credit!) / CC 2.0"
	}
}

return cell

哇！这里发生了什么？咱们将 Parse 的 URL 列转成了 NSURL 类型的实例。

咱们用它在主操做队列中启动异步 NSURLConnection，其中下载图像做为 NSData 对象。当下载完成时关闭执行。它分配下载获得 UIImage 的数据，分配到 catImageView 的图像属性中。

在这里无需钻研太深，由于上面代码的复杂性与咱们的应用程序无关。可是，请注意如下几点：

• 使用 NSURLConnection 很方便，但有点枯燥。当你使用互联网上的数据源作更复杂的事情，请选择优秀的 AFNetworking （Objective-C）或 alamofire （Swift）库。
• Parse 容许你将图像存储在云端，并能直接使用。它是 ParseUI 的组成部分，但它不容许外部 URL（猫图片源自 Flickr）的调用。
• 在开始另外一个异步链接以前，咱们首先要明确主队列中的全部操做。这是有点枯燥：它从队列中移除 pending-and-unfinished 下载。尝试删除该行并运行程序，你会看到全部图像混合成一堆。当它从新使用单元格时，出列机制不会重置任何挂起链接，所以图像能够加载成功。

让咱们再运行应用，看看是否有效。

##加码 : Instagram 的相似功能

进行到这一步了，真不容易！还有一些终极功能有待完善。接下来就让咱们来添加这些功能：相似「Instagram」的功能——你在图片上双击，一个「赞+1」被添加到该猫的图片上，并显示一个干净的小猫爪动画。

首先，为爪子图像到表视图单元格添加出口。添加下面一行代码到 CatsTableViewCell 类（在其余四个出口的下面）：

@IBOutlet weak var catPawIcon:UIImageView?

在 Interface Builder 中添加一个 UIImageView 到 CatsTableViewCell.xib。还记得怎么作的吗？

1. 在对象库中查找 UIImageView 类。
2. 将它从对象库中拖放到表视图单元格。

确保将其向右拖动到其余图像视图的中心。调整新图像，宽高均为 100 点，它的 X 和 Y 均为大约110点。而后，当图像视图已选中时，添加如下限制。

1. Editor → Pin → Width
2. Editor → Pin → Height
3. Editor → Pin → Top Space To Superview
4. Editor → Align → Horizontal Center In Container

正以下图所示，使图像视图水平居中，固定宽度和高度为100点，并保持它与顶部有固定的空间，有效地将其居中的猫图像的放在正中心。

如今，经过从文档的顶部选择猫的表格视图单元格，建立出口链接。再选择 Connections Inspector 选项卡，从 catpawicon 单元格图像视图中绘出一条蓝色的线。

接下来，下载 paw.zip。该文件包含三个图形文件，是一个图像的三种分辨率。在使用以前须要将它们导入。

首先，解压缩文件；而后，打开 Xcode 中 Images.xcassets 文件；接着右键单击左侧列表（一个写着 APPICON 的列表），而后单击新建图像集，或使用左下方的「加号」按钮。重命名刚才建立的图像集，打开其属性。

如今，将刚才解压的文件从 Finder 拖至打开的文件集。确保文件匹配：

• paw.png 是 1x.
• paw@2x.png 是 2x.
• paw@3x.png 是 3x.

看不到文件也不用担忧，由于它们都是白色。

而后，返回 CatsTableViewCell.xib 并选择小图像视图。找到属性检查器，而后从在图像下拉列表中选择合适的爪子图像。白色的爪子应该像下图这样显示在单元格视图。

最后，请记住链接与 catPawIcon 出口和小图像视图。 如今，让咱们回到编码。打开 Xcode 中的 CatsTableViewCell。将下面的代码添加到 awakeFromNib 方法中（在super.awakeFromNib() 以前）。

let gesture = UITapGestureRecognizer(target: self, action:Selector("onDoubleTap:"))
gesture.numberOfTapsRequired = 2
contentView.addGestureRecognizer(gesture)
catPawIcon?.hidden = true

这里会发生两种状况。

• 第一，咱们创建一个 UITapGestureRecognizer，这样咱们即可以跟任何视图互动。在这种状况下，咱们将其添加到 contentView 查看，这个视图包括单元格的两个标签和两个图像视图。它为 onDoubleTap: 初始化一个 target、self、一个动做和一个选择器。因此，当检测到连续双击时，方法 onDoubleTap：of self（当前类）被执行。此外，咱们设置连续数目为 2，使得它为双击响应。

• 第二，咱们隐藏 catPawIcon 出口。

其次，添加 onDoubleTap 方法到当前类（在 awakeFromNib():函数以后）。

func onDoubleTap(sender:AnyObject) {
	catPawIcon?.hidden = false
	catPawIcon?.alpha = 1.0

	UIView.animateWithDuration(1.0, delay: 1.0, options:nil, animations: {

		self.catPawIcon?.alpha = 0

		}, completion: {
			(value:Bool) in

			self.catPawIcon?.hidden = true
	})
}

这种方法被称为一个动做，始终须要一个参数：AnyObject。在该方法中，能够实现如下动画代码：

1. 首先，经过设置隐藏为 false，使 catPawIcon 可见。
2. 而后，将 alpha 即透明度设置为1.0，彻底可见。须要重置图像状态，也就是当动画完成时 alpha 通道为0。
3. 动画的设置须要编程。UIView 的类方法被使用，这须要五个参数：动画时间、动画前延迟、基本选项、动画属性的关闭，以及动画完成时关闭的指令。

这时你会看到：

1. 为了使图像可见，咱们能够设置它的 alpha 通道为可见。
2. 稍等一下动画延迟。
3. 动画 alpha 通道从1到0的时间不到一秒，这就是动画周期。
4. 动画完成，隐藏图像。

这个解决方案的最大好处在于它易于使用：代码将彻底管理动画。咱们只须要设置它的初始状态、结束状态、持续时间，以及动画框架插补状态和动画步骤。从技术上来说，咱们使用两个属性：一个连续的值 α，一个用来隐藏管理爪子图像可见性的布尔值。

最后，运行应用，看看新功能可否正常适用。你能够双击一个单元格，简要展现爪子图标，双击而后淡出消失。

能运行了吗？太棒了！

##用 Parse 整合投票

剩下要作的事就是给 Parse 猫对象增长投票数列，经过双击响应投票动做。

那么咱们怎么去实现呢？

首先，咱们要改变的对象叫作 PFObject 类型的对象，在 CatsTableViewController 的 tableView 的 cellForRowAtIndexPath 方法中。咱们不能从表视图单元访问它，由于它在双击动做的方法内。

咱们不能移动 onDoubleTap 方法，因此咱们须要在表视图对象和表视图单元之间创造引用。

咱们采起如下步骤来实现：

1.在 CatsTableViewCell 中，在类的顶部和网点下，编写下列代码建立一个新的属性：

var parseObject:PFObject?

2.而后，在 tableView 里的 cellForRowAtIndexPath，编写下面代码（就在单元格 == nill 语句结束的大括号后面），以下：

cell?.parseObject = object

如今，咱们已创建一个机制，将 cellForRowAtIndexPath 的对象复制到咱们的表视图单元，使得在 CatsTableViewCell 类的对象实例可用。 而后，调整 CatsTableViewCell的onDoubleTap 方法。在该方法的开始处添加下面代码：

if(parseObject != nil) {
	if var votes:Int? = parseObject!.objectForKey("votes") as? Int {
		votes!++

         parseObject!.setObject(votes!, forKey: "votes"); parseObject!.saveInBackground();          catVotesLabel?.text = "(votes!) votes"; } }

这段代码能够实现如下工做：

1. 检查 parseObject 是否为空；
2. 从 parseObject 获得票数，并将它放在可选的 Int 中；
3. 若是票数不为空，用 ++ 操做增长票数变量，与 votes = votes! + 1 有相同功能；
4. 用 setObject 函数将票数变量返回给 parseObject 集；
5. 调用 parseObject 的 saveInBackground() 方法！它在后台将保存当前对象，可能的时候将其写入 Parse 云端；
6. 更新文本以反馈新的票数，一切就是这么简单，用 Command-R 或 Play 按钮运行程序，验证新功能是否实现。

运行成功了吗？太赞了！

##小结：

经过本篇文章，咱们学习了如下内容：

• 用 Parse 实现检索，存储数据到云端；
• Cocoapods整合一个调用 Objective-C 框架的 Swfit 程序；
• 创建视图和有接口的自定义表视图单元；
• 从零开始，用 Swift 编写一个完整的 App；
• 使用自动布局和约束；
• 使用手势识别、可选类型、条件、闭包、属性、出口和动做。

你能够在这里下载整个爪子项目文件。使用 Xcode6.3（或以上）版本运行项目。请注意，你必须改变 AppDelegate.swift 中的应用程序键和客户端密钥。另外也要记住，若是你本身动手编写这个完整的 App，对本身是个很好的提高机会。（完结）

如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用？（1）

如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用？（2）

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

本文系 OneAPM 工程师编译整理。OneAPM 是应用性能管理领域的新兴领军企业，能帮助企业用户和开发者轻松实现：缓慢的程序代码和 SQL 语句的实时抓取。想阅读更多技术文章，请访问 OneAPM 官方博客。