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

430 阅读4分钟

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

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

这里是给出的是查看的:

//// FullScreenShowImageView.swift// joopic//// Created by jianxiong li on 16/9/27.// Copyright © 2016年 joobot. All rights reserved.//import Foundation import 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)
    
}