iOS开发商品页中banner中点击查看图片
轮翻播放与查看是分开的,轮翻是是用开源的SDCycleScrollView
这里是给出的是查看的:
// //FullScreenShowImageView.swift //joopic // //Createdbyjianxionglion16/9/27. //Copyright©2016年joobot.Allrightsreserved. // importFoundation importUIKit //图片轮播组件代理协议 protocolFullScreenShowImageViewDelegate{ //获取数据源 funcgalleryDataSource()->[String] //获取内部scrollerView的宽高尺寸 funcgalleryScrollerViewSize()->CGSize funchiddenForCliked(index:Int) } //图片轮播组件控制器 classFullScreenShowImageView:UIView,UIScrollViewDelegate{ //代理对象 vardelegate:FullScreenShowImageViewDelegate! //屏幕宽度 letkScreenWidth=BWidth //当前展示的图片索引 varcurrentIndex:Int=0 //数据源 vardataSource:[String]? //用于轮播的左中右三个image(不管几张图片都是这三个imageView交替使用) varleftImageView,middleImageView,rightImageView:UIImageView? //放置imageView的滚动视图 varscrollerView:UIScrollView? //scrollView的宽和高 varscrollerViewWidth:CGFloat? varscrollerViewHeight:CGFloat? //页控制器(小圆点) varpageControl:UIPageControl? //加载指示符(用来当iamgeView还没将图片显示出来时,显示的图片) varplaceholderImage:UIImage! //自动滚动计时器 varautoScrollTimer:NSTimer? init(frame:CGRect,delegate:FullScreenShowImageViewDelegate){ super.init(frame:frame) self.delegate=delegate praperaUI() } requiredinit?(coderaDecoder:NSCoder){ fatalError("init(coder:)hasnotbeenimplemented") } funcpraperaUI(){ //获取并设置scrollerView尺寸 letsize: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() } funcaddTapAction(){ //添加组件的点击事件 lettap=UITapGestureRecognizer(target:self, action:#selector(FullScreenShowImageView.handleTapAction(_:))) self.addGestureRecognizer(tap) } //点击事件响应 funchandleTapAction(tap:UITapGestureRecognizer)->Void{ //获取图片索引值 self.delegate.hiddenForCliked(self.currentIndex) self.dismissViewAnimate() } funcpresentViewAnimate(){ letfr=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 } } funcdismissViewAnimate(){ letfr=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 funcconfigureScrollerView(){ 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!) } //设置加载指示图片 funcconfigurePlaceholder(){ //这里我使用ImageHelper将文字转换成图片,作为加载指示符 letfont=UIFont.systemFontOfSize(17)//UIFont.systemFont(ofSize:17.0,weight:UIFontWeightMedium) letsize=CGSize(width:self.scrollerViewWidth!,height:self.scrollerViewHeight!) placeholderImage=UIImage(named:"图片加载中...") } //设置imageView funcconfigureImageView(){ 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!) } //设置页控制器 funcconfigurePageController(){ 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!) } //设置自动滚动计时器 funcconfigureAutoScrollTimer(){ //设置一个定时器,每三秒钟滚动一次 autoScrollTimer=NSTimer.scheduledTimerWithTimeInterval(3,target:self,selector:#selector(SliderGalleryController.letItScroll),userInfo:nil,repeats:true) } //计时器时间一到,滚动一张图片 funcletItScroll(){ letoffset=CGPoint(x:2*scrollerViewWidth!,y:0) self.scrollerView?.setContentOffset(offset,animated:true) } //每当滚动后重新设置各个imageView的图片 funcresetImageViewSource(){ //当前显示的是第一张图片 ifself.currentIndex==0{ self.leftImageView?.sd_setImageWithURL(NSURL(string:self.dataSource!.last!)) self.middleImageView?.sd_setImageWithURL(NSURL(string:self.dataSource!.first!)) letrightImageIndex=(self.dataSource?.count)!>1?1:0//保护 self.rightImageView?.sd_setImageWithURL(NSURL(string:self.dataSource![rightImageIndex])) } //当前显示的是最后一张图片 elseifself.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滚动完毕后触发 funcscrollViewDidScroll(scrollView:UIScrollView){ //获取当前偏移量 letoffset=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 ifself.currentIndex==self.dataSource?.count{ self.currentIndex=0 } } //如果向右滑动(显示上一张) if(offset<=0){ //还原偏移量 scrollView.contentOffset=CGPoint(x:self.scrollerViewWidth!,y:0) //视图索引-1 self.currentIndex=self.currentIndex-1 ifself.currentIndex==-1{ self.currentIndex=(self.dataSource?.count)!-1 } } //重新设置各个imageView的图片 resetImageViewSource() } } //手动拖拽滚动开始 funcscrollViewWillBeginDragging(scrollView:UIScrollView){ //使自动滚动计时器失效(防止用户手动移动图片的时候这边也在自动滚动) //autoScrollTimer?.invalidate() } //手动拖拽滚动结束 funcscrollViewDidEndDragging(scrollView:UIScrollView, willDeceleratedecelerate:Bool){ //重新启动自动滚动计时器 //configureAutoScrollTimer() } }
如何使用:
varsliderGallery:FullScreenShowImageView! varbannerCurrentIndex:Int=0 //图片轮播组件协议方法:获取内部scrollView尺寸 funcgalleryScrollerViewSize()->CGSize{ returnCGSize(width:BWidth,height:BHeight/2) } //图片轮播组件协议方法:获取数据集合 funcgalleryDataSource()->[String]{ returnself.bannerView.imageURLStringsGroupas![String] } //点击事件响应 funchiddenForCliked(index:Int){ if(bannerCurrentIndex!=index){ self.bannerView.scrollToIndex(Int32(index)) } self.navigationController?.setNavigationBarHidden(false,animated:false) } funcshowImageGallery(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 funccycleScrollView(cycleScrollView:SDCycleScrollView!,didSelectItemAtIndexindex:Int){ print("--------index:\(index)") bannerCurrentIndex=index self.showImageGallery(index) }
以上就是本次我们整理的代码全部内容,如果大家学习时候还有任何不明白的地方,可以在下方的留言区讨论,感谢你对毛票票的支持。