IOS開發之異步加載網絡圖片並緩存本地實現瀑布流（二）

在上一篇博客中，咱們實現了異步加載圖片的功能，因爲上次的時間問題，講的比較簡單因此在這篇文章中，我對前面代碼中涉及到得關鍵代碼再作一次詳細的解釋。

先看一個函數，

[objc] view plaincopy

1. /* 

2.  * @brief 圖片加載通用函數 

3.  * @parma imageName 圖片名 

4.  */  

5. - (void)imageStartLoading:(NSString *)imageName{  

6.     NSURL *url = [NSURL URLWithString:imageName];  

7.     if([_fileUtil hasCachedImage:url]){  

8.         UIImageView *imageView = [[UIImageView alloc] init];  

9.         NSString *path = [_fileUtil pathForUrl:url];  

10.         imageView = [_imageLoad compressImage:MY_WIDTH/3 imageView:nil imageName:path flag:NO];  

11.         [self addImage:imageView name:path];  

12.         [self adjustContentSize:NO];  

13.     }else{  

14.         UIImageView *imageView = [[UIImageView alloc] init];  

15.         NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:url, @"URL",  

16.                              imageView, @"imageView", nil nil];  

17.         [NSThread detachNewThreadSelector:@selector(cacheImage:) toTarget:[ImageCacher shareInstance] withObject:dic];  

18.     }  

19. }  

這個函數的做用是爲每一張網絡圖片開啓一個下載線程，可是由於該程序用到了圖片緩存的技術，因此在每次開線程下載圖片的時候都會去本地緩存目錄查找一下，

該圖片是否已經存在，若是存在則直接加載在視圖中。通常OC的線程函數有三個，NSThread, Cocoa Operations,和GCD，（想要了解三者的異同點可查看：點擊打開連接），

這裏我用了比較輕量級的NSThread,detachNewThreadSelector函數中所傳的函數名：cacheImage是類ImageCache中得函數，這裏經過iOS開發中使用的比較多的單例模式，

獲得了ImageCache的句柄，參數dic中主要存放了圖片的網絡地址以及imageView用來add圖片進視圖以及根據圖片的大小壓縮成合適的大小.

接下來是cacheImage函數：

[objc] view plaincopy

1. - (void)cacheImage:(NSDictionary*)dic{  

2.     NSURL *url = [dic objectForKey:@"URL"];  

3.     NSFileManager *fileManage = [NSFileManager defaultManager];  

4.     NSData *data = [NSData dataWithContentsOfURL:url];  

5.       

6.     NSString *fileName = [_fileUtil pathForUrl:url];  

7.     if(data){  

8.         [fileManage createFileAtPath:fileName contents:data attributes:nil];  

9.     }  

10.       

11.     UIImageView *imageView = [dic objectForKey:@"imageView"];  

12.     imageView.image = [UIImage imageWithData:data];  

13.     imageView = [_imageLoader compressImage:MY_WIDTH/3 imageView:imageView imageName:nil flag:YES];  

14.     [self.myDelegate addImage:imageView name:fileName];  

15.     [self.myDelegate adjustContentSize:NO];  

16. }  

該函數用來將下載下來的圖片緩存進入文件沙盒中（緩存文件能夠本身定義並指定）,而且按照圖片的大小進行等比例壓縮，固定寬度是屏幕的三分之一大小，這樣一來，

圖片顯示就不會出現不全或失真的現象。因爲ImageCache和MyScrollView是兩個獨立的類，因此這裏經過使用ios的delegate(代理)來進行圖片在scrollView上的加載，

（什麼是代理模式:點擊打開連接）.

下面咱們來看如何在沙盒中創建緩存文件夾，其實緩存文件夾跟普通的文件夾同樣，只是該文件夾是專門用來存放緩存文件的而已。類代碼以下所示：

[objc] view plaincopy

1. //  

2. //  FileUtil.m  

3. //  Test515  

4. //  

5. //  Created by silicon on 14-5-30.  

6. //  Copyright (c) 2014年 silicon. All rights reserved.  

7. //  

8.   

9. #import "FileUtil.h"  

10.   

11. @implementation FileUtil  

12.   

13. + (FileUtil *)shareInstance{  

14.     static FileUtil *instance;  

15.     static dispatch_once_t onceToken;  

16.     dispatch_once(&onceToken, ^{  

17.         instance = [[self alloc] init];  

18.     });  

19.       

20.     return instance;  

21. }  

22.   

23. /* 

24.  @breif 建立緩存文件夾 

25.  */  

26. - (void)createPathInDocumentDirectory{  

27.     NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);  

28.     NSString *diskCachePath = [[[paths objectAtIndex:0] stringByAppendingPathComponent:@"ImageCache"] retain];  

29.     NSLog(@"%@", diskCachePath);  

30.       

31.     if(![[NSFileManager defaultManager] fileExistsAtPath:diskCachePath]){  

32.         NSError *error = nil;  

33.         [[NSFileManager defaultManager] createDirectoryAtPath:diskCachePath  

34.                                   withIntermediateDirectories:YES  

35.                                                    attributes:nil  

36.                                                         error:&error];  

37.     }  

38. }  

39.   

40. /* 

41.  @breif     獲取沙盒中文檔目錄 

42.  @param     fileName:文件名字 

43.  */  

44. - (NSString *)pathInDocumentDirectory:(NSString *)fileName{  

45.     NSArray *fileArray = NSSearchPathForDirectoriesInDomains(NSCachesDirectory,  

46.                                                              NSUserDomainMask, YES);  

47.     NSString *cacheDirectory = [fileArray objectAtIndex:0];  

48.     return [cacheDirectory stringByAppendingPathComponent:fileName];  

49. }  

50.   

51. /* 

52.  @breif     獲取沙盒中緩存文件目錄 

53.  @param     fileName:文件名字 

54.  */  

55. - (NSString *)pathInCacheDirectory:(NSString *)fileName{  

56.     NSArray *fileArray = NSSearchPathForDirectoriesInDomains(NSCachesDirectory,  

57.                                                              NSUserDomainMask, YES);  

58.     NSString *cacheDirectory = [fileArray objectAtIndex:0];  

59.     return [cacheDirectory stringByAppendingPathComponent:fileName];  

60. }  

61.   

62. /* 

63.  @breif     判斷是否已經緩存 

64.  @param     url:圖片名稱 

65.  */  

66. - (BOOL)hasCachedImage:(NSURL *)url{  

67.     NSFileManager *fileManager = [NSFileManager defaultManager];  

68.     if([fileManager fileExistsAtPath:[self pathForUrl:url]]){  

69.         return YES;  

70.     }else{  

71.         return NO;  

72.     }  

73. }  

74.   

75. /* 

76.  @breif     根據URL的給圖片命名 

77.  @param     url:圖片url 

78.  */  

79. - (NSString *)pathForUrl:(NSURL *)url{  

80.     return [self pathInCacheDirectory:[NSString stringWithFormat:@"qiaoqiao-%u", [[url description] hash]]];  

81. }  

82.   

83. @end  

在此次的demo中，我新加入了用戶能夠點擊圖片放大 並能夠左右滑動的功能，其實實現起來很簡單，我一開始爲每個ScrollView 中得ImageView都設置了tag值，而且添加了

手勢（UITapGestureRecognizer），當用戶點擊圖片時，程序能夠根據點擊視圖的tag值來得到相應的圖片是哪一張，從而能夠加載。支持左右滑動的功能在新的界面中增長了

一個ScrollView,而後將下載下來的圖片添加到scrollView中。代碼以下

[objc] view plaincopy

1. //  

2. //  PhotoViewController.m  

3. //  Test515  

4. //  

5. //  Created by silicon on 14-5-22.  

6. //  Copyright (c) 2014年 silicon. All rights reserved.  

7. //  

8.   

9. #import "PhotoViewController.h"  

10. #import "ImageLoader.h"  

11.   

12. @interface PhotoViewController ()  

13.   

14. @end  

15.   

16. @implementation PhotoViewController  

17. @synthesize scrollView = _scrollView;  

18. @synthesize imageArray = _imageArray;  

19. @synthesize page = _page;  

20.   

21. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  

22. {  

23.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  

24.     if (self) {  

25.         // Custom initialization  

26.     }  

27.     return self;  

28. }  

29.   

30. - (void)viewDidLoad  

31. {  

32.     [super viewDidLoad];  

33.     // Do any additional setup after loading the view.  

34.     [self.view setFrame:CGRectMake(0, 0, MY_WIDTH, MY_HEIGHT)];  

35.     [self.view setBackgroundColor:[UIColor blackColor]];  

36.       

37.     self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, MY_WIDTH, MY_HEIGHT)];  

38.     _scrollView.delegate = self;  

39.     _scrollView.contentSize = CGSizeMake(MY_WIDTH * [_imageArray count], MY_HEIGHT);  

40.     _scrollView.showsVerticalScrollIndicator = NO;  

41.     _scrollView.showsHorizontalScrollIndicator = NO;  

42.     _scrollView.backgroundColor = [UIColor blackColor];  

43.     _scrollView.bounces = YES;  

44.     _scrollView.pagingEnabled = YES;  

45.     [self.view addSubview:_scrollView];  

46.       

47.     //圖片添加事件響應  

48.     UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closePhotoView)];  

49.     tapRecognizer.delegate = self;  

50.     _scrollView.userInteractionEnabled = YES;  

51.     [_scrollView addGestureRecognizer:tapRecognizer];  

52.     [tapRecognizer release];  

53.       

54.     [self loadingImages];  

55. }  

56.   

57. - (void)viewWillAppear:(BOOL)animated{  

58.     [_scrollView setContentOffset:CGPointMake([_imageArray indexOfObject:_imageName] * MY_WIDTH, 0)];  

59. }  

60.   

61. - (void)didReceiveMemoryWarning  

62. {  

63.     [super didReceiveMemoryWarning];  

64.     // Dispose of any resources that can be recreated.  

65. }  

66.   

67. //關閉  

68. - (void)closePhotoView{  

69.     [self.view removeFromSuperview];  

70. }  

71.   

72. - (void)dealloc{  

73.     [_scrollView release];  

74.     [super dealloc];  

75. }  

76.   

77. - (void)loadingImages{  

78.     //加載圖片  

79.     for(int i = 0; i < [_imageArray count]; i++){  

80.         NSString *picName = [_imageArray objectAtIndex:i];  

81.         UIImageView *imageV = [[ImageLoader shareInstance] compressImage:MY_WIDTH imageView:nil imageName:picName flag:NO];  

82.           

83.         float width = imageV.image.size.width;  

84.         float height = imageV.image.size.height;  

85.           

86.         float new_width = MY_WIDTH;  

87.         float new_height = (MY_WIDTH * height)/width;  

88.           

89.         imageV.frame = CGRectMake(MY_WIDTH * i, 0, new_width, new_height);  

90.         [_scrollView addSubview:imageV];  

91.         [imageV release];  

92.     }  

93. }  

94.   

95. - (void)scrollViewDidScroll:(UIScrollView *)_scrollView{  

96.   

97. }  

98.   

99. @end