摘要:本文出自,原文地址轮翻播放与查看是分开的,轮翻是是用开源的这里是给出的是查看的年图片轮播组件代理协议获取数据源获取内部的宽高尺寸图片轮播组件控制器代理对象屏幕宽度当前展示的图片索引数据源用于轮播的左中右三个不管几张图片都是这三个交替使
本文出自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) }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/16919.html
摘要:在商品列表生命周期中,监听当前父元素的滚动事件,滚动时的回调中,获取到滚动条距离滚动元素即的距离的值,存入到以及在中移除掉当前滚动事件的监听。 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上...
摘要:在商品列表生命周期中,监听当前父元素的滚动事件,滚动时的回调中,获取到滚动条距离滚动元素即的距离的值,存入到以及在中移除掉当前滚动事件的监听。 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上...
摘要:分析提到侧滑删除,一个经典的例子就是玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源,估计有一段历史了。列表左右滑动开源组件掘金是一款用于为上的排布提供左滑右滑操作的库。 Android 仿 YouTube 拖拽视频效果的实现 - Android - 掘金Android仿YouTube拖拽视频效果的实现 youtube-like-drag-video-view 代码已经开源到GitH...
摘要:商品详情接口商品表按索引查询商品信息。接着,我们来看看和定义名称概念解释标准产品单位剥离销售属性的部分,例如小米。 前言 建议使用大屏设备(例如pad/pc),可以更好的浏览本篇文章 今天我们开始「商品系统」的篇章。本文分为如下五大模块: 需求分析 架构设计 Spu和Sku的故事 数据模型设计 接口设计 第一篇我们主要看看一个入门的电商平台(B2C)如何去构建自己的基础商品信息,其...
摘要:微信小程序小米事先声明,这是一个高仿小米的微信小程序。写完之后查文档才发现,微信小程序官方提供了自定义组件的方法有需要的可以查看微信小程序文档写完这个组件后我总解了一下需要注意的问题选中了的当前页面,再次点击因该无效。 微信小程序-小米Lite 事先声明,这是一个高仿小米Lite的微信小程序。 我呢现在是一个大三快大四的学生,这个小程序花了我很长时间,把能写的功能基本上都写了。我秉着分...
阅读 2439·2023-04-26 02:17
阅读 1434·2021-11-24 09:39
阅读 945·2021-11-18 13:13
阅读 1841·2021-11-15 11:37
阅读 2879·2021-10-12 10:12
阅读 1975·2021-09-02 15:11
阅读 2650·2019-08-30 15:48
阅读 3292·2019-08-30 14:00