UIScrollView的无限左滑轮播一点也不难
UIScrollView的轮播在如今的app中用得十分广泛,最初实现的时候方式比较拙劣,滚动到最后一个视图时再返回到第一个看起来非常的不连贯。
今天查询UIScrollView轮播资料,总结两种比较喜欢也易于理解的方法:
1、UIScrollView显示的子视图左右各放一个多出来的子视图,如本来有A/B/C三张图片,在A前面放一个ImageView显示C,在C后天放一个ImageView显示A,即C/A/B/C/A。
初始化ScrollView的时候,contentoffset 从A开始,然后 setContentOffset:offSetanimated:YES 依次轮播,当播放到C之后,跳转到A后,在
- (void)scrollViewDidScroll:(UIScrollView
*)scrollView 中替换其contentoffset为第一个A的contentoffset。
代码如下:
- (void)viewDidLoad
{
[super viewDidLoad]; _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 0, 300, 300)];
_scrollView.frame = CGRectMake(10, 0, 300, 300);
_scrollView.contentSize = CGSizeMake(300*5, 300);
_scrollView.contentOffset = CGPointMake(300, 0);
_scrollView.delegate = self; [self.view addSubview:_scrollView]; UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
imageView1.image = [UIImage imageNamed:@"3.jpg"];
[_scrollView addSubview:imageView1]; UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(300, 0, 300, 300)];
imageView2.image = [UIImage imageNamed:@"1.jpg"];
[_scrollView addSubview:imageView2]; UIImageView *imageView3 = [[UIImageView alloc] initWithFrame:CGRectMake(300*2, 0, 300, 300)];
imageView3.image = [UIImage imageNamed:@"2.jpg"];
[_scrollView addSubview:imageView3]; UIImageView *imageView4 = [[UIImageView alloc] initWithFrame:CGRectMake(300*3, 0, 300, 300)];
imageView4.image = [UIImage imageNamed:@"3.jpg"];
[_scrollView addSubview:imageView4]; UIImageView *imageView5 = [[UIImageView alloc] initWithFrame:CGRectMake(300*4, 0, 300, 300)];
imageView5.image = [UIImage imageNamed:@"1.jpg"];
[_scrollView addSubview:imageView5]; // 设置时钟动画 定时器
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
// 将定时器添加到主线程
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
}
- (void)update:(NSTimer *)timer{
CGPoint offSet = self.scrollView.contentOffset;
offSet.x += 300;
[self.scrollView setContentOffset:offSet animated:YES];
} - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat X = self.scrollView.contentOffset.x;
if (X == 0) {
self.scrollView.contentOffset = CGPointMake(300*3, 0);
}
if (X == 300*4) {
self.scrollView.contentOffset = CGPointMake(300, 0);
}
}
这是方法1。里面的图片是随意在网上找的。
2、方法二是用固定的三个UIImageView控件,然后替换其图片来实现。
具体思路:先初始化三个图片控件,然后第一个控件放最后一张图,第二个图片放第一张图,第三个控件放第2张图。如轮播A/B/三个图片时,显示顺序是C/A/B。
后面的思路与上面类似,只不过要进行image替换。直接上代码:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIScrollView *scrollView =[[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0, 0, width, height);
[self.view addSubview:scrollView];
self.scrollView = scrollView;
[self.scrollView setContentSize:CGSizeMake(width * 3, height)];
// 设置隐藏横向条
self.scrollView.showsHorizontalScrollIndicator = NO;
// 设置自动分页
self.scrollView.pagingEnabled = YES;
// 设置代理
self.scrollView.delegate = self;
// 设置当前点
self.scrollView.contentOffset = CGPointMake(width, 0);
// 设置是否有边界
self.scrollView.bounces = NO; // 初始化当前视图
UIImageView *currentImageView =[[UIImageView alloc] init];
currentImageView.image = [UIImage imageNamed:@"1.jpg"];
[self.scrollView addSubview:currentImageView];
self.currentImageView = currentImageView;
self.currentImageView.frame = CGRectMake(width, 0, width, height);
self.currentImageView.contentMode = UIViewContentModeScaleAspectFill;
// 初始化下一个视图
UIImageView *nextImageView = [[UIImageView alloc] init];
nextImageView.image = [UIImage imageNamed:@"2.jpg"];
[self.scrollView addSubview:nextImageView];
self.nextImageView = nextImageView;
self.nextImageView.frame = CGRectMake(width * 2, 0, width, height);
self.nextImageView.contentMode = UIViewContentModeScaleAspectFill;
// 初始化上一个视图
UIImageView *preImageView =[[UIImageView alloc] init];
preImageView.image = [UIImage imageNamed:@"3.jpg"];
preImageView.frame = CGRectMake(0, 0, width, height);
[self.scrollView addSubview:preImageView];
self.preImageView = preImageView;
self.preImageView.contentMode =UIViewContentModeScaleAspectFill; // 设置时钟动画 定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f target:self selector:@selector(update:) userInfo:nil repeats:YES];
// 将定时器添加到主线程
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; }
- (void)update:(NSTimer *)timer{
//定时移动
if (_isDragging == YES) {
return ;
}
CGPoint offSet = self.scrollView.contentOffset;
offSet.x +=offSet.x;
[self.scrollView setContentOffset:offSet animated:YES]; }
// 开始拖动
- (void) scrollViewDidScroll:(UIScrollView *)scrollView{
static int i =1; // 当前展示的是第几张图片
float offset = self.scrollView.contentOffset.x;
if (self.nextImageView.image == nil || self.preImageView.image == nil) {
// 加载下一个视图
NSString *imageName1 = [NSString stringWithFormat:@"%d.jpg",i == KOUNT ? 1:i +1];
_nextImageView.image = [UIImage imageNamed:imageName1];
// 加载上一个视图
NSString *imageName2 = [NSString stringWithFormat:@"%d.jpg",i==1 ? KOUNT :i-1];
_preImageView.image = [UIImage imageNamed:imageName2];
}
if(offset ==0){
_currentImageView.image = _preImageView.image;
scrollView.contentOffset = CGPointMake(width, 0);
_preImageView.image = nil;
if (i == 1) {
i =KOUNT;
} else{
i-=1;
}
}
if (offset == width * 2) {
_currentImageView.image = _nextImageView.image;
scrollView.contentOffset = CGPointMake(width, 0);
_nextImageView.image = nil;
if (i == KOUNT) {
i =1 ;
}else{
i +=1 ;
}
} }
主要思路都是在滑动的动画执行完毕后,在用非动画方法移动的相同区域。
UIScrollView的无限左滑轮播一点也不难的更多相关文章
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- Android无限循环轮播广告位Banner
Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...
- Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...
- ios之无限图片轮播器的实现
首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到 ...
- 图片首尾平滑轮播(JS原生方法—节流)<原创>
首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...
- 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 无限循环轮播图之JS部分(原生JS)
JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...
随机推荐
- Microsoft Dynamics CRM 2011 当您在 大型数据集上执行 RetrieveMultiple 查询很慢的解决方法
症状 当您在 Microsoft Dynamics CRM 2011 年大型数据集上执行 RetrieveMultiple 查询时,您会比较慢. 原因 发生此问题是因为大型数据集缓存 Retrieve ...
- 【Unity Shaders】ShadowGun系列之二——雾和体积光
写在前面 体积光,这个名称是God Rays的中文翻译,感觉不是很形象.God Rays其实是Crepuscular rays在图形学中的说法,而Crepuscular rays的意思是云隙光.曙光. ...
- Shell脚本编程入门(一)
最近在学shell,记录一下. if语句的使用: 1.判断两个参数大小 #!/bin/sh #a test about if statement a=10 b=20 if [ $a -eq $b ]; ...
- Android的ViewFlipper-android学习之旅(三十五)
ViewFlipper的简介 ViewFlipper继承于ViewAnimator,它和AdapterViewFlipper有着许多的相似的地方. 代码示例 package peng.liu.test ...
- Android性能优化之加快应用启动速度
应用的启动 启动方式 通常来说,在安卓中应用的启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会重新创建一个新的进程分配给该应用,这个启动方式就是冷启动. ...
- SpriteBuilder实现2D精灵光影明暗反射效果(一)
其实不用3D建模,用2D的图像就可以模拟3D场景中光照反射的效果. 这里我们不得不提到一个normalMap(法线图)的概念,请各位童鞋自己度娘吧,简单来说它可以使得2D表面生成一定细节程度的光照方向 ...
- java虚拟机构造原理
Java虚拟机的生命周期 一个运行中的Java虚拟机有着一个清晰的任务:执行Java程序.程序开始执行时他才运行,程序结束时他就停止.你在同一台机器上运行三个程序,就会有三个运行中的Java虚拟机. ...
- 使用dom4j技术对xml文档进行增删改练习(一)
整个流程如下面代码所以,并对一些重要代码意义做出详细解释: import java.io.File; import java.io.FileOutputStream; import org.dom4j ...
- 从Linux启动过程到android启动过程
Linux启动过程: 1.首先开机给系统供电,此时硬件电路会产生一个确定的复位时序,保证cpu是最后一个被复位的器件.为什么cpu要最后被复位呢?因为 如果cpu第一个被复位,则当cpu复位后开始运行 ...
- C++ Primer 有感(复制控制)
1.不管类是否定义了自己的析构函数,编译器都 自动执行类中非static数据成员的析构函数. 2.如果我们没有定义复制构造函数,编译器就会为我们合成一个.合成复制构造函数的行为是,执行逐个成员初始化, ...