swift实现图片浏览器

2016-05-23 本文已影响1054人亡灵诅咒

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
10.自定义转场动画
-1.设置转场动画代理为当前的控制器transitioningDelegate
-2.通过代理方法,告诉系统弹出的view的动画交给谁去管理/告诉系统消失控制器的view的转场动画交给谁去管理
```
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
}
```
-3.实现转场代理方法
-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控制器中获取到小图.

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)
            })
        }
    }
}

111.gif

swift实现图片浏览器

swift实现图片浏览器

猜你喜欢

热点阅读