swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)

项目需求:做一个图片浏览器,点击图片查看大图,大图模式下,左右滚动能查看不同的图片.
项目的主要核心技术:图片的弹出和消失动画
 
swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)
 
项目源代码: Photo-Browser
 
一.对代码进行重构
1.对代码进行抽取划分
     1.1 为什么要对代码进行抽取?
          swift中,代码全部写在一起,阅读性极差
     
2.如何对代码进行抽取?
     2.1在oc中,可以把功能模块抽取一个个方法
 
     2.2swift中,专门提供 extension ,可以对原有的类进行扩展
 
3.怎么使用extension 抽取代码?
    3.1 把一些方法写在extension(扩展)里面,这样能减少viewDidLoad里面的代码
 
     3.2 extension可以写多个,这样就可以把不同的功能模块 ,写在不同的扩展里面
 
swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)
二.项目基本设置
 
1.修改bundleID
2.部署版本
3.设置项目图片,启动图片
4.对文件夹目录进行划分
 
三.首页布局
 
1.让首页为UICollectionViewController
2.设置数据源
 
3.自定义布局
     3.1 创建一个源文件,继承自UICollectionViewFlowLayout
     3.2 重写 prepareLayout
     3.3 设置布局的相关属性
 
4.如何设置StoryBoard中的UICollectionViewController的布局
     4.1 在StoryBoard中选中collectionView 
     4.2 在属性里找到 layout 设置为自定义  custom
     4.3 在下面的class里面 把自定义布局的类名写进去即可
 
swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)
 
四.网络工具类的封装
 
1.集成CocoaPods, 并导入AFNetworking框架
     1.1 打开终端,进入项目路径下  cd  路径
     1.2 创建PodFile文件  pod init
     1.3 配置PodFile文件 ,写入要导入的框架
 swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入) 
     
     1.4 导入框架 pod install —no-repo-update / 或 pod intall
          1.41 pod install 会更新本地库(本地已有的框架也会更新) 速度相对较慢
          1.42 pod install —no-repo-update 不会更新本地库,速度相对来说快点
 
2.封装工具类
     2.1 将工具类设计成单例对象
          防止别人修改
          防止多线程访问,创建多个对象
 
     2.2 swift中单例的设置方式
          static let shareInstance : NetworkTools = NetworkTools()
 
     2.3 可以让工具类,直接继承自用到框架的一个类
          好处:自己就是这个类的子类,拥有这个类的所有方法和属性,用的时候直接自己就能调用
 
swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)
3.封装网络请求方法
 func requestData (type : Int , urlString : String , parameters : [ String : NSObject] , callBack : (result : AnyObject? , error : NSErroe?) -> ()   )
func reqeustData(type : RequestType, urlString : String, parameters : [String : NSObject], finishedCallback : (result : AnyObject?, error : NSError?) -> ()) { }
 
4.把方法里面的闭包抽取出来
     4.1 为什么要抽取?
          方法里面闭包很长,代码很乱,造成阅读性差
 
     4.2 怎么抽取?
          定义一个成员属性  为闭包类型   把方法里面的闭包,用属性名 替换
 
swift项目初体验--教你打造一款个性化图片浏览器(篇幅过大,慎入)
 
五.项目集成工具类
 
     把封装好的工具类,直接拖到项目文件中
 
六.请求网络数据
 
1.在控制器中调用工具类封装好的网络请求方法
 
2.解析数据
     要对获取到的数据进行类型转换,应为从网络加载的数据类型为AnyObject
      guard let resultDict = result as? [String : NSObject] else {
return
} guard let dataArray = resultDict["data"] as? [[String : NSObject]] else {
return
}
3.字典转模型
     3.1 创建模型
     3.2 通过kvc手动转模型 , 要重写 override func setValue(value: AnyObject?, forUndefinedKey key: String) {}
     3.3 注意: 在闭包中  self. 也不可以省略     
 
七,自定义cell,展示数据
 
1.创建cell继承自UICollectionViewCell 
2.在cell里面定义模型属性
3.监听属性改变(相当于oc的重写set方法)
     在属性监听器(willSet, didSet)   这里用didSet方法里面给模型里面的属性赋值
 
八.加载更多数据
 
1.什么时候加载更多的数据?
     当最后一个cell出现的时候
 
2.怎么监听最后一个cell是否出现在屏幕上
     通过cell(item)的下标值(从0开始)是否等于数组长度 - 1   
   // 最后一个cell已经出现
if indexPath.item == shops.count - {
indexPath.item 相当于 tableView 的 indexPath.row
loadHomeData(shops.count)
}
 
3.怎么加载更多数据
     和加载数据一样,只不过多传一个参数offset
 
九.弹出图片浏览器
 
1.创建图片浏览器的控制器对象UIViewController
2.弹出控制器
     2.1 监听cell的点击
     2.2 创建图片浏览器控制器对象
     2.3 设置图片浏览器控制器对象的弹出样式
     photoBrowserVc.modalTransitionStyle = .FlipHorizontal
     2.4 把控制器modal出来
 
十.布局图片浏览器
 
1.布局UICollectionView
     1.1 创建UICollectionView
     1.2 把UICollectionView添加到控制器的View上
     1.3 设置数据源
     1.4 自定义布局
 
2.布局两个按钮
     2.1 创建两个按钮
     2.2 设置按钮的frame 
 
     2.3 对UIButton进行extension(扩展)
          2.31 为什么要进行扩展
               创建出来的按钮,要设置图片,字体,和文字,一个个设置太麻烦,想让按钮创建出来就有这些属性
          2.32 怎么进行扩展?
               对UIButton进行extension(扩展) 扩充一个类型方法,在类方法里面封装好这些属性
   class func createBtn(title : String, bgColor : UIColor, fontSize : CGFloat) -> UIButton {
let btn = UIButton() btn.backgroundColor = bgColor
btn.setTitle(title, forState: .Normal)
btn.titleLabel?.font = UIFont.systemFontOfSize(fontSize) return btn
}
     
     2.4 这样创建还不是很方便,我们可以给UIbutton扩展构造函数,创建的时候直接设置这些属性
 
          2.41 注意:在extension中扩充构造函数,只能扩充便利构造函数     
     
          2.42 什么是便利构造函数?
               1.必须在init前面加上convenience
               2.必须在init方法中 调用self.init()
     convenience init(title : String, bgColor : UIColor, fontSize : CGFloat) {
self.init() setTitle(title, forState: .Normal)
backgroundColor = bgColor
titleLabel?.font = UIFont.systemFontOfSize(fontSize)
}
 
3.监听按钮的点击
     3.1 xcode7.2 和xcode7.3中监听方法的写法不太一样
          Xcode7.2 --> 1> Selector("方法的名称") 2> ""
          Xcode7.3 --> #selector(类.方法名称)     
 
     3.2 如果点击按钮调用的方法前面加上private 调用会报错
          3.21 为什么会报错
               找不到方法
          
          3.22 监听事件实质就是发送一条消息 
               
          3.23 发送消息的过程是:
               1.将消息包装成@SEL  2.通过@SEL去类中的方法列表中找对相应的方法(函数)
               
          3.34 在swift中,如果一个函数前面加上private,那么该函数就不会被添加到消息(映射)列表中
          
          3.35 如果在private前面加上@objc ,就会保留oc的特性, 该方法依然会添加到消息列表中
 
     3.3 解决问题的方法就是 在private前面加上@objc   或者不写private
     
 
十一.传递数据
 
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 ??
 
十四.设置大图之间的间距
 
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()[] 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
} // 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 为什么直接消失?
          不滚动的时候,设置的图片是小图,所以不清晰
          返回的时候获取不到cell,获取不到cell就直接返回空的ImageView   
          ImageView还没有设置图片就直接返回了
     
     4.3 怎么解决?
          在PhotoBrowserVc中可以拿到高清图片
          设置代理拿到Image,消失动画的时候,直接显示高清图片
 
     4.4 消失的时候,发现还是直接消失为什么?
          因为滚动到后面,mainVc的cell不在屏幕上,就获取不到cell, 所以消失时获取的startRect = CGRectZero  
          从0消失到0 所以没有动画
 
      4.5 点击mainVc最后一个cell,看看大图,往后滚,返回的时候,发现消失动画最终消失到左上角为什么?
          因为,后面的cell还没出现,就获取不到最终位置,系统默认在左上角
   
     4.6 怎么解决?
          方法一: 当超出的时候,给定一个终点位置,让它在指定的位置消失
                    效果可以,但是满足不了需求
     
     4.7 最终方案(参考微信的解决方案)
          当获取不到终点位置的时候,让图片消失的动画 设置为渐变消失动画
 
十九.版本适配bug的解决
 
1.当项目运行到6s Plus上的时候,collectionView只能显示两列(需求是三列)
     产生bug的原因是苹果对临界值得处理不太好
     具体来说就是,屏幕宽度三等分,得到的数值是无限循环小数,苹果会根据数据类型对小数向前进一位
     这时,屏幕的宽度就不足以放三个cell,就会把第三个cell挤到下一行显示,就变成了两列
 
2.bug解决
     让得到的cell的宽度减去一个临界值小数即可(0.000001)  这个数值随便写
 
 
 项目源代码: Photo-Browser
 
 
上一篇:python自动化开发-[第九天]-异常处理、进程


下一篇:Paper Reading: Perceptual Generative Adversarial Networks for Small Object Detection