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的无限左滑轮播一点也不难的更多相关文章

  1. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  2. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  3. Android无限循环轮播广告位Banner

     Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...

  4. Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...

  5. ios之无限图片轮播器的实现

    首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到 ...

  6. 图片首尾平滑轮播(JS原生方法—节流)<原创>

    首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang=" ...

  7. 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  8. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  9. 无限循环轮播图之JS部分(原生JS)

    JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...

随机推荐

  1. Microsoft Dynamics CRM 2011 当您在 大型数据集上执行 RetrieveMultiple 查询很慢的解决方法

    症状 当您在 Microsoft Dynamics CRM 2011 年大型数据集上执行 RetrieveMultiple 查询时,您会比较慢. 原因 发生此问题是因为大型数据集缓存 Retrieve ...

  2. 【Unity Shaders】ShadowGun系列之二——雾和体积光

    写在前面 体积光,这个名称是God Rays的中文翻译,感觉不是很形象.God Rays其实是Crepuscular rays在图形学中的说法,而Crepuscular rays的意思是云隙光.曙光. ...

  3. Shell脚本编程入门(一)

    最近在学shell,记录一下. if语句的使用: 1.判断两个参数大小 #!/bin/sh #a test about if statement a=10 b=20 if [ $a -eq $b ]; ...

  4. Android的ViewFlipper-android学习之旅(三十五)

    ViewFlipper的简介 ViewFlipper继承于ViewAnimator,它和AdapterViewFlipper有着许多的相似的地方. 代码示例 package peng.liu.test ...

  5. Android性能优化之加快应用启动速度

    应用的启动 启动方式 通常来说,在安卓中应用的启动方式分为两种:冷启动和热启动. 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会重新创建一个新的进程分配给该应用,这个启动方式就是冷启动. ...

  6. SpriteBuilder实现2D精灵光影明暗反射效果(一)

    其实不用3D建模,用2D的图像就可以模拟3D场景中光照反射的效果. 这里我们不得不提到一个normalMap(法线图)的概念,请各位童鞋自己度娘吧,简单来说它可以使得2D表面生成一定细节程度的光照方向 ...

  7. java虚拟机构造原理

    Java虚拟机的生命周期 一个运行中的Java虚拟机有着一个清晰的任务:执行Java程序.程序开始执行时他才运行,程序结束时他就停止.你在同一台机器上运行三个程序,就会有三个运行中的Java虚拟机. ...

  8. 使用dom4j技术对xml文档进行增删改练习(一)

    整个流程如下面代码所以,并对一些重要代码意义做出详细解释: import java.io.File; import java.io.FileOutputStream; import org.dom4j ...

  9. 从Linux启动过程到android启动过程

    Linux启动过程: 1.首先开机给系统供电,此时硬件电路会产生一个确定的复位时序,保证cpu是最后一个被复位的器件.为什么cpu要最后被复位呢?因为 如果cpu第一个被复位,则当cpu复位后开始运行 ...

  10. C++ Primer 有感(复制控制)

    1.不管类是否定义了自己的析构函数,编译器都 自动执行类中非static数据成员的析构函数. 2.如果我们没有定义复制构造函数,编译器就会为我们合成一个.合成复制构造函数的行为是,执行逐个成员初始化, ...