Swift图片浏览之SDPhotoBrowser的使用

前端之家收集整理的这篇文章主要介绍了Swift图片浏览之SDPhotoBrowser的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

场景:我们在使用app的时候,特别是显示多张图片的时候,都会点击图片并进行浏览,比如QQ、微信,好友发表的动态,我们都会点击进去查看原图。现在很多app都支持图片浏览功能,这样更加方便用户体验,那么我们在项目开发过程中,怎么对图片点击进行预览,下面介绍一下在swift项目开发中使用SDPhotoBrowser进行图片浏览。

SDPhotoBrowser地址:https://github.com/gsdios/SDPhotoBrowser

下面直接代码进行说明

  1. //
  2. // ShopStoreTableHeaderView.swift
  3. // SmartMilk
  4. //
  5. // Created by lin jiang on 2017/7/11.
  6. // Copyright © 2017年 greengao. All rights reserved.
  7. //
  8.  
  9. import UIKit
  10.  
  11. //添加SDPhotoBrowserDelegate代理
  12. class ShopStoreTableHeaderView: UIView,UIScrollViewDelegate,SDPhotoBrowserDelegate {
  13.  
  14. var storeImages:NSMutableArray = NSMutableArray()
  15. var mainScrollView:UIScrollView?
  16. var mainPageControl:UIPageControl?
  17. var mainTimer:Timer?
  18. var isMiddleShow:Bool = false
  19. override init(frame: CGRect) {
  20. super.init(frame: frame)
  21. setScrollViewUI()
  22. setPageControlUI()
  23. }
  24. required init?(coder aDecoder: NSCoder) {
  25. fatalError("init(coder:) has not been implemented")
  26. }
  27. func setScrollViewUI(){
  28. self.mainScrollView = UIScrollView(frame: CGRect(x: 0,y: 0,width: self.width,height: self.height))
  29. // 添加到父视图
  30. self.addSubview(self.mainScrollView!)
  31. // 背景颜色
  32. // arc4random()
  33. self.mainScrollView?.backgroundColor = UIColor.white
  34. // 自适应父视图
  35. // self.mainScrollView.autoresizingMask = UIViewAutoresizing.FlexibleHeight
  36. // 其他属性
  37. self.mainScrollView?.isScrollEnabled = true // 上下滚动
  38. self.mainScrollView?.scrollsToTop = true // 点击状态栏时,可以滚动回顶端
  39. self.mainScrollView?.bounces = true // 在最顶端或最底端时,仍然可以滚动,且释放后有动画返回效果
  40. mainScrollView?.isPagingEnabled = true // 分页显示效果
  41. mainScrollView?.showsHorizontalScrollIndicator = false // 显示水平滚动条
  42. mainScrollView?.showsVerticalScrollIndicator = true // 显示垂直滚动条
  43. mainScrollView?.indicatorStyle = UIScrollViewIndicatorStyle.white // 滑动条的样式
  44. // 设置内容大小
  45. // self.mainScrollView?.contentSize = CGSize(width: originX,height: scrollViewHeight)
  46. // 代理
  47. self.mainScrollView?.delegate = self
  48. }
  49. func setPageControlUI(){
  50. 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))
  51. // 添加到父视图
  52. self.addSubview(self.mainPageControl!)
  53. // 背景颜色
  54. self.mainPageControl?.backgroundColor = UIColor.clear
  55. // 其他属性设置
  56. self.mainPageControl?.numberOfPages = 0 // 总页数
  57. self.mainPageControl?.currentPage = 0 // 当前页数,默认为0,即第一个,实际数量是0~n-1
  58. self.mainPageControl?.pageIndicatorTintColor = UIColor.lightGray // 非当前页颜色
  59. self.mainPageControl?.currentPageIndicatorTintColor = UIColor.red // 当前页颜色
  60.  
  61. }
  62. func setMainScrollViewPageControl(images:[StoreImageModel]) {
  63. self.storeImages.removeAllObjects()
  64. self.storeImages.addObjects(from: images)
  65. for view in (self.mainScrollView?.subviews)! {
  66. view.removeFromSuperview()
  67. }
  68. var originX:CGFloat = 0.0
  69. for model in images
  70. {
  71. let imageView = UIImageView(frame: CGRect(x:originX,y:0.0,width:SCREEN_WIDTH,height:self.height))
  72. let url = URL(string: model.storeSmallImg!)
  73. let image = UIImage(named: "default_icon")
  74. // weak var weakSelf = self
  75. imageView.sd_setImage(with: url,placeholderImage: image,options: .retryFailed,completed: { (image,error,cacheType,URL) in
  76. })
  77. //添加UI Image View的点击事情
  78. let tap = UITapGestureRecognizer(target: self,action: #selector(onClickedImageEvent(gest:)))
  79. imageView.isUserInteractionEnabled = true
  80. imageView.addGestureRecognizer(tap)
  81. //主要是显示区分显示大点的图和小点的图
  82. if isMiddleShow == true{
  83. let contentView = UIView(frame: CGRect(x:originX,width:self.width,height:self.height))
  84. let imagexx = (SCREEN_WIDTH - self.height)/2
  85. imageView.frame = CGRect(x:imagexx,width:self.height,height:self.height)
  86. contentView.addSubview(imageView)
  87. self.mainScrollView?.addSubview(contentView)
  88. originX = (contentView.frame.minX + contentView.frame.width)
  89. }
  90. else
  91. {
  92. self.mainScrollView?.addSubview(imageView)
  93. originX = (imageView.frame.minX + imageView.frame.width)
  94. }
  95. }
  96. self.mainScrollView?.contentSize = CGSize(width: originX,height: self.height)
  97. self.mainPageControl?.numberOfPages = images.count // 总页数
  98. self.mainPageControl?.currentPage = 0 // 当前页数,默认为0,即第一个,实际数量是0~n-1
  99. }
  100. func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
  101. MQLog(message:"6 scrollViewDidEndDecelerating")
  102. let width = scrollView.frame.width
  103. let offsetX = scrollView.contentOffset.x
  104. let index = offsetX / width
  105. MQLog(message:"当前页是:\(index)")
  106. self.mainPageControl?.currentPage = Int(index)
  107. }
  108. func addTimer()
  109. {
  110. self.mainTimer = Timer.scheduledTimer(timeInterval: 2.0,target: self,selector: #selector(autoShow),userInfo: nil,repeats: true)
  111. }
  112. func removerTimer()
  113. {
  114. if self.mainTimer != nil
  115. {
  116. self.mainTimer?.invalidate()
  117. self.mainTimer = nil
  118. }
  119. }
  120. func autoShow()
  121. {
  122. var page:Int = (self.mainPageControl?.currentPage)!
  123. let total = (self.mainPageControl?.numberOfPages)! - 1
  124. if total == page
  125. {
  126. page = 0
  127. }
  128. else
  129. {
  130. page += 1
  131. }
  132. // 设置偏移量
  133. let offsetX = CGFloat(page) * (self.mainScrollView?.frame)!.width
  134. self.mainScrollView?.setContentOffset(CGPoint(x:offsetX,y:0.0),animated: true)
  135. self.mainPageControl?.currentPage = page
  136. }
  137. func onClickedImageEvent(gest:UITapGestureRecognizer) {
  138. let browser = SDPhotoBrowser()
  139. //显示图片UIImageView的父控件
  140. browser.sourceImagesContainerView = self.mainScrollView
  141. //显示图片的总数量
  142. browser.imageCount = self.storeImages.count
  143. //
  144. if self.storeImages.count > (self.mainPageControl?.currentPage)! {
  145. browser.currentImageIndex = (self.mainPageControl?.currentPage)!
  146. }
  147. else
  148. {
  149. //要显示的当前图片下标位置
  150. browser.currentImageIndex = 0
  151. }
  152. browser.delegate = self
  153. browser.show()
  154. }
  155. /**************************************************************/
  156. //返回当前UIImageView显示图片
  157. func photoBrowser(_ browser: SDPhotoBrowser!,placeholderImageFor index: Int) -> UIImage! {
  158. if self.isMiddleShow{
  159. let contentView = self.mainScrollView?.subviews[index]
  160. let imageView:UIImageView = contentView?.subviews[0]as! UIImageView
  161. return imageView.image
  162. }
  163. else
  164. {
  165. let imageView:UIImageView = self.mainScrollView?.subviews[index]as! UIImageView
  166. return imageView.image
  167. }
  168. }
  169. //设置要显示图片资源的地址
  170. func photoBrowser(_ browser: SDPhotoBrowser!,highQualityImageURLFor index: Int) -> URL! {
  171. let model = self.storeImages[index] as! StoreImageModel
  172. let url = URL(string: model.storeBigImg!)
  173. return url
  174. }
  175.  
  176.  
  177. }

运行结果:以上图片资源的地址就不提供了,是公司的资源,百度随便找几张图片就可以了

猜你在找的Swift相关文章