iOS 開發商品詳情頁中的banner中點擊查看圖片

本文出自code4app，原文地址：http://www.code4app.com/blog-...

輪翻播放與查看是分開的，輪翻是是用 開源的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)
        
    }