查看: 2398|回复: 0

[IOS开发教程] iOS开发商品页中banner中点击查看图片

发表于 2018-4-13 08:00:05

轮翻播放与查看是分开的,轮翻是是用 开源的SDCycleScrollView

这里是给出的是查看的:

  1. //
  2. // FullScreenShowImageView.swift
  3. // joopic
  4. //
  5. // Created by jianxiong li on 16/9/27.
  6. // Copyright ? 2016年 joobot. All rights reserved.
  7. //
  8. import Foundation
  9. import UIKit
  10. //图片轮播组件代理协议
  11. protocol FullScreenShowImageViewDelegate{
  12. //获取数据源
  13. func galleryDataSource()->[String]
  14. //获取内部scrollerView的宽高尺寸
  15. func galleryScrollerViewSize()->CGSize
  16. func hiddenForCliked(index:Int)
  17. }
  18. //图片轮播组件控制器
  19. class FullScreenShowImageView: UIView,UIScrollViewDelegate{
  20. //代理对象
  21. var delegate : FullScreenShowImageViewDelegate!
  22. //屏幕宽度
  23. let kScreenWidth = BWidth
  24. //当前展示的图片索引
  25. var currentIndex : Int = 0
  26. //数据源
  27. var dataSource : [String]?
  28. //用于轮播的左中右三个image(不管几张图片都是这三个imageView交替使用)
  29. var leftImageView , middleImageView , rightImageView : UIImageView?
  30. //放置imageView的滚动视图
  31. var scrollerView : UIScrollView?
  32. //scrollView的宽和高
  33. var scrollerViewWidth : CGFloat?
  34. var scrollerViewHeight : CGFloat?
  35. //页控制器(小圆点)
  36. var pageControl : UIPageControl?
  37. //加载指示符(用来当iamgeView还没将图片显示出来时,显示的图片)
  38. var placeholderImage:UIImage!
  39. //自动滚动计时器
  40. var autoScrollTimer:NSTimer?
  41. init(frame: CGRect,delegate:FullScreenShowImageViewDelegate) {
  42. super.init(frame: frame)
  43. self.delegate = delegate
  44. praperaUI()
  45. }
  46. required init?(coder aDecoder: NSCoder) {
  47. fatalError("init(coder:) has not been implemented")
  48. }
  49. func praperaUI() {
  50. //获取并设置scrollerView尺寸
  51. let size : CGSize = self.delegate.galleryScrollerViewSize()
  52. self.scrollerViewWidth = size.width
  53. self.scrollerViewHeight = size.height
  54. //获取数据
  55. self.dataSource = self.delegate.galleryDataSource()
  56. //设置scrollerView
  57. self.configureScrollerView()
  58. //设置加载指示图片
  59. self.configurePlaceholder()
  60. //设置imageView
  61. self.configureImageView()
  62. //设置页控制器
  63. self.configurePageController()
  64. //设置自动滚动计时器
  65. //self.configureAutoScrollTimer()
  66. self.backgroundColor = UIColor.blackColor()
  67. self.addTapAction()
  68. }
  69. func addTapAction(){
  70. //添加组件的点击事件
  71. let tap = UITapGestureRecognizer(target: self,
  72. action: #selector(FullScreenShowImageView.handleTapAction(_:)))
  73. self.addGestureRecognizer(tap)
  74. }
  75. //点击事件响应
  76. func handleTapAction(tap:UITapGestureRecognizer)->Void{
  77. //获取图片索引值
  78. self.delegate.hiddenForCliked(self.currentIndex)
  79. self.dismissViewAnimate()
  80. }
  81. func presentViewAnimate() {
  82. let fr = self.middleImageView?.frame
  83. self.middleImageView?.frame = CGRect(x: fr!.origin.x, y: 22, width: fr!.width, height: fr!.height)
  84. UIView.animateWithDuration(10, animations: {
  85. self.middleImageView?.frame = fr!
  86. }) { (_) in
  87. }
  88. }
  89. func dismissViewAnimate() {
  90. let fr = self.middleImageView?.frame
  91. self.middleImageView?.frame = CGRect(x: fr!.origin.x, y: fr!.origin.y - StatusAndNavHeight, width: fr!.width, height: fr!.height)
  92. UIView.animateWithDuration(10, animations: {
  93. self.middleImageView?.frame = CGRect(x: fr!.origin.x , y: -42, width: fr!.width, height: fr!.height)
  94. }) { (_) in
  95. self.hidden = true
  96. self.middleImageView?.frame = fr!
  97. }
  98. }
  99. //设置scrollerView
  100. func configureScrollerView(){
  101. self.scrollerView = UIScrollView(frame: CGRect(x: 0,y: 0,
  102. width: self.scrollerViewWidth!, height: BHeight))
  103. self.scrollerView?.backgroundColor = UIColor.blackColor()
  104. self.scrollerView?.delegate = self
  105. self.scrollerView?.contentSize = CGSize(width: self.scrollerViewWidth! * 3,
  106. height: BHeight)
  107. //滚动视图内容区域向左偏移一个view的宽度
  108. self.scrollerView?.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
  109. self.scrollerView?.pagingEnabled = true
  110. self.scrollerView?.bounces = false
  111. self.addSubview(self.scrollerView!)
  112. }
  113. //设置加载指示图片
  114. func configurePlaceholder(){
  115. //这里我使用ImageHelper将文字转换成图片,作为加载指示符
  116. let font = UIFont.systemFontOfSize(17)// UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightMedium)
  117. let size = CGSize(width: self.scrollerViewWidth!, height: self.scrollerViewHeight!)
  118. placeholderImage = UIImage(named: "图片加载中...")
  119. }
  120. //设置imageView
  121. func configureImageView(){
  122. self.leftImageView = UIImageView(frame: CGRect(x: 0, y: (BHeight-scrollerViewHeight!)/2,
  123. width: self.scrollerViewWidth!, height: self.scrollerViewHeight!))
  124. self.middleImageView = UIImageView(frame: CGRect(x: self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,
  125. width: self.scrollerViewWidth!, height: self.scrollerViewHeight! ));
  126. self.rightImageView = UIImageView(frame: CGRect(x: 2*self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,
  127. width: self.scrollerViewWidth!, height: self.scrollerViewHeight!));
  128. self.scrollerView?.showsHorizontalScrollIndicator = false
  129. self.leftImageView?.contentMode = UIViewContentMode.ScaleAspectFit
  130. self.middleImageView?.contentMode = UIViewContentMode.ScaleAspectFit
  131. self.rightImageView?.contentMode = UIViewContentMode.ScaleAspectFit
  132. //设置初始时左中右三个imageView的图片(分别时数据源中最后一张,第一张,第二张图片)
  133. if(self.dataSource?.count != 0){
  134. resetImageViewSource()
  135. }
  136. self.scrollerView?.addSubview(self.leftImageView!)
  137. self.scrollerView?.addSubview(self.middleImageView!)
  138. self.scrollerView?.addSubview(self.rightImageView!)
  139. }
  140. //设置页控制器
  141. func configurePageController() {
  142. self.pageControl = UIPageControl(frame: CGRect(x: kScreenWidth/2-60,
  143. y: BHeight - 30, width: 120, height: 20))
  144. self.pageControl?.numberOfPages = (self.dataSource?.count)!
  145. self.pageControl?.userInteractionEnabled = false
  146. self.addSubview(self.pageControl!)
  147. }
  148. //设置自动滚动计时器
  149. func configureAutoScrollTimer() {
  150. //设置一个定时器,每三秒钟滚动一次
  151. autoScrollTimer = NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(SliderGalleryController.letItScroll), userInfo: nil, repeats: true)
  152. }
  153. //计时器时间一到,滚动一张图片
  154. func letItScroll(){
  155. let offset = CGPoint(x: 2*scrollerViewWidth!, y: 0)
  156. self.scrollerView?.setContentOffset(offset, animated: true)
  157. }
  158. //每当滚动后重新设置各个imageView的图片
  159. func resetImageViewSource() {
  160. //当前显示的是第一张图片
  161. if self.currentIndex == 0 {
  162. self.leftImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))
  163. self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))
  164. let rightImageIndex = (self.dataSource?.count)!>1 ? 1 : 0 //保护
  165. self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![rightImageIndex]))
  166. }
  167. //当前显示的是最后一张图片
  168. else if self.currentIndex == (self.dataSource?.count)! - 1 {
  169. self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))
  170. self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))
  171. self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))
  172. }
  173. //其他情况
  174. else{
  175. self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))
  176. self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex]))
  177. self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex+1]))
  178. }
  179. //设置页控制器当前页码
  180. self.pageControl?.currentPage = self.currentIndex
  181. }
  182. //scrollView滚动完毕后触发
  183. func scrollViewDidScroll(scrollView: UIScrollView) {
  184. //获取当前偏移量
  185. let offset = scrollView.contentOffset.x
  186. if(self.dataSource?.count != 0){
  187. //如果向左滑动(显示下一张)
  188. if(offset >= self.scrollerViewWidth!*2){
  189. //还原偏移量
  190. scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
  191. //视图索引+1
  192. self.currentIndex = self.currentIndex + 1
  193. if self.currentIndex == self.dataSource?.count {
  194. self.currentIndex = 0
  195. }
  196. }
  197. //如果向右滑动(显示上一张)
  198. if(offset <= 0){
  199. //还原偏移量
  200. scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
  201. //视图索引-1
  202. self.currentIndex = self.currentIndex - 1
  203. if self.currentIndex == -1 {
  204. self.currentIndex = (self.dataSource?.count)! - 1
  205. }
  206. }
  207. //重新设置各个imageView的图片
  208. resetImageViewSource()
  209. }
  210. }
  211. //手动拖拽滚动开始
  212. func scrollViewWillBeginDragging(scrollView: UIScrollView) {
  213. //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动)
  214. //autoScrollTimer?.invalidate()
  215. }
  216. //手动拖拽滚动结束
  217. func scrollViewDidEndDragging(scrollView: UIScrollView,
  218. willDecelerate decelerate: Bool) {
  219. //重新启动自动滚动计时器
  220. //configureAutoScrollTimer()
  221. }
  222. }
复制代码

如何使用:

  1. var sliderGallery : FullScreenShowImageView!
  2. var bannerCurrentIndex:Int = 0
  3. //图片轮播组件协议方法:获取内部scrollView尺寸
  4. func galleryScrollerViewSize() -> CGSize {
  5. return CGSize(width: BWidth, height: BHeight/2)
  6. }
  7. //图片轮播组件协议方法:获取数据集合
  8. func galleryDataSource() -> [String] {
  9. return self.bannerView.imageURLStringsGroup as! [String]
  10. }
  11. //点击事件响应
  12. func hiddenForCliked(index:Int){
  13. if(bannerCurrentIndex != index){
  14. self.bannerView.scrollToIndex(Int32(index))
  15. }
  16. self.navigationController?.setNavigationBarHidden(false, animated: false)
  17. }
  18. func showImageGallery(index:Int){
  19. //初始化图片轮播组件
  20. if(sliderGallery == nil){
  21. sliderGallery = FullScreenShowImageView(frame: CGRect(x: 0, y: 0, width: BWidth,
  22. height: BHeight),delegate:self)
  23. sliderGallery.currentIndex = index
  24. sliderGallery.resetImageViewSource()
  25. //将图片轮播组件添加到当前视图
  26. self.view.addSubview(sliderGallery)
  27. }else{
  28. sliderGallery.currentIndex = index
  29. sliderGallery.resetImageViewSource()
  30. sliderGallery.hidden = false
  31. }
  32. self.sliderGallery.presentViewAnimate()
  33. self.navigationController?.setNavigationBarHidden(true, animated: false)
  34. }
  35. //pragma -- SDCycleScrollViewDelegate
  36. func cycleScrollView(cycleScrollView: SDCycleScrollView!, didSelectItemAtIndex index: Int) {
  37. print("--------index:\(index)")
  38. bannerCurrentIndex = index
  39. self.showImageGallery(index)
  40. }
复制代码

以上就是本次我们整理的代码全部内容,如果大家学习时候还有任何不明白的地方,可以在下方的留言区讨论,感谢你对程序员之家的支持。



回复

使用道具 举报