首页 > 系统 > iOS > 正文

iOS开发商品页中banner中点击查看图片

2019-10-21 18:41:46
字体:
来源:转载
供稿:网友

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

这里是给出的是查看的:

//// FullScreenShowImageView.swift// joopic//// Created by jianxiong li on 16/9/27.// Copyright © 2016年 joobot. All rights reserved.//import Foundationimport UIKit//图片轮播组件代理协议protocol FullScreenShowImageViewDelegate{ //获取数据源 func galleryDataSource()->[String] //获取内部scrollerView的宽高尺寸 func galleryScrollerViewSize()->CGSize  func hiddenForCliked(index:Int)}//图片轮播组件控制器class FullScreenShowImageView: UIView,UIScrollViewDelegate{ //代理对象 var delegate : FullScreenShowImageViewDelegate!  //屏幕宽度 let kScreenWidth = BWidth  //当前展示的图片索引 var currentIndex : Int = 0  //数据源 var dataSource : [String]?  //用于轮播的左中右三个image(不管几张图片都是这三个imageView交替使用) var leftImageView , middleImageView , rightImageView : UIImageView?  //放置imageView的滚动视图 var scrollerView : UIScrollView?  //scrollView的宽和高 var scrollerViewWidth : CGFloat? var scrollerViewHeight : CGFloat?  //页控制器(小圆点) var pageControl : UIPageControl?  //加载指示符(用来当iamgeView还没将图片显示出来时,显示的图片) var placeholderImage:UIImage!  //自动滚动计时器 var autoScrollTimer:NSTimer?  init(frame: CGRect,delegate:FullScreenShowImageViewDelegate) {  super.init(frame: frame)  self.delegate = delegate  praperaUI() } required init?(coder aDecoder: NSCoder) {  fatalError("init(coder:) has not been implemented") } func praperaUI() {    //获取并设置scrollerView尺寸  let size : CGSize = self.delegate.galleryScrollerViewSize()  self.scrollerViewWidth = size.width  self.scrollerViewHeight = size.height    //获取数据  self.dataSource = self.delegate.galleryDataSource()  //设置scrollerView  self.configureScrollerView()    //设置加载指示图片  self.configurePlaceholder()    //设置imageView  self.configureImageView()    //设置页控制器  self.configurePageController()    //设置自动滚动计时器  //self.configureAutoScrollTimer()    self.backgroundColor = UIColor.blackColor()    self.addTapAction() }   func addTapAction(){  //添加组件的点击事件  let tap = UITapGestureRecognizer(target: self,           action: #selector(FullScreenShowImageView.handleTapAction(_:)))  self.addGestureRecognizer(tap) }  //点击事件响应 func handleTapAction(tap:UITapGestureRecognizer)->Void{  //获取图片索引值  self.delegate.hiddenForCliked(self.currentIndex)  self.dismissViewAnimate() }  func presentViewAnimate() {    let fr = self.middleImageView?.frame  self.middleImageView?.frame = CGRect(x: fr!.origin.x, y: 22, width: fr!.width, height: fr!.height)  UIView.animateWithDuration(10, animations: {      self.middleImageView?.frame = fr!     }) { (_) in     }   }  func dismissViewAnimate() {    let fr = self.middleImageView?.frame  self.middleImageView?.frame = CGRect(x: fr!.origin.x, y: fr!.origin.y - StatusAndNavHeight, width: fr!.width, height: fr!.height)  UIView.animateWithDuration(10, animations: {       self.middleImageView?.frame = CGRect(x: fr!.origin.x , y: -42, width: fr!.width, height: fr!.height)     }) { (_) in      self.hidden = true   self.middleImageView?.frame = fr!  }   }  //设置scrollerView func configureScrollerView(){  self.scrollerView = UIScrollView(frame: CGRect(x: 0,y: 0,   width: self.scrollerViewWidth!, height: BHeight))    self.scrollerView?.backgroundColor = UIColor.blackColor()  self.scrollerView?.delegate = self  self.scrollerView?.contentSize = CGSize(width: self.scrollerViewWidth! * 3,            height: BHeight)  //滚动视图内容区域向左偏移一个view的宽度  self.scrollerView?.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)  self.scrollerView?.pagingEnabled = true  self.scrollerView?.bounces = false  self.addSubview(self.scrollerView!)   }  //设置加载指示图片 func configurePlaceholder(){  //这里我使用ImageHelper将文字转换成图片,作为加载指示符  let font = UIFont.systemFontOfSize(17)// UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightMedium)  let size = CGSize(width: self.scrollerViewWidth!, height: self.scrollerViewHeight!)  placeholderImage = UIImage(named: "图片加载中...") }  //设置imageView func configureImageView(){    self.leftImageView = UIImageView(frame: CGRect(x: 0, y: (BHeight-scrollerViewHeight!)/2,   width: self.scrollerViewWidth!, height: self.scrollerViewHeight!))    self.middleImageView = UIImageView(frame: CGRect(x: self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,   width: self.scrollerViewWidth!, height: self.scrollerViewHeight! ));    self.rightImageView = UIImageView(frame: CGRect(x: 2*self.scrollerViewWidth!, y: (BHeight-scrollerViewHeight!)/2,   width: self.scrollerViewWidth!, height: self.scrollerViewHeight!));  self.scrollerView?.showsHorizontalScrollIndicator = false    self.leftImageView?.contentMode = UIViewContentMode.ScaleAspectFit  self.middleImageView?.contentMode = UIViewContentMode.ScaleAspectFit  self.rightImageView?.contentMode = UIViewContentMode.ScaleAspectFit    //设置初始时左中右三个imageView的图片(分别时数据源中最后一张,第一张,第二张图片)  if(self.dataSource?.count != 0){   resetImageViewSource()  }    self.scrollerView?.addSubview(self.leftImageView!)  self.scrollerView?.addSubview(self.middleImageView!)  self.scrollerView?.addSubview(self.rightImageView!) }  //设置页控制器 func configurePageController() {  self.pageControl = UIPageControl(frame: CGRect(x: kScreenWidth/2-60,               y: BHeight - 30, width: 120, height: 20))  self.pageControl?.numberOfPages = (self.dataSource?.count)!  self.pageControl?.userInteractionEnabled = false  self.addSubview(self.pageControl!) }  //设置自动滚动计时器 func configureAutoScrollTimer() {  //设置一个定时器,每三秒钟滚动一次  autoScrollTimer = NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(SliderGalleryController.letItScroll), userInfo: nil, repeats: true) }  //计时器时间一到,滚动一张图片 func letItScroll(){  let offset = CGPoint(x: 2*scrollerViewWidth!, y: 0)  self.scrollerView?.setContentOffset(offset, animated: true) }  //每当滚动后重新设置各个imageView的图片 func resetImageViewSource() {  //当前显示的是第一张图片  if self.currentIndex == 0 {   self.leftImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))   self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))   let rightImageIndex = (self.dataSource?.count)!>1 ? 1 : 0 //保护   self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![rightImageIndex]))        }   //当前显示的是最后一张图片  else if self.currentIndex == (self.dataSource?.count)! - 1 {      self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))   self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.last!))   self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource!.first!))     }   //其他情况  else{      self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![self.currentIndex-1]))   self.middleImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex]))   self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![self.currentIndex+1]))  }    //设置页控制器当前页码  self.pageControl?.currentPage = self.currentIndex }   //scrollView滚动完毕后触发 func scrollViewDidScroll(scrollView: UIScrollView) {  //获取当前偏移量  let offset = scrollView.contentOffset.x    if(self.dataSource?.count != 0){      //如果向左滑动(显示下一张)   if(offset >= self.scrollerViewWidth!*2){    //还原偏移量    scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)    //视图索引+1    self.currentIndex = self.currentIndex + 1        if self.currentIndex == self.dataSource?.count {     self.currentIndex = 0    }   }      //如果向右滑动(显示上一张)   if(offset <= 0){    //还原偏移量    scrollView.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)    //视图索引-1    self.currentIndex = self.currentIndex - 1        if self.currentIndex == -1 {     self.currentIndex = (self.dataSource?.count)! - 1    }   }      //重新设置各个imageView的图片   resetImageViewSource()     } }  //手动拖拽滚动开始 func scrollViewWillBeginDragging(scrollView: UIScrollView) {  //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动)  //autoScrollTimer?.invalidate() }  //手动拖拽滚动结束 func scrollViewDidEndDragging(scrollView: UIScrollView,         willDecelerate decelerate: Bool) {  //重新启动自动滚动计时器  //configureAutoScrollTimer()   }}

如何使用:

var sliderGallery : FullScreenShowImageView! var bannerCurrentIndex:Int = 0  //图片轮播组件协议方法:获取内部scrollView尺寸 func galleryScrollerViewSize() -> CGSize {  return CGSize(width: BWidth, height: BHeight/2) }  //图片轮播组件协议方法:获取数据集合 func galleryDataSource() -> [String] {  return self.bannerView.imageURLStringsGroup as! [String] }   //点击事件响应 func hiddenForCliked(index:Int){  if(bannerCurrentIndex != index){    self.bannerView.scrollToIndex(Int32(index))  }  self.navigationController?.setNavigationBarHidden(false, animated: false) }  func showImageGallery(index:Int){  //初始化图片轮播组件  if(sliderGallery == nil){   sliderGallery = FullScreenShowImageView(frame: CGRect(x: 0, y: 0, width: BWidth,    height: BHeight),delegate:self)      sliderGallery.currentIndex = index   sliderGallery.resetImageViewSource()      //将图片轮播组件添加到当前视图   self.view.addSubview(sliderGallery)     }else{   sliderGallery.currentIndex = index   sliderGallery.resetImageViewSource()   sliderGallery.hidden = false     }  self.sliderGallery.presentViewAnimate()  self.navigationController?.setNavigationBarHidden(true, animated: false) }  //pragma -- SDCycleScrollViewDelegate func cycleScrollView(cycleScrollView: SDCycleScrollView!, didSelectItemAtIndex index: Int) {  print("--------index:/(index)")  bannerCurrentIndex = index  self.showImageGallery(index)   }

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


注:相关教程知识阅读请移步到IOS开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表