使用UIImageView展现来自网络的图片

在iOS开发过程中，经常会遇到使用UIImageView展现来自网络的图片的情况，最简单的做法如下：

[cpp] view plaincopy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     self.imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)] autorelease];  
6.     self.imageView.layer.masksToBounds = YES;  
7.     self.imageView.layer.cornerRadius = 5.0f;  
8.     [self.imageView setBackgroundColor:[UIColor grayColor]];  
9.     [self.view addSubview:self.imageView];  
10.       
11.     NSURL *imageUrl = [NSURL URLWithString:IMAGE_URL];  
12.     UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];  
13.     self.imageView.image = image;  
14. }  

这么做，最直接的问题就是阻塞UI线程了。

于是考虑利用NSOperationQueue来异步加载图片：

[cpp] view plaincopy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.       
5.     operationQueue = [[NSOperationQueue alloc] init];  
6.       
7.     self.imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(110, 50, 100, 100)] autorelease];  
8.     self.imageView.layer.masksToBounds = YES;  
9.     self.imageView.layer.cornerRadius = 5.0f;  
10.     [self.imageView setBackgroundColor:[UIColor grayColor]];  
11.     [self.view addSubview:self.imageView];  
12.       
13.     NSInvocationOperation *op = [[NSInvocationOperation alloc] initWithTarget:self selector:@selector(downloadImage) object:nil];  
14.     [operationQueue addOperation:op];  
15. }  
16.   
17. - (void)downloadImage  
18. {  
19.     NSURL *imageUrl = [NSURL URLWithString:IMAGE_URL];  
20.     UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];  
21.     self.imageView.image = image;  
22. }  

这么做的话，就可以避免阻塞UI线程了。当图片异步加载完成后，就会展现出来。

但是，第二次进入该界面，还是要重新下载图片，用户体验不好，且浪费资源（比如耗电）。

于是，考虑缓存已经下载的图片。

模仿操作系统（Cache - Memory - Disk），缓存图片也可以采取两层模型：内存和磁盘。

保存到内存中比较简单，只需要用NSDictionary来维护即可。而保存到磁盘，涉及到本地文件读写，可以参考“文件和数据管理”。

首先需要创建一个缓存目录：

[cpp] view plaincopy

1. NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);  
2.         diskCachePath = [[[paths objectAtIndex:0] stringByAppendingPathComponent:@"ImageCache"] retain];  
3.           
4.         if (![[NSFileManager defaultManager] fileExistsAtPath:diskCachePath]) {  
5.             NSError *error = nil;  
6.             [[NSFileManager defaultManager] createDirectoryAtPath:diskCachePath  
7.                                       withIntermediateDirectories:YES  
8.                                                        attributes:nil  
9.                                                             error:&error];  
10.         }  

接着可以用图片名称或者URL或者hash过后的值作为key（本地文件名），写入到本地：

[cpp] view plaincopy

1. if (![[NSFileManager defaultManager] fileExistsAtPath:localPath]) {  
2.         [[NSFileManager defaultManager] createFileAtPath:localPath contents:localData attributes:nil];  
3.     }  

这样，在每次下载图片之前，先判断是否已经有缓存了，可以优化体验和性能。

我把完整的源代码写成Category以重用，放在GitHub上：https://github.com/siqin/OnlineImageView 。

Jason Lee @ Hangzhou

Blog: http://blog.csdn.net/jasonblog

Weibo: @思禽饮霜