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)
}
以上就是本次我们整理的代码全部内容，如果大家学习时候还有任何不明白的地方，可以在下方的留言区讨论，感谢你对毛票票的支持。