iOS開發(fā)商品頁中banner中點(diǎn)擊查看圖片

更新時(shí)間：2018年02月02日 16:21:19 投稿：laozhang

本文文章給大家列出了關(guān)于iOS開發(fā)商品頁中banner中點(diǎn)擊查看圖片功能源碼，有興趣的朋友參考下吧。

輪翻播放與查看是分開的，輪翻是是用開源的SDCycleScrollView

這里是給出的是查看的：

//
// FullScreenShowImageView.swift
// joopic
//
// Created by jianxiong li on 16/9/27.
// Copyright © 2016年 joobot. All rights reserved.
//
import Foundation
import UIKit
//圖片輪播組件代理協(xié)議
protocol FullScreenShowImageViewDelegate{
 //獲取數(shù)據(jù)源
 func galleryDataSource()->[String]
 //獲取內(nèi)部scrollerView的寬高尺寸
 func galleryScrollerViewSize()->CGSize
 
 func hiddenForCliked(index:Int)
}
//圖片輪播組件控制器
class FullScreenShowImageView: UIView,UIScrollViewDelegate{
 //代理對(duì)象
 var delegate : FullScreenShowImageViewDelegate!
 
 //屏幕寬度
 let kScreenWidth = BWidth
 
 //當(dāng)前展示的圖片索引
 var currentIndex : Int = 0
 
 //數(shù)據(jù)源
 var dataSource : [String]?
 
 //用于輪播的左中右三個(gè)image（不管幾張圖片都是這三個(gè)imageView交替使用）
 var leftImageView , middleImageView , rightImageView : UIImageView?
 
 //放置imageView的滾動(dòng)視圖
 var scrollerView : UIScrollView?
 
 //scrollView的寬和高
 var scrollerViewWidth : CGFloat?
 var scrollerViewHeight : CGFloat?
 
 //頁控制器（小圓點(diǎn)）
 var pageControl : UIPageControl?
 
 //加載指示符（用來當(dāng)iamgeView還沒將圖片顯示出來時(shí)，顯示的圖片）
 var placeholderImage:UIImage!
 
 //自動(dòng)滾動(dòng)計(jì)時(shí)器
 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() {
  
  //獲取并設(shè)置scrollerView尺寸
  let size : CGSize = self.delegate.galleryScrollerViewSize()
  self.scrollerViewWidth = size.width
  self.scrollerViewHeight = size.height
  
  //獲取數(shù)據(jù)
  self.dataSource = self.delegate.galleryDataSource()
  //設(shè)置scrollerView
  self.configureScrollerView()
  
  //設(shè)置加載指示圖片
  self.configurePlaceholder()
  
  //設(shè)置imageView
  self.configureImageView()
  
  //設(shè)置頁控制器
  self.configurePageController()
  
  //設(shè)置自動(dòng)滾動(dòng)計(jì)時(shí)器
  //self.configureAutoScrollTimer()
  
  self.backgroundColor = UIColor.blackColor()
  
  self.addTapAction()
 }
  
 func addTapAction(){
  //添加組件的點(diǎn)擊事件
  let tap = UITapGestureRecognizer(target: self,
           action: #selector(FullScreenShowImageView.handleTapAction(_:)))
  self.addGestureRecognizer(tap)
 }
 
 //點(diǎn)擊事件響應(yīng)
 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!
  }
  
 }
 
 //設(shè)置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)
  //滾動(dòng)視圖內(nèi)容區(qū)域向左偏移一個(gè)view的寬度
  self.scrollerView?.contentOffset = CGPoint(x: self.scrollerViewWidth!, y: 0)
  self.scrollerView?.pagingEnabled = true
  self.scrollerView?.bounces = false
  self.addSubview(self.scrollerView!)
  
 }
 
 //設(shè)置加載指示圖片
 func configurePlaceholder(){
  //這里我使用ImageHelper將文字轉(zhuǎn)換成圖片，作為加載指示符
  let font = UIFont.systemFontOfSize(17)// UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightMedium)
  let size = CGSize(width: self.scrollerViewWidth!, height: self.scrollerViewHeight!)
  placeholderImage = UIImage(named: "圖片加載中...")
 }
 
 //設(shè)置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
  
  //設(shè)置初始時(shí)左中右三個(gè)imageView的圖片（分別時(shí)數(shù)據(jù)源中最后一張，第一張，第二張圖片）
  if(self.dataSource?.count != 0){
   resetImageViewSource()
  }
  
  self.scrollerView?.addSubview(self.leftImageView!)
  self.scrollerView?.addSubview(self.middleImageView!)
  self.scrollerView?.addSubview(self.rightImageView!)
 }
 
 //設(shè)置頁控制器
 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!)
 }
 
 //設(shè)置自動(dòng)滾動(dòng)計(jì)時(shí)器
 func configureAutoScrollTimer() {
  //設(shè)置一個(gè)定時(shí)器，每三秒鐘滾動(dòng)一次
  autoScrollTimer = NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(SliderGalleryController.letItScroll), userInfo: nil, repeats: true)
 }
 
 //計(jì)時(shí)器時(shí)間一到，滾動(dòng)一張圖片
 func letItScroll(){
  let offset = CGPoint(x: 2*scrollerViewWidth!, y: 0)
  self.scrollerView?.setContentOffset(offset, animated: true)
 }
 
 //每當(dāng)滾動(dòng)后重新設(shè)置各個(gè)imageView的圖片
 func resetImageViewSource() {
  //當(dāng)前顯示的是第一張圖片
  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 //保護(hù)
   self.rightImageView?.sd_setImageWithURL(NSURL(string: self.dataSource![rightImageIndex]))
   
   
  }
   //當(dāng)前顯示的是最后一張圖片
  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]))
  }
  
  //設(shè)置頁控制器當(dāng)前頁碼
  self.pageControl?.currentPage = self.currentIndex
 }
 
 
 //scrollView滾動(dòng)完畢后觸發(fā)
 func scrollViewDidScroll(scrollView: UIScrollView) {
  //獲取當(dāng)前偏移量
  let offset = scrollView.contentOffset.x
  
  if(self.dataSource?.count != 0){
   
   //如果向左滑動(dòng)（顯示下一張）
   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
    }
   }
   
   //如果向右滑動(dòng)（顯示上一張）
   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
    }
   }
   
   //重新設(shè)置各個(gè)imageView的圖片
   resetImageViewSource()
   
  }
 }
 
 //手動(dòng)拖拽滾動(dòng)開始
 func scrollViewWillBeginDragging(scrollView: UIScrollView) {
  //使自動(dòng)滾動(dòng)計(jì)時(shí)器失效（防止用戶手動(dòng)移動(dòng)圖片的時(shí)候這邊也在自動(dòng)滾動(dòng)）
  //autoScrollTimer?.invalidate()
 }
 
 //手動(dòng)拖拽滾動(dòng)結(jié)束
 func scrollViewDidEndDragging(scrollView: UIScrollView,
         willDecelerate decelerate: Bool) {
  //重新啟動(dòng)自動(dòng)滾動(dòng)計(jì)時(shí)器
  //configureAutoScrollTimer()
  
 }
}

如何使用：

var sliderGallery : FullScreenShowImageView!
 var bannerCurrentIndex:Int = 0
 
 //圖片輪播組件協(xié)議方法：獲取內(nèi)部scrollView尺寸
 func galleryScrollerViewSize() -> CGSize {
  return CGSize(width: BWidth, height: BHeight/2)
 }
 
 //圖片輪播組件協(xié)議方法：獲取數(shù)據(jù)集合
 func galleryDataSource() -> [String] {
  return self.bannerView.imageURLStringsGroup as! [String]
 }
 
  //點(diǎn)擊事件響應(yīng)
 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()
   
   //將圖片輪播組件添加到當(dāng)前視圖
   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)
  
 }

以上就是本次我們整理的代碼全部內(nèi)容，如果大家學(xué)習(xí)時(shí)候還有任何不明白的地方，可以在下方的留言區(qū)討論，感謝你對(duì)腳本之家的支持。

您可能感興趣的文章: