背景:
1.在使用了MJRefresh之后,当UITableView滑到底部的时候需要继续上拉(比之前的上拉费力)才能进行刷新。
效果图:
2.当每个Cell上有多张图片,且图片质量较大的时候,用户滑到下一页但页面上的图片还没有显示出来。
需求:
优化UITableView,提高用于体验。
1.不让用户看到加载更多的字样
2.滑到下一页的时候尽量快地显示出下一页的图片。
思路:
1.上拉UITableView的时候,让MJRefresh提前去加载下一页的数据。
2.上拉UITableView的时候,提前下载下一屏上的图片。
代码:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
CustomTableViewCell * cell = [CustomTableViewCell cellWithTableView:tableView];
NSDictionary * dic = self.dataArr[indexPath.row];
NSString * picStr = dic[@"pic"];
[cell.picView sd_setImageWithURL:[NSURL URLWithString:picStr]];
NSArray * visibleRows = [tableView indexPathsForVisibleRows];
NSLog(@"count:%lu", visibleRows.count);
NSInteger nextRow = indexPath.row + visibleRows.count;
if (nextRow < self.dataArr.count) {
NSLog(@"nextRow:%lu", nextRow);
NSDictionary * nextDic = self.dataArr[indexPath.row];
NSString * nextPicStr = nextDic[@"pic"];
[self.imageV sd_setImageWithURL:[NSURL URLWithString:nextPicStr]];
}
NSInteger row = indexPath.row;
if (self.dataArr.count - row < visibleRows.count) {
[self.tableView.mj_footer beginRefreshing];
}
return cell;
}
具体实现:
1.在cellForRowAtIndexPath:方法中获取每个cell的行数,当数据源中未展示的数据不够下一屏的数据的时候就去利用MJRefresh加载下一页的数据。代码实现:
if (self.dataArr.count - row < visibleRows.count) {
[self.tableView.mj_footer beginRefreshing];
}
2.在包含UITableView的当前页面去创建一个UIImageView作为当前Controller的一个成员变量,记为picView,但并不添加到当前Controller上(为的是利用该UIImageView去下载图片)。在cellForRowAtIndexPath:方法中在利用当前Cell上的UIImageView去下载图片的同时利用picView去下载数据源中还未展示的cell上的UIImageView上要显示的图片。
代码实现:
if (nextRow < self.dataArr.count) {
NSDictionary * nextDic = self.dataArr[indexPath.row];
NSString * nextPicStr = nextDic[@"pic"];
[self.imageV sd_setImageWithURL:[NSURL URLWithString:nextPicStr]];
}
注意:要对picView要去下载的图片所在的cell的行数做一个判断,如果超出了数据源的长度就不去下载了。
demo地址:
https://gitee.com/liangsenliangsen/uitableview_improves_user_experience
本篇文章到这里就结束了,愿大家加班不多工资多,男同胞都有女朋友,女同胞都有男朋友。😊