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. CCSpriteBatchNode中存放元素的一点理解

    该对象只能包含基于CCSprite的对象,并且该要求适用于一切子孙对象.即加入CCSpriteBatchNode的任何对象都必须是CCSprite或其子类. 比如CCSpriteBatchNode包含 ...

  2. Android开发基础规范(一)

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52602487 前言:Androi ...

  3. How to generate the complex data regularly to Ministry of Transport of P.R.C by DB Query Analyzer

    How to generate the complex data regularly to Ministry of Transport of P.R.C by DB Query Analyzer 1 ...

  4. mqtt推送介绍

    方案1.使用GCM服务(Google Cloud Messaging) 简介:Google推出的云消息服务,即第二代的C2DM. 优点:Google提供的服务.原生.简单,无需实现和部署服务端. 缺点 ...

  5. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十七)

    现在玩家选择机器人后,可以在屏幕上或手臂上点击来移动robot's arm了. 但是玩家选择一个机器人后没有视觉效果来表明哪个机器人被选中.玩家做了一个操作后没有视觉反馈会惹恼强迫症用户滴 ;) 这篇 ...

  6. 尚学堂马士兵struts2 课堂笔记(二)

    14通配符问题 其实这个问题看一个例子就ok <package name="actions" extends="struts-default" names ...

  7. 02_Weblogic课程之安装篇:RedHat下JDK安装,RedHat下Weblogic安装,目录结构,环境变量设置

     1  Weblogic的安装方式有三种: 一.GUI方式安装    (java –jar wls1035_generic.jar [-mode=gui])这是默认的 二.Console方式安装  ...

  8. JAVA之旅(十六)——String类,String常用方法,获取,判断,转换,替换,切割,子串,大小写转换,去除空格,比较

    JAVA之旅(十六)--String类,String常用方法,获取,判断,转换,替换,切割,子串,大小写转换,去除空格,比较 过节耽误了几天,我们继续JAVA之旅 一.String概述 String时 ...

  9. 看uboot的时候发现随机数的另外一种算法

    #include <stdio.h> #include <time.h> static unsigned int y = 1U; unsigned int rand_r(uns ...

  10. Android反编译获取源码-android学习之旅(70)

    上一讲我们介绍了如何获取资源文件,这一节讲解如何获取源码,其实获取源码真的很简单 首先还是要有工具,Dex2jar,这个工具用于将apk解压之后的dex文件转化为jar文件还有jd-gui的这个工具能 ...