项目源代码: Photo-Browser
一.传递数据
1.传递什么数据?
要在PhotoBrowserVc中查看大图,首先要拿到图片数据
2.怎么传递数据?直接传递图片?
直接传递图片url也可以,不过要从模型数组中抽离出来,不太好
最好的做法是:直接把模型数组传递给PhotoBrowserVc
二.自定义PhotoBrowserCell,用于展示数据
1.PhotoBrowserVc是UICollectionViewController,要想展示图片,需要在cell上添加UIImageView
注意:如果一个构造函数前有required,那么重写了其他构造函数时,那么该构造函数也必须被重写
// MARK:- 重写构造函数
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
// required : 如果一个构造函数前有required,那么重写了其他构造函数时,那么该构造函数也必须被重写
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
2.要想展示图片,需要设置什么?
2.1 设置UIImageView的image
直接从 SDWebImage缓存中取出原来cell的图片(小图)
注意:取出的图片类型是可选类型,要先进行判断再使用
2.2 设置UIImageView的frame
2.21 根据取出的图片的尺寸,计算图片的frame(设置UIImageView的宽度等于屏幕宽度)
2.22 让图片的宽度等于UIImageView的宽度
2.23 UIImageView的高度,就等于 图片高度 * UIImageView的宽度 / 图片宽度 (让图片等宽高比拉伸)
3.加载高清图片
3.1 为什么要加载高清图片?
上面取出的图片是小图,不清晰. 查看大图的时候,要换成高清图片
3.2 怎么设置?
用SDWebImage加载大图,把小图设置为占位图片
占位图片:图片还没加载的时候,先用内存中的一张图片显示到屏幕上,加载好图片, 就显示加载的图片
4.设置完成后,查看大图,发现滚动到后面,发现图片被压缩了,为什么?
4.1 因为在MainVc(首页)展示小图的时候,给小图也设置了占位图片
4.2 在PhotoBrowserVc中查看大图,滚动到后面的时候,MainVc中的cell还没显示,小图就不会被加载,就把占位图片赋值给小图
// 2.获取小图片
var smallImage = SDWebImageManager.sharedManager().imageCache.imageFromDiskCacheForKey(shop.q_pic_url)
if smallImage == nil {
smallImage = UIImage(named: "empty_picture")
}
4.3 这是UIImageView的尺寸就是根据占位图片的尺寸计算出来的,跟实际图片的尺寸会有差别,实际显示的图片就可能被压缩
5.怎么解决图片压缩问题?
大图请求成功时,重新计算UIImageView的尺寸就可以了
三.把collectionView滚动到正确的位置
1.为什么要滚动collectionView?
PhotoBrowserVc的cell是从第0个cell开始显示的, 所以每次点击查看大图都是从第0张图片开始显示
当点击MainVc(首页)cell的时候,要显示对应的大图,不一定是第0张图片
2.怎么滚动?
2.1 在PhotoBrowserVc中定义indexPath属性, 在MainVc中拿到cell的indexPath,对 PhotoBrowserVc的indexPath赋值
2.2 滚动到对应的位置(用下面这个方法)
collectionView.scrollToItemAtIndexPath(indexPath!, atScrollPosition: .CenteredHorizontally, animated: false)
2.3 滚动代码应该写到哪里?
点击MainVc的cell,就弹出查看大图控制器(PhotoBrowserVc),就要滚动要对应的位置
所以,代码可以写到viewDidLoad里面
3. ??的使用
// ?? : 先判断前面的可选链是否有值, 如果有值,解包并且获取对应类型的值. 如果没有值直接取后面的值
return shops?.count ?? 0
四.设置大图之间的间距
1.怎么设置大图之间的间距?用 minimumLineSpacing?
不可以,虽然能让大图之间有间距,但是会把后面的cell往后移 ,后面的cell就不能完全显示在屏幕上
2.思考:可以collectionView的cell的宽度比屏幕宽度大一点,多出来的宽度就当做间距
不可行,collectionView(scrollView)的分页效果,会让用户看到多出来的那部分
scrollView分页效果的滚动距离 是由scrollView的宽度来决定的
3.最终解决方案
3.1 只用一句代码就可以搞定,把控制器的view的宽度增大一点就可以了
view.frame.size.with += 15
3.2 注意collectionView的宽度和 cell的宽度 要等于控制器的view的宽度才可以
4.全局函数的定义
4.1 什么是全局函数?
就是在工程目录下的任何地方都能使用的函数
4.2 怎么定义全局函数?
只要把函数定义到AppDelegate里面就可以了
五.保存图片
1.先要拿到对应的图片,根据indexPath拿?
点击查看大图后可能会被滚动,所以不能根据indexPath拿
2.怎么拿到正在显示的图片
2.1 先拿到正在显示的cell
2.2 cell里面保存的就有image
3.怎么拿到cell
可以通过苹果自带的api拿到正在显示的cell
// 1.1.拿到正在显示的Cell
// visibleCells 返回所有在屏幕中显示的Cell
let cell = collectionView.visibleCells()[0] as! PhotoBrowserViewCell
guard let image = cell.imageView.image else {
return
}
4.保存图片到相册
苹果自带api保存到相册
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
六.点击大图关闭控制器
1.需求:点击大图或关闭按钮,把控制器dismiss掉
2.点击按钮关闭
给按钮设置点击方法就可以了 addTarget
3.点击大图关闭怎么实现?
点击大图相当于点击了cell,在cell代理方法里面dismiss即可
七.自定义转场(淡入淡出)
1.怎么自定义转场动画?
遵守转场的代理协议UIViewControllerTransitioningDelegate,实现代理方法
2.实现了代理方法,发现程序还是报错,为什么?
代理方法都有一个返回值,返回值要遵守一个协议UIViewControllerContextTransitioning才能作为返回值
3.在UIViewControllerContextTransitioning代理方法里面设置动画(具体看代码)
4.设置消失动画
4.1 设置完显示动画后,消失的时候也自动会有一个动画效果,为什么?
因为,大图view消失的时候,也是主控制器的view显示的时候
看到的消失动画,实际上是主控制器的view的显示动画
4.2 怎么判断是显示,还是消失?
定义一个属性记录即可
在UIViewControllerTransitioningDelegate代理方法中记录
// MARK:- 遵守转场的代理协议,和实现对应的方法
extension HomeViewController : UIViewControllerTransitioningDelegate {
// 为弹出控制器做一个动画
func animationControllerForPresentedController(presented:
UIViewController, presentingController presenting:
UIViewController, sourceController source: UIViewController)
-> UIViewControllerAnimatedTransitioning? {
//记录当前为显示阶段
isPresented = true
return self
}
// 为消失控制器做一个动画
func animationControllerForDismissedController(dismissed:
UIViewController) -> UIViewControllerAnimatedTransitioning? {
//记录当前为消失阶段
isPresented = false
return self
}
}
extension HomeViewController : UIViewControllerAnimatedTransitioning {
// 返回动画执行的时间
func transitionDuration(transitionContext:
UIViewControllerContextTransitioning?)
-> NSTimeInterval {
return 3
}
// transitionContext : 转场上下文
// 作用 : 可以通过上下文获取到弹出的View和消失的View
// UITransitionContextFromViewKey : 获取消失的View
// UITransitionContextToViewKey : 获取弹出的View
func animateTransition(transitionContext:
UIViewControllerContextTransitioning) {
if isPresented {
// 获取弹出的View
let presentedView = transitionContext.viewForKey(UITransitionContextToViewKey)!
//需要把view添加到父控件上,才能有动画效果
//父控件就是widow的containerView, 通过transitionContext.containerView()拿到
transitionContext.containerView()?.addSubview(presentedView)
// 修改View alpha值
presentedView.alpha = 0.0
// 执行动画
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
presentedView.alpha = 1.0
}) { (isFinished : Bool) in
//告诉控制器,转场动画完成
transitionContext.completeTransition(isFinished)
}
} else {
// 1.获取消失的View
let dismissedView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
// 2.执行动画
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
dismissedView.alpha = 0.0
}, completion: { (isFinished : Bool) in
//移除view,显示主控制器的view
dismissedView.removeFromSuperview()
transitionContext.completeTransition(isFinished)
})
}
}
}
5.性能优化,代码抽取
5.1 把转场动画的代理设置为主控制器,代理要全部写在主控制器中,代码臃肿,阅读性差
5.2 怎么优化?
把代理设置为其它对象,让其它对象实现代理方法即可
5.3 具体实现步骤
5.31 创建一个对象(任何对象)
5.32 设置这个对象为转场动画的代理
5.33 在对象中实现代理方法即可
5.34 注意:代理属性为弱引用,要让一个强引用指向它
八.最终动画效果
1.想要做动画,必须要拿到三个元素
1.1 图片的起始位置(相对于控制器view的坐标系)
1.2 图片的终点位置(相对于控制器view的坐标系)
1.3 转场图片的父控件UIImageView
2.弹出动画
2.1 获取动画的三个元素
图片的起始位置,终点位置和UIImageView 只有主控制器(mainVc)最清楚,可以定义代理
2.2 mainVc成为动画代理对象的代理,提供三个元素
3.消失动画
3.1 消失的时候,图片的终点位置有可能发生变化,需要重新计算
3.2 怎么计算消失的图片的终点位置?
只要拿到对应cell的indexPath就可以计算位置
3.3 怎么拿到indexPath?
cell的indexPath只有PhotoBrowserVc最清楚,可以设置代理,让PhotoBrowserVc提供indexPath
indexPath就是最后显示在屏幕上cell的indexPath
// 1.获取在屏幕中显示的cell
let cell = collectionView.visibleCells()[0]
// 2.获取cell对应的indexPath
let indexPath = collectionView.indexPathForCell(cell)!
3.4 根据indexPath计算终点位置,完成动画
4.性能优化
4.1 当查看大图滚动的时候,indexPath会大于屏幕上显示的indexPath最大值,这个时候,就获取不到终点位置,就会没有消失动画
4.2 怎么解决?
方法一: 当超出的时候,给定一个终点位置,让它在指定的位置消失
效果可以,但是满足不了需求
4.3 最终方案(参考微信的解决方案)
当获取不到终点位置的时候,让图片消失的动画 设置为渐变消失动画
九.版本适配bug的解决
1.当项目运行到6s Plus上的时候,collectionView只能显示两列(需求是三列)
产生bug的原因是苹果对临界值得处理不太好
具体来说就是,屏幕宽度三等分,得到的数值是无限循环小数,苹果会根据数据类型对小数向前进一位
这时,屏幕的宽度就不足以放三个cell,就会把第三个cell挤到下一行显示,就变成了两列
2.bug解决
让得到的cell的宽度减去一个临界值小数即可(0.000001) 这个数值随便写
想了解更多请查看:轻松学习swift--swift项目初体验(一)
项目源代码: Photo-Browser
喜欢就给个星星吧