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

简介:

本文出自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)
        
    }
相关文章
|
2月前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
163 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
25天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
56 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
3月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
160 66
|
13天前
|
人工智能 程序员 API
iOS|记一名 iOS 开发新手的前两次 App 审核经历
啥,这玩意也有新手保护期?
20 0
|
3月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
122 11
|
3月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
190 3
|
3月前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
4月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
4月前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
4月前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 2
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 4
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 5
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 7
    iOS各个证书生成细节
  • 8
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
  • 9
    iOS MapView(定位)
  • 10
    iOS 自定义字体
  • 1
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
    113
  • 2
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
    20
  • 3
    iOS各个证书生成细节
    30
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    152
  • 5
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    52
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    67
  • 7
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    54
  • 8
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    56
  • 9
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    163
  • 10
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
    355