iOS教程：使用MKNetworkKit图像高速缓存和加载缩略图

作者博客http://blog.mugunthkumar.com/coding/ios-tutorial-image-cache-and-loading-thumbnails-using-mknetworkkit/#Source_Code

内容

步骤1：创建一个Flickr引擎
第2步：创建用于存储缓存的Flickr thumbanils自定义缓存目录
第3步：写一个方法列出Flickr图片的指定标签
第4步：创建用于装载Flickr图片自定义表视图单元格
第5步：清除以前加载的图像，如果单元格将被重用

第6步：淡入像苹果挂车应用程序的缩略图

 

        从反馈到目前为止，图像缓存是MKNetworkKit的一个方面，开发人员不理解得很好。在这篇文章中，我将尝试解释如何使用MKNetworkKit进行图像缓存和加载缩略图。
      缩略图通常用在iOS应用程序从Facebook的饲料或Flickr缩略图对于一个给定的标签，在许多类似案件加载好友的头像照片。
MKNetworkEngine是一件轻而易举的添加这个功能到你的应用程序。什么不是？随着MKNetworkKit ，你会知道，如果响应图像是从高速缓存或加载的第一次。利用这些信息，你可以在“淡入”你的缩略图时加载的第一次（像苹果的iTunes电影预告片应用程序）的图像。

已完成的例子看起来是这样的。

       说了这么多，让我们动手用一些实际的代码。在这个例子中，我将向您展示如何从Flickr的图像加载在一个表视图控制器异步。
步骤1：创建一个Flickr引擎
易peasy 。创建MKNetworkEngine的一个子类，让我们将其命名为“ FlickrEngine ” 。与api.flickr.com初始化你的flickr引擎作为主机应用程序中的委托。
第2步：创建用于存储缓存的Flickr thumbanils自定义缓存目录
覆盖cacheDirectoryName并返回一个自定义的目录存放缓存缩略图。

  
  

   
   
-(NSString*) cacheDirectoryName {
 
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString *cacheDirectoryName = [documentsDirectory stringByAppendingPathComponent:@"FlickrImages"];
    return cacheDirectoryName;
}
 
       
 
        
 
       
  
  

这一步是可选的。但是，因为缩略图可以很容易地占据宝贵的磁盘空间，你可能想清除它们每隔一段时间。 MKNetworkEngine提供了一个方便的方法（ emptyCache ）清空缓存目录为特定的引擎。此方法的默认实现移除引擎的缓存目录中的所有文件。如果你不重写cacheDirectoryName并为您的发动机提供了一个独特的缓存目录，你最终会清空共享的缓存目录，当你调用emptyCache 。
第3步：写一个方法列出Flickr图片的指定标签
到现在为止，你已经知道，在创建使用MKNetworkKit网络请求是一个没有脑子。下面显示了如何创建用于加载图像对于一个给定的标签的要求。

-(void) imagesForTag:(NSString*) tag onCompletion:(FlickrImagesResponseBlock) imageURLBlock onError:(MKNKErrorBlock) errorBlock {   MKNetworkOperation *op = [self operationWithPath:FLICKR_IMAGE_URL([tag urlEncodedString])];   [op onCompletion:^(MKNetworkOperation *completedOperation) {   NSDictionary *response = [completedOperation responseJSON]; imageURLBlock([[response objectForKey:@"photos"] objectForKey:@"photo"]);   } onError:^(NSError *error) {   errorBlock(error); }];   [self enqueueOperation:op]; }

该FLICKR_IMAGE_URL宏定义为

#define FLICKR_IMAGE_URL(__TAG__) [NSString stringWithFormat:@"services/rest/?method=flickr.photos.search&api_key=%@&tags=%@&per_page=200&format=json&nojsoncallback=1", FLICKR_KEY, __TAG__]

需要注意的是，主机名api.flickr.com就会自动当您在此引擎的创建操作前缀。

你应该产生一个新的Flickr的API密钥，并将其替换FLICKR_KEY宏。您可以免费创建一个在这里。 （对于运行这个例子，你可以用我的钥匙）
第4步：创建用于装载Flickr图片自定义表视图单元格
在这个自定义单元格，写一个方法setFlickrData ：该更新单元收到你的字典通过调用Flickr的REST API

-(void) setFlickrData:(NSDictionary*) thisFlickrImage {   self.titleLabel.text = [thisFlickrImage objectForKey:@"title"]; self.authorNameLabel.text = [thisFlickrImage objectForKey:@"owner"]; self.loadingImageURLString = [NSString stringWithFormat:@"http://farm%@.static.flickr.com/%@/%@_%@_s.jpg", [thisFlickrImage objectForKey:@"farm"], [thisFlickrImage objectForKey:@"server"], [thisFlickrImage objectForKey:@"id"], [thisFlickrImage objectForKey:@"secret"]];   self.imageLoadingOperation = [ApplicationDelegate.flickrEngine imageAtURL:[NSURL URLWithString:self.loadingImageURLString] onCompletion:^(UIImage *fetchedImage, NSURL *url, BOOL isInCache) {   if([self.loadingImageURLString isEqualToString:[url absoluteString]]) { self.thumbnailImage.image = fetchedImage; }]; }

仔细注意使用变量self.loadingImageURLString的。如果你不保存图像加载的URL中的伊娃，你的形象将继续以前的操作完成时进行更新。为了避免这种情况，要么取消当细胞被重用的操作，或检查返回的URL是加载此单元格的原始URL （通过将其存储在伊娃） 。

由于在此承诺， MKNetworkEngine的imageAtURL方法将返回所创建的实际操作。你应该保留这一点，并取消它的时候没有必要的。

第5步：清除以前加载的图像，如果单元格将被重用

你应该通过重写prepareForReuse方法清除以前加载的图像。这是一个班轮

-(void) prepareForReuse {   self.thumbnailImage.image = nil; [self.imageLoadingOperation cancel]; }

如果你不写这篇文章，你会看到老图片的单元格在加载新的形象。

而不是“无” ，你也可以在这里显示一个默认的占位符图像。
您还应该考虑取消旧imageLoadingOperation ，以便加载最新可见细胞快。如果没有取消操作，当用户滚动到快速列表的底部时，发动机负荷从所述第一小区的所有图像（包括图像对细胞现在已隐藏和重复使用），而且通过降低图像加载操作，目前可见的细胞。你可以从代码中通过注释出来，并检查性能进行测试。
第6步：淡入像苹果挂车应用程序的缩略图
MKNetworkEngine的imageAtURL方法在一个块方法返回的图像。块的方法， onCompletion看起来是这样的。

^(UIImage *fetchedImage, NSURL *url, BOOL isInCache) {   if([self.loadingImageURLString isEqualToString:[url absoluteString]]) { self.thumbnailImage.image = fetchedImage; }]; }

^(UIImage *fetchedImage, NSURL *url, BOOL isInCache) {   if([self.loadingImageURLString isEqualToString:[url absoluteString]]) { self.thumbnailImage.image = fetchedImage; }]; }

如果变量isInCache是假的，你可以在“淡入”的形象，一个漂亮的UI触摸添加到您的应用程序。下面的代码块说明了这一点。

^(UIImage *fetchedImage, NSURL *url, BOOL isInCache) {   if([self.loadingImageURLString isEqualToString:[url absoluteString]]) {   if (isInCache) { self.thumbnailImage.image = fetchedImage; } else { UIImageView *loadedImageView = [[UIImageView alloc] initWithImage:fetchedImage]; loadedImageView.frame = self.thumbnailImage.frame; loadedImageView.alpha = 0; [self.contentView addSubview:loadedImageView];   [UIView animateWithDuration:0.4 animations:^ { loadedImageView.alpha = 1; self.thumbnailImage.alpha = 0; } completion:^(BOOL finished) { self.thumbnailImage.image = fetchedImage; self.thumbnailImage.alpha = 1; [loadedImageView removeFromSuperview]; }]; } } }

源代码
完整的源代码可以作为MKNetworkKit的Github上存储库中的演示。

https://github.com/MugunthKumar/MKNetworkKit