TableView 的优化
TableView 的优化
1 TableView 优化的原理:
当我们用APP 访问新闻的时候,新闻中的内容并不是我们都喜欢的内容,因此我们会快速的滑过,但是TableView的加载机制是只要用户滑过该条新闻,就会加载新闻.因此会让用户体验很差. TableView的优化目的就是当用户快速滑过自己不喜欢的内容的时候不加载该部分内容的图片,待滑动停止或者减速的时候才加载当前页面的图片.
2 实现过程:
当我们用 SDWebImage异步加载图片时,会出现重用的 BUG.这是因为虽然 SDWebImage 实现了异步加载缓存,但是当加载完图片后再次发送网络请求时会直接加载缓存中的图片.注意,如果是 lazy 加载的时候,滑动过程中是不进行网络请求的,cell 上的图片就会发生重用.当滑动停止的时候才会加载当前 cell 上的图片,但是会有1~2秒的延迟.解决办法就是在模型对象中定义一个 UIImage 属性,异步下载图片后,用已经缓存到沙盒的图片给他进行赋值,这样才能在cellForRowAtIndexPath方法中判断这个 UIImage 对象时候为空.若为空,则进行网络请求,不为空,则将它赋值给 cell 的imageView对象.这样就能解决图片短暂重用的问题.
3 代码实现过程
@model类 |
#import <foundation /foundation.h> |
@interface NewsItem : NSObject |
@property (nonatomic,copy) NSString * newsTitle; |
@property (nonatomic,copy) NSString * newsPicUrl; |
@property (nonatomic,retain) UIImage * newsPic; // 存储每个新闻自己的image对象 |
- (id)initWithDictionary:(NSDictionary *)dic; |
// 处理解析 |
+ (NSMutableArray *)handleData:(NSData *)data; |
@end |
#import "NewsItem.h" |
#import "ImageDownloader.h" |
@implementation NewsItem |
- (void)dealloc |
{ |
self.newsTitle = nil; |
self.newsPicUrl = nil; |
self.newsPic = nil; |
[super dealloc]; |
} |
- (id)initWithDictionary:(NSDictionary *)dic |
{ |
self = [super init]; |
if (self) { |
self.newsTitle = [dic objectForKey:@"title"]; |
self.newsPicUrl = [dic objectForKey:@"picUrl"]; |
//从本地沙盒加载图像 |
ImageDownloader * downloader = [[[ImageDownloader alloc] init] autorelease]; |
self.newsPic = [downloader loadLocalImage:_newsPicUrl]; |
} |
return self; |
} |
+ (NSMutableArray *)handleData:(NSData *)data; |
{ |
//解析数据 |
NSError * error = nil; |
NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error]; |
NSMutableArray * originalArray = [dic objectForKey:@"news"]; |
//封装数据对象 |
NSMutableArray * resultArray = [NSMutableArray array]; |
for (int i=0 ;i<[originalArray count]; i++) { |
NSDictionary * newsDic = [originalArray objectAtIndex:i]; |
NewsItem * item = [[NewsItem alloc] initWithDictionary:newsDic]; |
[resultArray addObject:item]; |
[item release]; |
} |
return resultArray; |
} |
@end |
@图片下载类 |
#import <foundation foundation.h=""> |
@class NewsItem; |
@interface ImageDownloader : NSObject |
@property (nonatomic,copy) NSString * imageUrl; |
@property (nonatomic,retain) NewsItem * newsItem; //下载图像所属的新闻 |
//图像下载完成后,使用block实现回调 |
@property (nonatomic,copy) void (^completionHandler)(void); |
//开始下载图像 |
- (void)startDownloadImage:(NSString *)imageUrl; |
//从本地加载图像 |
- (UIImage *)loadLocalImage:(NSString *)imageUrl; |
@end |
#import "ImageDownloader.h" |
#import "NewsItem.h" |
@implementation ImageDownloader |
- (void)dealloc |
{ |
self.imageUrl = nil; |
Block_release(_completionHandler); |
[super dealloc]; |
} |
#pragma mark - 异步加载 |
- (void)startDownloadImage:(NSString *)imageUrl |
{ |
self.imageUrl = imageUrl; |
// 先判断本地沙盒是否已经存在图像,存在直接获取,不存在再下载,下载后保存 |
// 存在沙盒的Caches的子文件夹DownloadImages中 |
UIImage * image = [self loadLocalImage:imageUrl]; |
if (image == nil) { |
// 沙盒中没有,下载 |
// 异步下载,分配在程序进程缺省产生的并发队列 |
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ |
// 多线程中下载图像 |
NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]]; |
// 缓存图片 |
[imageData writeToFile:[self imageFilePath:imageUrl] atomically:YES]; |
// 回到主线程完成UI设置 |
dispatch_async(dispatch_get_main_queue(), ^{ |
//将下载的图像,存入newsItem对象中 |
UIImage * image = [UIImage imageWithData:imageData]; |
self.newsItem.newsPic = image; |
//使用block实现回调,通知图像下载完成 |
if (_completionHandler) { |
_completionHandler(); |
} |
}); |
}); |
} |
} |
#pragma mark - 加载本地图像 |
- (UIImage *)loadLocalImage:(NSString *)imageUrl |
{ |
self.imageUrl = imageUrl; |
// 获取图像路径 |
NSString * filePath = [self imageFilePath:self.imageUrl]; |
UIImage * image = [UIImage imageWithContentsOfFile:filePath]; |
if (image != nil) { |
return image; |
} |
return nil; |
} |
#pragma mark - 获取图像路径 |
- (NSString *)imageFilePath:(NSString *)imageUrl |
{ |
// 获取caches文件夹路径 |
NSString * cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]; |
// 创建DownloadImages文件夹 |
NSString * downloadImagesPath = [cachesPath stringByAppendingPathComponent:@"DownloadImages"]; |
NSFileManager * fileManager = [NSFileManager defaultManager]; |
if (![fileManager fileExistsAtPath:downloadImagesPath]) { |
[fileManager createDirectoryAtPath:downloadImagesPath withIntermediateDirectories:YES attributes:nil error:nil]; |
} |
#pragma mark 拼接图像文件在沙盒中的路径,因为图像URL有"/",要在存入前替换掉,随意用"_"代替 |
NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"]; |
NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName]; |
return imageFilePath; |
} |
@end</foundation> |
@这里只给出关键代码,网络请求,数据处理,自定义cell自行解决 |
#pragma mark - Table view data source |
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView |
{ |
// Return the number of sections. |
return 1; |
} |
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section |
{ |
// Return the number of rows in the section. |
if (_dataArray.count == 0) { |
return 10; |
} |
return [_dataArray count]; |
} |
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath |
{ |
static NSString *cellIdentifier = @"Cell"; |
NewsListCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier ]; |
if (!cell) { |
cell = [[[NewsListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease]; |
} |
NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; |
cell.titleLabel.text = item.newsTitle; |
//判断将要展示的新闻有无图像 |
if (item.newsPic == nil) { |
//没有图像下载 |
cell.picImageView.image = nil; |
NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating); |
// ??执行的时机与次数问题 |
if (self.tableView.dragging == NO && self.tableView.decelerating == NO) { |
[self startPicDownload:item forIndexPath:indexPath]; |
} |
}else{ |
//有图像直接展示 |
NSLog(@"1111"); |
cell.picImageView.image = item.newsPic; |
} |
cell.titleLabel.text = [NSString stringWithFormat:@"indexPath.row = %ld",indexPath.row]; |
return cell; |
} |
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath |
{ |
return [NewsListCell cellHeight]; |
} |
//开始下载图像 |
- (void)startPicDownload:(NewsItem *)item forIndexPath:(NSIndexPath *)indexPath |
{ |
//创建图像下载器 |
ImageDownloader * downloader = [[ImageDownloader alloc] init]; |
//下载器要下载哪个新闻的图像,下载完成后,新闻保存图像 |
downloader.newsItem = item; |
//传入下载完成后的回调函数 |
[downloader setCompletionHandler:^{ |
//下载完成后要执行的回调部分,block的实现 |
//根据indexPath获取cell对象,并加载图像 |
#pragma mark cellForRowAtIndexPath-->没看到过 |
NewsListCell * cell = (NewsListCell *)[self.tableView cellForRowAtIndexPath:indexPath]; |
cell.picImageView.image = downloader.newsItem.newsPic; |
}]; |
//开始下载 |
[downloader startDownloadImage:item.newsPicUrl]; |
[downloader release]; |
} |
- (void)loadImagesForOnscreenRows |
{ |
#pragma mark indexPathsForVisibleRows-->没看到过 |
//获取tableview正在window上显示的cell,加载这些cell上图像。通过indexPath可以获取该行上需要展示的cell对象 |
NSArray * visibleCells = [self.tableView indexPathsForVisibleRows]; |
for (NSIndexPath * indexPath in visibleCells) { |
NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; |
if (item.newsPic == nil) { |
//如果新闻还没有下载图像,开始下载 |
[self startPicDownload:item forIndexPath:indexPath]; |
} |
} |
} |
#pragma mark - 延迟加载关键 |
//tableView停止拖拽,停止滚动 |
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate |
{ |
//如果tableview停止滚动,开始加载图像 |
if (!decelerate) { |
[self loadImagesForOnscreenRows]; |
} |
NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate); |
} |
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView |
{ |
//如果tableview停止滚动,开始加载图像 |
[self loadImagesForOnscreenRows]; |
} |
TableView 的优化的更多相关文章
- 关于tableView的优化
现在市场上的iOS应用程序界面中使用最多的UI控件是什么? 答案肯定是UITableView,几乎每一款App都有很多的界面是由UITableView实现的,所以为了做出一款优秀的App,让用户有更好 ...
- TableView的优化
一:什么是TableView的优化以及为什么要优化 1)CPU(中央处理器)和GPU(图形处理器):CPU主要从事逻辑计算的一些工作:GPU主要从事图形处理方面的工作. 2)CPU和GPU的共同点: ...
- iOS之tableView性能优化/tableView滑动卡顿?
本文围绕以下几点展开tableView性能优化的论述? 1.UITableViewCell重用机制? 2.tableView滑动为什么会卡顿? 3.优化方法? 4.总结 1.UITableViewCe ...
- tableView性能优化
针对滑动时出现卡的现象 参考:http://blog.sina.cn/dpool/blog/s/blog_b638dc890101ep3x.html?plg_nld=1&plg_auth=1& ...
- iOS | TableView的优化
TableView是iOS组件中最常见.最重要的组件之一,在开发中常常用到,所以对其进行优化是一项必不可少的基本功. 主要从几个最常用的方面来对其优化: 1.重用机制 重用机制是cell最基础的一项优 ...
- iOS tableview性能优化及分析
1.最常用的就是cell的重用, 注册重用标识符 每次滑动cell时需要先去缓存池中寻找可循环利用的cell,如果没有则再重新创建cell 2.减少cell中控件的数量 view对象尽量缩减控件的数量 ...
- TableView的性能优化
现在市场上的iOS应用程序界面中使用最多的UI控件是什么? 答案肯定是UITableView,几乎每一款App都有很多的界面是由UITableView实现的,所以为了做出一款优秀的App,让用户有更好 ...
- UITableView优化
作为iOS开发,UITableView可能是平时我们打交道最多的UI控件之一,其重要性不言而喻. 关于TableView,我想最核心的就是UITableViewCell的重用机制了. 简单来说呢就是当 ...
- iOS-UITableView的优化(纯手打原创)
TableView的优化 一:什么是TableView的优化以及为什么要优化 1)CPU(中央处理器)和GPU(图形处理器) CPU主要从事逻辑计算的一些工作 GPU主要从事图形处理方面的工作 2 ...
随机推荐
- Mac中的Python安装selenium,结合chrom及chromdriver使用
一.安装selenium 1.在终端通过命令安装 pip3 install -U selenium 二.准备环境 1.在电脑中安装谷歌浏览器chrom,和下载估计浏览器驱动chromdriver,以下 ...
- Abp vNext 自定义 Ef Core 仓储引发异常
问题 在使用自定义 Ef Core 仓储和 ABP vNext 注入的默认仓储时,通过两个 Repository 进行 Join 操作,提示 Cannot use multiple DbContext ...
- Python 基础之 I/O 模型
一.I/O模型 IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接 ...
- 平滑启动shell脚本
# 平滑关闭和启动 Spring Boot 程序#设置端口SERVER_PORT="8090"#当前时间time=`date +%Y-%m-%d`#设置应用名称JAR_NAME=& ...
- etcd-operator快速入门完全教程
Operator是指一类基于Kubernetes自定义资源对象(CRD)和控制器(Controller)的云原生拓展服务,其中CRD定义了每个operator所创建和管理的自定义资源对象,Contro ...
- SqlServer2005 查询 第三讲 between
在数据库的查询中最重要的是要知道命令的顺序,因为在sql命令中有许多的参数,例如distinct,top,in,order by,group by.......如果你不能理解什么时候该执行什么的话,很 ...
- nyoj 78-圈水池 (凸包)
78-圈水池 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:6 难度:4 题目描述: 有一个牧场,牧场上有很多个供水装置,现在牧场的主人想要用篱笆把这些供水装置圈起来, ...
- package.json文件内容介绍
概述 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文件, ...
- 阿里云ECS服务器部署HADOOP集群(三):ZooKeeper 完全分布式集群搭建
本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建,多添加了一个 datanode 节点 . 1 节点环境介绍: 1.1 环境介绍: 服务器:三台阿里 ...
- 四 linuk常用命令 1. 文件处理命令
一. 命令格式与目录处理命令ls 命令格式 命令格式:命令 [-选项] [参数] 例:ls -la /etc 说明: 1.个别命令使用不遵循此格式 2. 当有多个选项时,可以写在一起 3.简化选项与完 ...