场景：我们在使用app的时候，特别是显示多张图片的时候，都会点击图片并进行浏览，比如QQ、微信，好友发表的动态，我们都会点击进去查看原图。现在很多app都支持图片浏览功能，这样更加方便用户体验，那么我们在项目开发过程中，怎么对图片点击进行预览，下面介绍一下在swift项目开发中使用SDPhotoBrowser进行图片浏览。
SDPhotoBrowser地址：https://github.com/gsdios/SDPhotoBrowser
下面直接代码进行说明
// // ShopStoreTableHeaderView.swift // SmartMilk // // Created by lin jiang on 2017/7/11. // Copyright © 2017年 greengao. All rights reserved. // import UIKit //添加SDPhotoBrowserDelegate代理 class ShopStoreTableHeaderView: UIView,UIScrollViewDelegate,SDPhotoBrowserDelegate { var storeImages:NSMutableArray = NSMutableArray() var mainScrollView:UIScrollView? var mainPageControl:UIPageControl? var mainTimer:Timer? var isMiddleShow:Bool = false override init(frame: CGRect) { super.init(frame: frame) setScrollViewUI() setPageControlUI() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func setScrollViewUI(){ self.mainScrollView = UIScrollView(frame: CGRect(x: 0,y: 0,width: self.width,height: self.height)) // 添加到父视图 self.addSubview(self.mainScrollView!) // 背景颜色 // arc4random() self.mainScrollView?.backgroundColor = UIColor.white // 自适应父视图 // self.mainScrollView.autoresizingMask = UIViewAutoresizing.FlexibleHeight // 其他属性 self.mainScrollView?.isScrollEnabled = true // 上下滚动 self.mainScrollView?.scrollsToTop = true // 点击状态栏时，可以滚动回顶端 self.mainScrollView?.bounces = true // 在最顶端或最底端时，仍然可以滚动，且释放后有动画返回效果 mainScrollView?.isPagingEnabled = true // 分页显示效果 mainScrollView?.showsHorizontalScrollIndicator = false // 显示水平滚动条 mainScrollView?.showsVerticalScrollIndicator = true // 显示垂直滚动条 mainScrollView?.indicatorStyle = UIScrollViewIndicatorStyle.white // 滑动条的样式 // 设置内容大小 // self.mainScrollView?.contentSize = CGSize(width: originX,height: scrollViewHeight) // 代理 self.mainScrollView?.delegate = self } func setPageControlUI(){ self.mainPageControl = UIPageControl(frame: CGRect(x: (self.width - 150.0) / 2,y: ((self.mainScrollView?.bounds)!.height - 20.0 - 10.0),width: 150.0,height: 20.0)) // 添加到父视图 self.addSubview(self.mainPageControl!) // 背景颜色 self.mainPageControl?.backgroundColor = UIColor.clear // 其他属性设置 self.mainPageControl?.numberOfPages = 0 // 总页数 self.mainPageControl?.currentPage = 0 // 当前页数，默认为0，即第一个，实际数量是0~n-1 self.mainPageControl?.pageIndicatorTintColor = UIColor.lightGray // 非当前页颜色 self.mainPageControl?.currentPageIndicatorTintColor = UIColor.red // 当前页颜色 } func setMainScrollViewPageControl(images:[StoreImageModel]) { self.storeImages.removeAllObjects() self.storeImages.addObjects(from: images) for view in (self.mainScrollView?.subviews)! { view.removeFromSuperview() } var originX:CGFloat = 0.0 for model in images { let imageView = UIImageView(frame: CGRect(x:originX,y:0.0,width:SCREEN_WIDTH,height:self.height)) let url = URL(string: model.storeSmallImg!) let image = UIImage(named: "default_icon") // weak var weakSelf = self imageView.sd_setImage(with: url,placeholderImage: image,options: .retryFailed,completed: { (image,error,cacheType,URL) in }) //添加UI Image View的点击事情 let tap = UITapGestureRecognizer(target: self,action: #selector(onClickedImageEvent(gest:))) imageView.isUserInteractionEnabled = true imageView.addGestureRecognizer(tap) //主要是显示区分显示大点的图和小点的图 if isMiddleShow == true{ let contentView = UIView(frame: CGRect(x:originX,width:self.width,height:self.height)) let imagexx = (SCREEN_WIDTH - self.height)/2 imageView.frame = CGRect(x:imagexx,width:self.height,height:self.height) contentView.addSubview(imageView) self.mainScrollView?.addSubview(contentView) originX = (contentView.frame.minX + contentView.frame.width) } else { self.mainScrollView?.addSubview(imageView) originX = (imageView.frame.minX + imageView.frame.width) } } self.mainScrollView?.contentSize = CGSize(width: originX,height: self.height) self.mainPageControl?.numberOfPages = images.count // 总页数 self.mainPageControl?.currentPage = 0 // 当前页数，默认为0，即第一个，实际数量是0~n-1 } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { MQLog(message:"6 scrollViewDidEndDecelerating") let width = scrollView.frame.width let offsetX = scrollView.contentOffset.x let index = offsetX / width MQLog(message:"当前页是：\(index)") self.mainPageControl?.currentPage = Int(index) } func addTimer() { self.mainTimer = Timer.scheduledTimer(timeInterval: 2.0,target: self,selector: #selector(autoShow),userInfo: nil,repeats: true) } func removerTimer() { if self.mainTimer != nil { self.mainTimer?.invalidate() self.mainTimer = nil } } func autoShow() { var page:Int = (self.mainPageControl?.currentPage)! let total = (self.mainPageControl?.numberOfPages)! - 1 if total == page { page = 0 } else { page += 1 } // 设置偏移量 let offsetX = CGFloat(page) * (self.mainScrollView?.frame)!.width self.mainScrollView?.setContentOffset(CGPoint(x:offsetX,y:0.0),animated: true) self.mainPageControl?.currentPage = page } func onClickedImageEvent(gest:UITapGestureRecognizer) { let browser = SDPhotoBrowser() //显示图片UIImageView的父控件 browser.sourceImagesContainerView = self.mainScrollView //显示图片的总数量 browser.imageCount = self.storeImages.count // if self.storeImages.count > (self.mainPageControl?.currentPage)! { browser.currentImageIndex = (self.mainPageControl?.currentPage)! } else { //要显示的当前图片下标位置 browser.currentImageIndex = 0 } browser.delegate = self browser.show() } /**************************************************************/ //返回当前UIImageView显示的图片 func photoBrowser(_ browser: SDPhotoBrowser!,placeholderImageFor index: Int) -> UIImage! { if self.isMiddleShow{ let contentView = self.mainScrollView?.subviews[index] let imageView:UIImageView = contentView?.subviews[0]as! UIImageView return imageView.image } else { let imageView:UIImageView = self.mainScrollView?.subviews[index]as! UIImageView return imageView.image } } //设置要显示图片资源的地址 func photoBrowser(_ browser: SDPhotoBrowser!,highQualityImageURLFor index: Int) -> URL! { let model = self.storeImages[index] as! StoreImageModel let url = URL(string: model.storeBigImg!) return url } }
运行结果：以上图片资源的地址就不提供了，是公司的资源，百度随便找几张图片就可以了
