如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用?(3)
【编者按】本篇文章作者是 Reinder de Vries,既是一名企业家,也是优秀的程序员,发表多篇应用程序的博客。本篇文章中,作者主要介绍了如何基于 Parse 特点,打造一款类似 Instagram 的应用,完整而清晰的步骤,为开发者提供一次绝佳的学习体验。本文系 OneAPM 工程师编译整理,这是本系列的第 3 篇文章。
使用 Swift 和自定义表视图单元格现在让我们再次回归代码——已经有足够的接口。打开 CatsTableViewController.swift 并找到指定初始化 init(风格:类名:)。 在这个方法中,我们可以在 self.parseClassName = className;下添加以下两行代码: self.tableView.rowHeight = 350 self.tableView.allowsSelection = false 第一行设置合适的行高,第二行禁止单元格选择。 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。 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 你不禁疑惑,这与我们以前使用的旧代码相比有什么区别?主要体现在:
最后,我们返回单元格。 让我们再次运行应用程序。一切看上去太完美了!没有 Bug 和死机!但是...图像在哪儿? 从 Parse 异步下载图像图像不见了,这怎么可以!让我们加上它。在 TableView 的 cellForRowAtIndexPath 添加如下代码「在最后一个 if 语句(用于信用标签)之后,在返回语句之前」。 var cell:CatsTableViewCell? = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? CatsTableViewCell if(cell == nil) { cell = NSBundle.mainBundle().loadNibNamed("CatsTableViewCell",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 的图像属性中。 在这里无需钻研太深,因为上面代码的复杂性与我们的应用程序无关。但是,请注意以下几点:
让我们再运行应用,看看是否有效。 加码 : Instagram 的类似功能进行到这一步了,真不容易!还有一些终极功能有待完善。接下来就让我们来添加这些功能:类似「Instagram」的功能——你在图片上双击,一个「赞+1」被添加到该猫的图片上,并显示一个干净的小猫爪动画。 首先,为爪子图像到表视图单元格添加出口。添加下面一行代码到 CatsTableViewCell 类(在其他四个出口的下面): @IBOutlet weak var catPawIcon:UIImageView? 在 Interface Builder 中添加一个 UIImageView 到 CatsTableViewCell.xib。还记得怎么做的吗?
确保将其向右拖动到其他图像视图的中心。调整新图像,宽高均为 100 点,它的 X 和 Y 均为大约110点。然后,当图像视图已选中时,添加以下限制。
正如下图所示,使图像视图水平居中,固定宽度和高度为100点,并保持它与顶部有固定的空间,有效地将其居中的猫图像的放在正中心。
现在,通过从文档的顶部选择猫的表格视图单元格,创建出口连接。再选择 Connections Inspector 选项卡,从 catpawicon 单元格图像视图中绘出一条蓝色的线。 接下来,下载 paw.zip。该文件包含三个图形文件,是一个图像的三种分辨率。在使用之前需要将它们导入。 首先,解压缩文件;然后,打开 Xcode 中 Images.xcassets 文件;接着右键单击左侧列表(一个写着 APPICON 的列表),然后单击新建图像集,或使用左下方的「加号」按钮。重命名刚才创建的图像集,打开其属性。 现在,将刚才解压的文件从 Finder 拖至打开的文件集。确保文件匹配:
看不到文件也不用担心,因为它们都是白色。
然后,返回 CatsTableViewCell.xib 并选择小图像视图。找到属性检查器,然后从在图像下拉列表中选择合适的爪子图像。白色的爪子应该像下图这样显示在单元格视图。
最后,请记住连接与 catPawIcon 出口和小图像视图。 let gesture = UITapGestureRecognizer(target: self,action:Selector("onDoubleTap:")) gesture.numberOfTapsRequired = 2 contentView.addGestureRecognizer(gesture) catPawIcon?.hidden = true 这里会发生两种情况。
其次,添加 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。在该方法中,可以实现以下动画代码:
这时你会看到:
这个解决方案的最大好处在于它易于使用:代码将完全管理动画。我们只需要设置它的初始状态、结束状态、持续时间,以及动画框架插补状态和动画步骤。从技术上来讲,我们使用两个属性:一个连续的值 α,一个用来隐藏管理爪子图像可见性的布尔值。 最后,运行应用,看看新功能能否正常适用。你可以双击一个单元格,简要展示爪子图标,双击然后淡出消失。
能运行了吗?太棒了! 用 Parse 整合投票剩下要做的事就是给 Parse 猫对象增加投票数列,通过双击响应投票动作。 那么我们怎么去实现呢? 首先,我们要改变的对象叫做 PFObject 类型的对象,在 CatsTableViewController 的 tableView 的 cellForRowAtIndexPath 方法中。我们不能从表视图单元访问它,因为它在双击动作的方法内。 我们不能移动 onDoubleTap 方法,所以我们需要在表视图对象和表视图单元之间创造引用。 我们采取以下步骤来实现: 1.在 CatsTableViewCell 中,在类的顶部和网点下,编写下列代码创建一个新的属性: var parSEObject:PFObject? 2.然后,在 tableView 里的 cellForRowAtIndexPath,编写下面代码(就在单元格 == nill 语句结束的大括号后面),如下: cell?.parSEObject = object 现在,我们已建立一个机制,将 cellForRowAtIndexPath 的对象复制到我们的表视图单元,使得在 CatsTableViewCell 类的对象实例可用。 if(parSEObject != nil) { if var votes:Int? = parSEObject!.objectForKey("votes") as? Int { votes!++ parSEObject!.setObject(votes!,forKey: "votes"); parSEObject!.saveInBackground(); catVotesLabel?.text = "(votes!) votes"; } } 这段代码可以实现以下工作:
运行成功了吗?太赞了! 小结:通过本篇文章,我们学习了以下内容:
你可以在这里下载整个爪子项目文件。使用 Xcode6.3(或以上)版本运行项目。请注意,你必须改变 AppDelegate.swift 中的应用程序键和客户端密钥。另外也要记住,如果你自己动手编写这个完整的 App,对自己是个很好的提升机会。(完结)
本文由OneAPM工程师编译 ,想阅读更多技术文章,请访问OneAPM官方技术博客。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |