无限轮播(功能完善)

无限轮播(功能完善)

一、自动滚动

添加并设置一个定时器,每个2.0秒,就跳转到下一条。

  获取当前正在展示的位置。

 1     [self addNSTimer];
 2 }
 3
 4 -(void)addNSTimer
 5 {
 6 //    NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#>
 7     [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
 8 }
 9 -(void)nextPage
10 {
11     NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
12 //    NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];
13 }

  打印查看:

  

实现步骤:

(1)添加并设置定时器

(2)设置定时器的调用方法

  1)获取当前正在展示的位置

  2)计算出下一个需要展示的位置

  3)通过动画滚动到下一个位置

  注意点:需要进行判断。

实现代码:

 1 - (void)viewDidLoad
 2 {
 3     [super viewDidLoad];
 4     //注册cell
 5 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
 6     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
 7
 8
 9      [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
10      [self addNSTimer];
11 }
12
13 -(void)addNSTimer
14 {
15 //    NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#>
16
17    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
18     //添加到runloop中
19     [[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
20 }
21 -(void)nextPage
22 {
23 //    NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
24         //1)获取当前正在展示的位置
25     NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];
26
27        //2)计算出下一个需要展示的位置
28     NSInteger nextItem=currentIndexPath.item+1;
29     NSInteger nextSection=currentIndexPath.section;
30     if (nextItem==self.news.count) {
31         nextItem=0;
32         nextSection++;
33     }
34     NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];
35
36       //3)通过动画滚动到下一个位置
37      [self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
38 }

定时器的说明:

  当用户在处理其他事情的时候,定时器会停止工作。应该把定时器添加到runloop中,告诉系统在处理其他事情的时候分一部分空间给它。

二、设置页码

  在storyboard中添加一个页码控件。

实现代码:  

 1 #pragma mark-懒加载
 2 -(NSArray *)news
 3 {
 4     if (_news==nil) {
 5         _news=[YYnews objectArrayWithFilename:@"newses.plist"];
 6         self.pageControl.numberOfPages=self.news.count;
 7     }
 8     return _news;
 9 }
10
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14     //注册cell
15 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
16     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
17
18
19      [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
20     [self addNSTimer];
21 }
22
23 -(void)addNSTimer
24 {
25 //    NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#>
26
27    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
28     //添加到runloop中
29     [[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
30 }
31 -(void)nextPage
32 {
33 //    NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
34         //1)获取当前正在展示的位置
35     NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];
36
37        //2)计算出下一个需要展示的位置
38     NSInteger nextItem=currentIndexPath.item+1;
39     NSInteger nextSection=currentIndexPath.section;
40     if (nextItem==self.news.count) {
41         nextItem=0;
42         nextSection++;
43     }
44     NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];
45
46       //3)通过动画滚动到下一个位置
47      [self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
48
49     //4)设置页码
50     self.pageControl.currentPage=nextItem;
51 }

 自动滚动,页码的实现效果:

三、完善

说明:监听collectionView的滚动,当手动触摸collectionView,尝试拖拽的时候,把定时器停掉,当手指移开的时候,重启定时器。

完整的实现代码:

  8
  9 #import "YYViewController.h"
 10 #import "MJExtension.h"
 11 #import "YYnews.h"
 12 #import "YYcell.h"
 13
 14 #define YYIDCell @"cell"
 15 //注意:这里需要考虑用户的手动拖拽
 16 #define YYMaxSections 100
 17 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
 18 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
 19 @property(nonatomic,strong)NSArray *news;
 20 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
 21 @property(nonatomic,strong)NSTimer *timer;
 22
 23 @end
 24
 25 @implementation YYViewController
 26
 27 #pragma mark-懒加载
 28 -(NSArray *)news
 29 {
 30     if (_news==nil) {
 31         _news=[YYnews objectArrayWithFilename:@"newses.plist"];
 32         self.pageControl.numberOfPages=self.news.count;
 33     }
 34     return _news;
 35 }
 36
 37 - (void)viewDidLoad
 38 {
 39     [super viewDidLoad];
 40     //注册cell
 41 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
 42     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
 43
 44
 45      [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:50] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
 46     [self addNSTimer];
 47 }
 48
 49 //添加定时器
 50 -(void)addNSTimer
 51 {
 52    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
 53     //添加到runloop中
 54     [[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
 55     self.timer=timer;
 56 }
 57
 58 //删除定时器
 59 -(void)removeNSTimer
 60 {
 61     [self.timer invalidate];
 62     self.timer=nil;
 63 }
 64
 65 //自动滚动
 66 -(void)nextPage
 67 {
 68         //1获取当前正在展示的位置
 69     NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];
 70
 71     //马上显示回最中间那组的数据
 72     NSIndexPath *currentIndexPathRest=[NSIndexPath indexPathForItem:currentIndexPath.item inSection:YYMaxSections/2];
 73     [self.collectinView scrollToItemAtIndexPath:currentIndexPathRest atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
 74
 75        //2计算出下一个需要展示的位置
 76     NSInteger nextItem=currentIndexPathRest.item+1;
 77     NSInteger nextSection=currentIndexPathRest.section;
 78     if (nextItem==self.news.count) {
 79         nextItem=0;
 80         nextSection++;
 81     }
 82     NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];
 83
 84       //3通过动画滚动到下一个位置
 85      [self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
 86
 87 //    //4)设置页码
 88 //    self.pageControl.currentPage=nextItem;
 89 }
 90
 91 #pragma mark- UICollectionViewDataSource
 92 //一共多少组,默认为1组
 93 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 94 {
 95     return YYMaxSections;
 96 }
 97 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 98 {
 99     return self.news.count;
100 }
101
102 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
103 {
104     YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
105     cell.news=self.news[indexPath.item];
106     NSLog(@"%p,%d",cell,indexPath.item);
107     return cell;
108 }
109
110 #pragma mark-UICollectionViewDelegate
111 //当用户开始拖拽的时候就调用
112 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
113 {
114     [self removeNSTimer];
115 }
116 //当用户停止拖拽的时候调用
117 -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
118 {
119     [self addNSTimer];
120 }
121 //设置页码
122 -(void)scrollViewDidScroll:(UIScrollView *)scrollView
123 {
124     int page=(int)(scrollView.contentOffset.x/scrollView.frame.size.width+0.5)%self.news.count;
125     self.pageControl.currentPage=page;
126 }
127 @end

补充说明:

  实现瀑布流最理想的做法是继承UIScrollView,不建议使用多个UITableView的方式实现(这种方式无法实现cell的循环利用,且禁止了cell的滚动时间后,整体的tableView需要随着滚动会出现空白)。

  也可以使用collectionView来实现,但使用这种方法需要自定义collectionView的布局(流水布局)

时间: 2024-07-29 13:05:20

无限轮播(功能完善)的相关文章

iOS开发UI篇—无限轮播(功能完善)

iOS开发UI篇—无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. 1 [self addNSTimer]; 2 } 3 4 -(void)addNSTimer 5 { 6 // NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repe

无限轮播图的制作

url:http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.思路 1.所有滑动效果的demo都是通过控制css里的left值,来控制滑动效果的. 2.需要两个块,一个div块,一个ui.div块的position是relative,ui块的position是absolute.这样ui块的left就可以根据外层的div来控制.div的overflow是hidd

iOS无限轮播视图

以前曾经写过一个用UICollectionView的无限轮播视图,但是写法不是很成熟,设置模型上限为数组的count * 50这样做的话会滚动到最后一个模型的时候会crash掉,今天理了下思路,写了一个基于UISCrollView的轮播视图,虽然比较简陋,但是实现了基本功能.没有怎么加入注释,请谅解效果图如下: 有兴趣的可以去参考一些代码,附上GitHub地址:https://github.com/zimou47/UnlimitedScrollView 如果为您带来了帮助,请点一颗星O(∩_∩)

图片无限轮播由于ViewPager的预加载机制所导致的问题

分类和回归是分析预测中最古老的话题.支持向量机.逻辑回归.朴素贝叶斯算法.神经网络和深度学习都属于分类和回归技术. 本章将重点关注决策树算法和它的扩展随机决策森林算法,这两个算法灵活且应用广泛,即可用于分类问题,也可用于回归问题.更令人兴奋的是,它们可以帮助我们预测未来,至少是预测我们尚不肯定的事情.比如,根据线上行为来预测购买汽车的概率,根据用词预测邮件是否是垃圾邮件,根据地理位置和土壤的化学成分预测哪块耕地的产量可能更高. 总体实现无限轮播的思想,其实和网上大部分的思路都是相同的,设置一个I

Android之仿京东淘宝的自动无限轮播控件

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那马首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView 使用原理:采用UICollectionView的重用机制和循环滚动的方式实现图片的无限轮播,播放非常顺畅,解决了UISCrollView使用时从最后一张跳到第一张时的生硬状态. 主要类截图: SDCollectionViewCell:用来重用的item,即显示图片的视图: SDCycleScrollView: 对外提供的一个创建轮播器的接口类,使用者就是直接使用这个类来实现

iOS开发UI篇—无限轮播(循环利用)

一.无限轮播  1.简单说明 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrollView上面添加多个imageView,然后设置imageView的图片,和scrollView的滚动范围. 以前的做法: 一般而言,轮播的广告或者是图片数量都不会太多(3~5张).所以,并不会太多的去考虑性能问题.但是如果图片过多(比如有16张图片,就需要创建16个imageView),那么就不得不考虑性能问题

Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了一下,最终实现了所需效果.在这里与大家分享. 首先看一下效果(主要是布局方面的效果,毕竟手势识别和滑动不太好显示,懒得弄成gif了): 1.布局文件.xml <LinearLayout android:layout_width="fill_parent" android:layout

新版无限轮播视图,2个imageView完成(不依赖任何三方库)

笔者最新改写的无限轮播视图,完全不依赖任何三方库,2个imageView实现无限轮播. 特点: 1.支持图片缓存到本地,亦支持一键清除缓存. 2.超级轻量,没有任何第三方框架参合,占用内存极小 3.高度自定义,支持修改pageControll的显示图片及显示位置 4.图片展示模式多样性,支持轮播展示与渐入渐出模式展示 5.支持自动滚动 6.创建方式多样,支持代码及storyboard创建 7.支持显示图片简介,具体见GitHub效果图 代码实现: .h // // WYScrollView.h