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

時間 2019-11-07

標籤 ios 開發商品詳情 banner 點擊查看圖片欄目 iOS 简体版

原文原文鏈接

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

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

這裏是給出的是查看的：app

//// 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()
}
}

如何使用：ide

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)
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。