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

一、自动滚动

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

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

     [self addNSTimer];
} -(void)addNSTimer
{
// NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#>
[NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
}
-(void)nextPage
{
NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
// NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];
}

  打印查看:

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

实现步骤:

(1)添加并设置定时器

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

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

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

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

  注意点:需要进行判断。

实现代码:

 - (void)viewDidLoad
{
[super viewDidLoad];
//注册cell
// [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell]; [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem: inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
[self addNSTimer];
} -(void)addNSTimer
{
// NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#> NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
//添加到runloop中
[[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
}
-(void)nextPage
{
// NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
//1)获取当前正在展示的位置
NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];   //2)计算出下一个需要展示的位置
NSInteger nextItem=currentIndexPath.item+;
NSInteger nextSection=currentIndexPath.section;
if (nextItem==self.news.count) {
nextItem=;
nextSection++;
}
NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];   //3)通过动画滚动到下一个位置
[self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}

定时器的说明:

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

二、设置页码

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

实现代码:  

 #pragma mark-懒加载
-(NSArray *)news
{
if (_news==nil) {
_news=[YYnews objectArrayWithFilename:@"newses.plist"];
self.pageControl.numberOfPages=self.news.count;
}
return _news;
} - (void)viewDidLoad
{
[super viewDidLoad];
//注册cell
// [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell]; [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem: inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
[self addNSTimer];
} -(void)addNSTimer
{
// NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#(BOOL)#> NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
//添加到runloop中
[[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
}
-(void)nextPage
{
// NSLog(@"%@",[self.collectinView indexPathsForVisibleItems]);
//1)获取当前正在展示的位置
NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject];   //2)计算出下一个需要展示的位置
NSInteger nextItem=currentIndexPath.item+;
NSInteger nextSection=currentIndexPath.section;
if (nextItem==self.news.count) {
nextItem=;
nextSection++;
}
NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];   //3)通过动画滚动到下一个位置
[self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES]; //4)设置页码
self.pageControl.currentPage=nextItem;
}

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

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

三、完善

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

完整的实现代码:

 //
// YYViewController.m
// 07-无限滚动(循环利用)
//
// Created by apple on 14-8-3.
// Copyright (c) 2014年 yangyong. All rights reserved.
// #import "YYViewController.h"
#import "MJExtension.h"
#import "YYnews.h"
#import "YYcell.h" #define YYIDCell @"cell"
//注意:这里需要考虑用户的手动拖拽
#define YYMaxSections 100
@interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
@property(nonatomic,strong)NSArray *news;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property(nonatomic,strong)NSTimer *timer; @end @implementation YYViewController #pragma mark-懒加载
-(NSArray *)news
{
if (_news==nil) {
_news=[YYnews objectArrayWithFilename:@"newses.plist"];
self.pageControl.numberOfPages=self.news.count;
}
return _news;
} - (void)viewDidLoad
{
[super viewDidLoad];
//注册cell
// [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell]; [self.collectinView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem: inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
[self addNSTimer];
} //添加定时器
-(void)addNSTimer
{
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
//添加到runloop中
[[NSRunLoop mainRunLoop]addTimer:timer forMode:NSRunLoopCommonModes];
self.timer=timer;
} //删除定时器
-(void)removeNSTimer
{
[self.timer invalidate];
self.timer=nil;
} //自动滚动
-(void)nextPage
{
//1获取当前正在展示的位置
NSIndexPath *currentIndexPath=[[self.collectinView indexPathsForVisibleItems]lastObject]; //马上显示回最中间那组的数据
NSIndexPath *currentIndexPathRest=[NSIndexPath indexPathForItem:currentIndexPath.item inSection:YYMaxSections/];
[self.collectinView scrollToItemAtIndexPath:currentIndexPathRest atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];   //2计算出下一个需要展示的位置
NSInteger nextItem=currentIndexPathRest.item+;
NSInteger nextSection=currentIndexPathRest.section;
if (nextItem==self.news.count) {
nextItem=;
nextSection++;
}
NSIndexPath *nextIndexPath=[NSIndexPath indexPathForItem:nextItem inSection:nextSection];   //3通过动画滚动到下一个位置
[self.collectinView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES]; // //4)设置页码
// self.pageControl.currentPage=nextItem;
} #pragma mark- UICollectionViewDataSource
//一共多少组,默认为1组
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return YYMaxSections;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.news.count;
} -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
cell.news=self.news[indexPath.item];
NSLog(@"%p,%d",cell,indexPath.item);
return cell;
} #pragma mark-UICollectionViewDelegate
//当用户开始拖拽的时候就调用
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self removeNSTimer];
}
//当用户停止拖拽的时候调用
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self addNSTimer];
}
//设置页码
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int page=(int)(scrollView.contentOffset.x/scrollView.frame.size.width+0.5)%self.news.count;
self.pageControl.currentPage=page;
}
@end

补充说明:

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

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

04-28 07:47