纯代码实现Facebook News Feed(3)

最后一部分用到了这些知识

1.异步加载图片

2.NSURLCache

3.UITabBarController

4.Zooming Animation

#1 异步加载图片

1.更新Data Model

纯代码实现Facebook News Feed(3)_第1张图片
Feed.swift

2.添加对应的url

3.更新ViewDidLoad()方法。

纯代码实现Facebook News Feed(3)_第2张图片
FeedCell.swift

运行下,Error!http是被屏蔽掉的。

ERROR

解决办法:打开Info.plist。

纯代码实现Facebook News Feed(3)_第3张图片
Info.plist

运行下,现在是这样的。异步加载图片成功!

纯代码实现Facebook News Feed(3)_第4张图片
simulator

#2 缓存

这里使用NSURLCache进行网络缓存,以减少向服务器发送请求的次数,提升离线/低速网络中使用应用的体验。下载完成后,会将response保存在本地,下一次同一个request再发起时,不需要连接服务器,直接返回本地保存的response。

缓存


#3 Tab Bar Controller

1.在AppDelegate.swift里

AppDelegate.swift

2.添加Tab Bar Controller的bar item title和image

纯代码实现Facebook News Feed(3)_第5张图片
CustomTabBarController.swift

#4 缩放图片

1.先来做一些准备工作

useInteractionEnabled默认是false,需要将它设置成true

纯代码实现Facebook News Feed(3)_第6张图片
FeedCell.swift

在setupViews()方法里,添加GestureRecognizer

FeedCell.swift

添加animate()方法

FeedCell.swift

更新cell配置方法

纯代码实现Facebook News Feed(3)_第7张图片
FeedController.swift

声明常量和变量

FeedController.swift

2.实现放大图片

--设置这几个view的尺寸,背景颜色等。

feedImageView需要隐藏,所以透明度设置成0。当然你也可以用hidden啦。

navBarCoverView和tabBarCoverView需要添加到navigation bar和tab bar上方,所以需要添加到window层上方,而不是view上方。

纯代码实现Facebook News Feed(3)_第8张图片
FeedController.swift

添加动画方法。注意zoomImageView的高度和纵坐标位置计算。

纯代码实现Facebook News Feed(3)_第9张图片
FeedController.swift

3.还原缩小图片。这里的动画方法和上面不一样,需要在完成后将刚刚添加的四个subview弹出栈,并且显示原来的feedImageView。

纯代码实现Facebook News Feed(3)_第10张图片
FeedController.swift

运行一下

纯代码实现Facebook News Feed(3)_第11张图片
simulator

项目地址:github.com/Paganarchitect/facebook_newsFeed.git

你可能感兴趣的:(纯代码实现Facebook News Feed(3))