iOS实现无限循环滚动的TableView实战教程

前言

本文主要给大家介绍了如何实现一个可以无限循环的TableView的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧。

先来看看效果:

思路

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

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

本地下载:http://xiazai.jb51.net/201705/yuanma/SUTableView(jb51.net).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • iOS实现无限循环滚动的TableView实战教程

    前言 本文主要给大家介绍了如何实现一个可以无限循环的TableView的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 先来看看效果: 思路 条条大路通罗马,个人分析下以下思路的可行性: 1.借鉴无限广告轮播的思路.可行性不高,主要是列表头部和尾部的衔接不够自然,而且快速滑动不够流畅. 2.使用TableView+3倍长度dataSource.可行性一般,在使用过程中滑动流畅,但是由于重复的数据源,可能导致在处理事件时需要特别对数据进行处理避免重复,另外此方法不能重用,总让有强迫

  • iOS中无限循环滚动简单处理实现原理分析

    说下原理: 1./*初始化/ + (instancetype)loopScrollViewWithFrame:(CGRect)frame; 将背景collectinview视图初始化设置 代理和数据源 . 布局 2.在激活initwithFrame后触发 layoutSubviews //默认滚动到要显示的第一张图片 if (self.imageCollectionView.contentOffset.x == 0) { NSIndexPath *indexPath = [NSIndexPath

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • iOS实现无限循环轮播图效果

    本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 #pragma mark - pagecontrol事件 // 这个是点击小圆点条进行切换,到边不能循环 - (void)pageControlTouched { // 点击的时候停止计时 [self.kvTimer setFireDate:[NSDate distantFutu

  • Android ViewPager实现智能无限循环滚动回绕效果

    android系统提供的ViewPager标准方式是左右可以自由滑动,但是滑动到最左边的极限位置是第一个page,滑动到最右边的位置是最后一个page,当滑动到最左或者最右时候,就不能再滑动/滚动了,这是Android系统默认的ViewPager实现方式. 但是有些情况下开发者可能希望ViewPager能够智能的无限循环滚动回绕,比如现在总共有编号1, 2, 3, 4, 5的5个Page. (1)当用户手指从右往左滚动到最右边/最后面的页面5时候,如果此时用户继续拖住ViewPager往左边滑动

  • Android ListView实现无限循环滚动

    本文实例为大家分享了Android无限循环滚动的具体代码,供大家参考,具体内容如下 因项目需要循环展示列表数据,所以就实现了这个无限循环滚动的 LIstView.先说一下原理,原理呢,其实很简单,首先将要展示的数据循环展示三遍 监听ListView的滚动事件,当ListView滚动到第一遍第第二个时,ListView变自动跳到第二遍的第二个,同理,如果ListView滚动到倒数第一个时,ListView自动跳转到第二遍的倒数第一个,然后可以不停的向上或者向下滑动,永远不会到头,废话少说,上 代码

  • Vue实现一种简单的无限循环滚动动画的示例

    本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i

  • react实现无限循环滚动信息

    本文实例为大家分享了react实现无限循环滚动信息的具体代码,供大家参考,具体内容如下 需求 后端传递过来的数据滚动显示,鼠标移入后停止滚动,鼠标移出后继续滚动,参考公司门户的公告信息栏 实现思路 思路一 在componentDidMount中定义一个定时器,每过1000ms触发一次事件,将数组中第一条数据push到数组中,再删除掉第一条数据,最后给div添加onMouEnter和onMouseLeave事件,让鼠标移入时清除定时器,鼠标移出时重新开启定时器. 代码: class Roll ex

  • Unity3d实现无限循环滚动背景

    在游戏项目中我们常常看到商城的广告牌,几张广告图片循环滚动,类似跑马灯,现在我将讨论一种实现方法,并提供一个管理类,大家可以直接使用. 实现原理:背景图片循环滚动的原理很简单:两张图片向一个方向移动,当达某张图片到临界区域时将图片放在后面,依次循环. 在实际项目中,广告牌显示的图片数量不确定,例如某个假期活动会上很多新品,此时我们需要动态的创建显示的图片(一般在配置表读取数据),如果需要显示分类标签还得动态生成分类标签. 综上所述,一个完整的广告牌组件应该具有以下功能: - 无限循环的滚动背景图

  • Android实现横向无限循环滚动的单行弹幕效果

    本期将带领大家实现一个这样的效果,支持无限循环的单行弹幕效果. 实现思路分析 要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2.弹幕要支持无限滚动,出于性能要求,如果不在屏幕内的,应该移除,不能无限追加到内存里面. 拆分完需求要素之后,针对上面的需求要素,做一下思路解答: 1.对于滚动和超出屏幕后移除,可以使用动画来实现,动画从屏幕右边开始移动到屏幕左边,监听如果已经动画结束,则remove掉布局. 2.无限循环效果,可以

随机推荐