swift实现图片浏览器
- 1.配置环境
- 2.搭建首页home界面
- 3.自定义流水布局
注意重写prepareLayout()方法,必须调用父类的super.prepareLayout() - 4.加载AFN
- 5.分装AFN网络请求类
-1. 提供接口,将请求到的数据或者错误信息通过闭包回调给外界2.,提供一个单列对象,
class NetWorkTool: AFHTTPSessionManager {
//提供一个单列对象
static let shareInstance : NetWorkTool = {
let shareInstance = NetWorkTool()
shareInstance.responseSerializer.acceptableContentTypes?.insert("text/html")
return shareInstance
}()
//提供结构,将请求到的数据通过闭包传递
func loadData(offset: Int,finishCallBack: (data:[[String: NSObject]]?, error: NSError? ) ->()){
let url = "http://mobapi.meilishuo.com/2.0/twitter/popular.json?offset=(offset)&limit=30&access_token=b92e0c6fd3ca919d3e7547d446d9a8c2"
GET(url, parameters: nil, progress: nil, success: { (, result) -> Void in
guard let dic = result as? [String: NSObject] else{
return
}
guard let dicArray = dic["data"] as? [[String: NSObject]] else{
return
}
finishCallBack(data: dicArray, error: nil)
}) { (, error) -> Void in
finishCallBack(data: nil, error: error)
}
}
}
```
- 5.根据接收到的数据,来设置模型
-6.自定义collectionViewCell - 7.加载跟多的数据,
-方式一: 通过第三方的上下拉刷新框架-
方式二:当最后一个cell出现的时候,说明已经滑到了底部,通过索引来判断是否是最后一个cell.当最后一个cell出现,就发送请求获取数据
abc.gif
-
- 8.点击cell ,弹出图片浏览器
- 搭建图片浏览器界面,底部两个按钮,和底层是collectionview
- 自定义流水布局
- 自定义Cell,
注意通过案列发现,当点击Cell展出图片浏览器,滑动图片浏览器,当点击退出图片浏览器的时候,发现会产生动画回到当前的图片对应的小图片出,所以这里弹出的图片浏览器,不能够传递指定的图片,而是需要将模型数组和索引传递给图片浏览器-
1.设置cell之间的间距问题,如果是通过流水布局来设置最小间距,那么当collection滑动,由于collection的分页效果,collection的尺寸与cell的尺寸不匹配,会出现位置位置错乱,达不到分页的效果,这里可以设置view的宽度在原有的基础上+ 10, 由于collectionView的尺寸基于view,流水布局设置的尺寸也是基于collection,所以这3个view的尺寸是一样的,而cell的图片的尺寸是根据屏幕尺寸来计算的,而collectionView的分页效果是和collection有关,这里讲view的宽度+ 10.这样就实现了间隔
Snip20160523_2.png - 2.当图片浏览器加载完毕,那么我可以根据索引,让图片浏览器滚动到对应的位置处
-
- 9.设置转场动画,(在主页model出图片浏览器的过程中)
- 给model出的控制器设置转场动画样式
modalTransitionStyle
- 给model出的控制器设置转场动画样式
- 10.自定义转场动画
-1.设置转场动画代理为当前的控制器transitioningDelegate
-2.通过代理方法,告诉系统弹出的view的动画交给谁去管理/告诉系统消失控制器的view的转场动画交给谁去管理
-3.实现转场代理方法func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? { //告诉系统,让谁来管理present的转场动画 isPresent = true return self } func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { isPresent = false return self }
-4.在设置动画方法中
- 1.通过转场上下文,来获取presentd即将弹出的view
- 2.将弹出的view添加到containerView上面
-注意:为什么需要添加到containerview上面,
- 1.通过model的方式,来展示控制器的view,原理:是现将当前显示的view移除,再讲需要显示的控制器的view添加到containerView上面.
- 2.因为我们需要自己来实现model的转场动画,所以系统不会主动的将presentedView弹出的view来添加到containverView上面,需要我们手动来添加
-3. 分析,弹入弹出动画,就是将一张图片,移动小图的位置到放大到图片浏览器中 大图的位置- 弹出动画需要满足3各条件
- 1.需要获取小图的图片
- 2.需要知道小图的坐标(由于小图在collectionview)中,所以这里需要坐标的转换
- 3.需要知道大图的位置
- 当点击cell -> 先创建一个和点击Cell上图片一样大小的图片 -> 在开始动画之前,将小图片containerView上面,位置需要转换 -> 通过UIView的动画,动画的过程就是讲图片从点击cell出的位置放大到图片浏览器中图片的位置
- 但是我们封装的工具类,无法获取到小图片,小图的位置,换算尺寸都大图的位置,因为是点击cell之后,需要来展示动画,我们可以通过cell的点击方法,将对应点击的索引传递给封装的动画类
- 面向协议开发,封装的工具类无法自己获取必须的条件,可以通过代理来获取,在homeVc 我们可以获取我们想要的条件,
- 如何设置消失动画的代理?这里需要设置图片浏览器作为消失动画的代理
-12.自定义消失动画 - 消失动画需要满足3各条件
- 1.获取当前显示的大图
- 2.需要知道大图的位置
- 3.需要知道结束小图的位置
- 如果当前是消失动画,那么可以根据当前在图片浏览控制器中点击的cell的索引获取到1.当前显示的大图,就是间接的获取到了大图的位置2.通过索引我们可以去home控制器中获取到小图.
- 弹出动画需要满足3各条件
extension PhotoBrowserAnimation:UIViewControllerAnimatedTransitioning{
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
//设置转场动画的时间
return 1.0
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
if isPresent {
guard let indexpath = indexpath ,presentDelegate = presentDelegate else{
return
}
//设置转场动画
//1.获取弹出的view
let presentView = transitionContext.viewForKey(UITransitionContextToViewKey)
//2.model的原理:将当前显示的view移除,将需要展示的View添加到containerView上面,由于我们是自定义的转场动画,需要自己来讲view添加到containerView上面
//获取动画的图片
let imageview = presentDelegate.presentImage(indexpath)
//设置图片的尺寸和位置
imageview.frame = presentDelegate.presentStartRect(indexpath)
//展示图片
transitionContext.containerView()?.addSubview(imageview)
transitionContext.containerView()?.backgroundColor = UIColor.blackColor()
//3.设置动画
UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in
imageview.frame = presentDelegate.presentEndRect(indexpath)
}) { (_) -> Void in
//需要告诉系统转动动画结束
transitionContext.containerView()?.backgroundColor = UIColor.clearColor()
transitionContext.containerView()?.addSubview(presentView!)
transitionContext.completeTransition(true)
imageview.removeFromSuperview()
}
}else{
guard let indexpath = indexpath , dismissDelegate = dismissDelegate else{
return
}
//获取消失的view
let dismissView = transitionContext.viewForKey(UITransitionContextFromViewKey)
//获取结束动画的图片
let imageView = dismissDelegate.dismissImage(indexpath)
//将图片添加到contrainerView
transitionContext.containerView()?.addSubview(imageView)
let srartIndepath = dismissDelegate.dismissEndRect()
//获取起始小图的位置
let endRect = presentDelegate!.presentStartRect(srartIndepath)
dismissView?.alpha = endRect == CGRectZero ? 1.0 : 0.0
UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in
if endRect == CGRectZero{
dismissView?.alpha = 0.0
imageView.alpha = 0.0
}else{
imageView.frame = endRect
}
}, completion: { (_) -> Void in
dismissView?.removeFromSuperview()
transitionContext.completeTransition(true)
})
}
}
}
