场景:我们在使用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
- }
- }
运行结果:以上图片资源的地址就不提供了,是公司的资源,百度随便找几张图片就可以了