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

2018-01-11 13:00:12来源:oschina作者:莫非有道人点击

分享

本文出自code4app,原文地址:http://www.code4app.com/blog-928210-1694.html


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


这里是给出的是查看的:


////FullScreenShowImageView.swift//joopic////Createdbyjianxionglion16/9/27.//Copyright©2016年joobot.Allrightsreserved.//importFoundation
importUIKit//图片轮播组件代理协议protocolFullScreenShowImageViewDelegate{//获取数据源
funcgalleryDataSource()->[String]//获取内部scrollerView的宽高尺寸
funcgalleryScrollerViewSize()->CGSizefunchiddenForCliked(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=falseself.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.xif(self.dataSource?.count!=0){
//如果向左滑动(显示下一张)
if(offset>=self.scrollerViewWidth!*2){//还原偏移量
scrollView.contentOffset=CGPoint(x:self.scrollerViewWidth!,y:0)//视图索引+1
self.currentIndex=self.currentIndex+1ifself.currentIndex==self.dataSource?.count{self.currentIndex=0
}
}
//如果向右滑动(显示上一张)
if(offset<=0){//还原偏移量
scrollView.contentOffset=CGPoint(x:self.scrollerViewWidth!,y:0)//视图索引-1
self.currentIndex=self.currentIndex-1ifself.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=indexself.showImageGallery(index)}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台