美文网首页征服iOSswift编程开发iOS
iOS实用篇:无限循环滚动的TableView

iOS实用篇:无限循环滚动的TableView

作者: 明仔Su | 来源:发表于2016-08-09 02:09 被阅读6583次

前言

废话少说,今天来看看如何实现一个可以无限循环的TableView
先来看看效果:

无限循环TableView预览.gif

思路

条条大路通罗马,个人分析下以下思路的可行性:

1、借鉴无限广告轮播的思路。可行性不高,主要是列表头部和尾部的衔接不够自然,而且快速滑动不够流畅。

2、使用TableView+3倍长度dataSource。可行性一般,在使用过程中滑动流畅,但是由于重复的数据源,可能导致在处理事件时需要特别对数据进行处理避免重复,另外此方法不能重用,总让有强迫症的人感觉不够优雅。。。

3、使用TableView子类+数据源拦截器。可行性较高,在使用过程中滑动流畅,而且在代理方法中并不需要做特殊处理,可封装重用。

4、广大读者们提供的更优秀的思路。

实现

我们通过创建TableView的子类,在子类中对dataSource进行处理。

如果直接将子类自身设为子类的dataSource,创建另外一个dataSource作为对外的delegate,将自身不处理的代理消息转发给对外的delegate,这样要求自身实现所有的代理方法,非常蛋疼。
因此,我们创建一个拦截器,通过拦截器决定将消息发送到TableView子类内部或者是其dataSource,这样简洁又比较优雅(装逼)。
注:使用此方法实现无限循环的TableView,需要对ObjC的消息转发有一定理解。

1、创建3倍长度dataSource,并在滑动到头部或者尾部时进行contentOffset的reset,显示到中间的位置

- (void)layoutSubviews {
    [self resetContentOffsetIfNeeded];
    [super layoutSubviews];
}

- (void)resetContentOffsetIfNeeded {
    CGPoint contentOffset  = self.contentOffset;
    //头部
    if (contentOffset.y < 0.0) {
        contentOffset.y = self.contentSize.height / 3.0;
    }
    //尾部
    else if (contentOffset.y >= (self.contentSize.height - self.bounds.size.height)) {
        contentOffset.y = self.contentSize.height / 3.0 - self.bounds.size.height;
    }
    [self setContentOffset: contentOffset];
}

2、创建一个拦截器

@interface SUTableViewInterceptor : NSObject

@property (nonatomic, weak) id receiver;
@property (nonatomic, weak) id middleMan;

@end

3、将拦截器设置为TableView子类的dataSource

- (void)setDataSource:(id<UITableViewDataSource>)dataSource {
    self.dataSourceInterceptor.receiver = dataSource;
    [super setDataSource:(id<UITableViewDataSource>)self.dataSourceInterceptor];
}

- (SUTableViewInterceptor *)dataSourceInterceptor {
    if (!_dataSourceInterceptor) {
        _dataSourceInterceptor = [[SUTableViewInterceptor alloc]init];
        _dataSourceInterceptor.middleMan = self;
    }
    return _dataSourceInterceptor;
}

4、在子类中实现需要加工处理的代理方法

- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section {
    self.actualRows = [self.dataSourceInterceptor.receiver tableView:tableView numberOfRowsInSection:section];
    return self.actualRows * 3;
}

- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSIndexPath * actualIndexPath = [NSIndexPath indexPathForRow:indexPath.row % self.actualRows inSection:indexPath.section];
    return [self.dataSourceInterceptor.receiver tableView:tableView cellForRowAtIndexPath:actualIndexPath];
}

5、在拦截器中转发消息(如果子类实现了代理方法,则转发给子类;如果子类没有实现,则转发给外部的代理)

@implementation SUTableViewInterceptor

#pragma mark - forward & response override
- (id)forwardingTargetForSelector:(SEL)aSelector {
    if ([self.middleMan respondsToSelector:aSelector]) return self.middleMan;
    if ([self.receiver respondsToSelector:aSelector]) return self.receiver;
    return [super forwardingTargetForSelector:aSelector];
}

- (BOOL)respondsToSelector:(SEL)aSelector {
    if ([self.middleMan respondsToSelector:aSelector]) return YES;
    if ([self.receiver respondsToSelector:aSelector]) return YES;
    return [super respondsToSelector:aSelector];
}

@end

到此,自定义的TableView基本完成,整理一下思路,不难理解我们是通过拦截器将代理消息转发到子类内部,子类内部则通过外部代理提供的dataSource来拷贝成3份,来组成一个3倍于普通长度的TableView,并在其滑动时进行处理,形成可以无限循环滚动的效果。
这样,在外部看起来,使用这个TableView和普通TableView没有什么不同,但是多了一个可以循环滚动的“属性”,当然,你也可以将其封装成可设置的属性,方便切换普通模式和循环滚动模式。

下面,用这个TableView的子类来试着创建一个可以循环滚动的列表看看:

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.tableView];
}

- (UITableView *)tableView {
    if(!_tableView) {
        _tableView = [[SUTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.showsVerticalScrollIndicator = NO;
        _tableView.rowHeight = 150.0;
        [_tableView registerNib:[UINib nibWithNibName:@"LiveCell" bundle:nil] forCellReuseIdentifier:liveCellID];
    }
    return _tableView;
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 5;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    LiveCell * cell = [self.tableView dequeueReusableCellWithIdentifier:liveCellID];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.descLabel.text = [NSString stringWithFormat:@"第 %ld 个主播频道", indexPath.row + 1];
    return cell;
}

怎么样,强迫症是不是舒缓了,是不是轻松多了~~~

Demo

GitHub地址:SUTableView

Next

布吉岛布吉岛

相关文章

网友评论

  • wwwbbat:写死UITableView的行数为数据源个数的一个很大的整数倍就可以了,自行根据row填充数据,初始化时,将UITableView设置contentOffset到中间就行了,同时要屏蔽点击状态栏回顶部这个功能。没人会蛋疼到真的上拉滑到底部的,对用户来说,就是无限循环滚动。
  • 吃你煮的鱼:作者还在简书吗?用你这个方式确实可以实现,但是在网络请求数据填充后会有CPU 100%页面卡死的情况出现,怎样解决呢?
    HappyJiuOk:是不是放到storyboard上边了?
  • 跳跳虾:- (BOOL)respondsToSelector:(SEL)aSelector 重写这个方法是什么用意???
  • HappyJiuOk:storyboard加载 打开 CPU 100%
  • 找不到好的ID:返回两个出bug的 兄弟
    找不到好的ID:@_尐様 异步是会卡死的
    _尐様:你好,问一下,为什么接入网络数据就卡死了
    self.lastPrizeArray = [BigWheelPrizeRecordModel mj_objectArrayWithKeyValuesArray:[JSONObject valueForKey:@"data"]];
    [self.lastAwardListView.awardLisTableView reloadData];
    明仔Su:@找不到好的ID datasource只有两个元素的情况吗?这个加个高度不够一屏不做循环处理就行
  • LByy:楼主你好,最近也在考虑一个tableview上下无限滚动的效果,但是如果数据源会进行改变的,你的这种思路,在进行下拉加载新数据上拉加载新数据的时候还可以处理吗?期待你的恢复。
    跨行程序员:请问你做出来了吗?
    明仔Su:@LByy 可以的,我只是提供实现的思路,你理解了,改起来是没问题
  • iOS_渔翁:自动滚动呢???tableview10条数据 自动轮播 怎么搞
  • __夏至未至:有点奇怪的是为什么用了拦截器就可以很顺畅的滚动,但是如果不加的话会不顺畅,我把拦截器里的东西用self和datasource代替就达不到效果?
    AnnZhu:@明仔Su 不懂,真的不懂。拦截器为什么能起作用? 我用模拟器运行了代码,但是滚动的时候有时候会出现白屏,这又是问什么呢
    明仔Su:@__夏至未至 这个逻辑问题,你画图理一下就理解了
  • gychaosuper:没看懂这个 设置contentoffset 和 广告图轮播 datasource添加收尾数据的,怎么不一样?
  • GeniusWong:你好,循环很不错。 但是有一个问题 , 我的 ScrollView 是要判断向左、向右滑的, 这样循环的话,每到了临界位置,就会判断出错。
  • ihere洋:我想要的效果是,当向上或者是向下滑动一定的距离时则移动到前一个或者后一个,类似直播的效果,我的思路是通过contentOffSetY值来实现,可是没有达到预期的效果,能指点一下吗?
    ihere洋:@明仔Su 我将cell设置成了屏幕大小,用代理方法scrollViewWillBeginDecelerating来判断手指移出时scrollView的contentOffset的y值移动了多少距离,然后判断是否需要向上移或向下移,移动是改变tableView的setContentOffset来实现的。可是scrollView的contentOffset的y值根据图片的数量移动时的规律是怎样的?
    明仔Su:@ihere洋 你这样滚动会不流畅吧,我提供的Demo里cell设置为屏幕大小,设置pagrenable,就达到直播无限滚动切换主播频道的效果
  • KKKKaras:不错 刚好要用到
  • 讨厌下雨的鱼:点击cell的时候想要相同编号的cell做相同的跳转,是否需要进行判断
    明仔Su:@这位壮士不太冷 在子类加点击代理处理一下,过程类似另外两个代理方法
  • CoderFarmer:如果我的数据只有一个cell怎么办?
    潘烨:当一个cell 滚动的时候,CPU会卡死
    明仔Su:@zsyfm 如果cell不够一屏就没必要循环滚动,在子类里面判断一下就好了,我的Demo没有加,只是简洁演示实现过程
  • 孤独的根号五:路子真野...
    明仔Su:@孤独的根号五 请赐教正路怎么走

本文标题:iOS实用篇:无限循环滚动的TableView

本文链接:https://www.haomeiwen.com/subject/twnrsttx.html