iOS开发商品页中banner中点击查看图片
更新时间：2018年02月02日 16:21:19 投稿：laozhang
本文文章给大家列出了关于iOS开发商品页中banner中点击查看图片功能源码，有兴趣的朋友参考下吧。
轮翻播放与查看是分开的，轮翻是是用 开源的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)
}
以上就是本次我们整理的代码全部内容，如果大家学习时候还有任何不明白的地方，可以在下方的留言区讨论，感谢你对脚本之家的支持。
相关文章
这篇文章主要介绍了如何设计iOS App中图片的线段涂鸦功能,也就是很多应用中图片上传时带有的编辑功能的基础,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了IOS 应用程序管理的实现的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下2017-10-10
本文将介绍TouchJson、 SBJson 、JSONKit 和 iOS5所支持的原生的json方法，解析国家气象局API。通过本文给大家介绍IOS中Json解析的四种方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
这篇文章给大家主要介绍了iOS中如何实现，在固定的label上动态显示所有文字的方法，文中给出了示例和思路，对大家的理解很有帮助，感兴趣的朋友们下面来一起看看吧。2016-10-10
在iOS中事件分为三类：触摸事件：通过触摸、手势进行触发（例如手指点击、缩放），运动事件：通过加速器进行触发（例如手机晃动），远程控制事件：通过其他远程设备触发（例如耳机控制按钮）今天我们来详细探讨下运动事件和远程控制2016-04-04
iOS动画解析之圆球加载动画XLBallLoading的实现
加载动画对大家来说都不陌生，我们在平时都会遇见，开发中也必不可少，所以下面这篇文章主要给大家介绍了关于iOS动画解析之圆球加载动画XLBallLoading实现的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
iOS中UIImagePickerController图片选取器的用法小结
UIImagePickerController平时就是用来做应用中从相册中选取图片功能的,这里我们就来整理一下iOS中UIImagePickerController图片选取器的用法小结,需要的朋友可以参考下2016-05-05
本篇文章主要介绍了iOS 本地视频和网络视频流播放实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的，是不是就是一个gif图片呢！我的回答当然是否定了，当然不排除也有人用gif图片啊！2015-05-05
这篇文章主要为大家详细介绍了iOS自定义UITabBar中间按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
最新评论