UI_图片异步下载、KVO

异步下载图片

UITableView中图片的异步下载

KVO

KVO监测model图片下载

---

 异步下载图片

• 真实开发中，网络接口返回的JSON和XML数据中，通常不会直接包含图片，而是给出图片的URL。
• 因此，需要根据图片URL获取图片数据，以便UI展示。
• 因为HTTP协议是超文本传输协议，所以可以传输图片。

 

图片下载与普通网络请求流程相同

1. 创建一个request
2. 建立urlConnection
3. 使用请求到的数据 

ImageDownloader

图片下载是iOS开发中常用的功能，但系统并未提供图片下载类。

为了便于后续使用，可以将图片下载封装到一个类里面（ImageDownloader） 

ImageDownloader允许外界指定URL，提供开始下载和取消下载功能，并提供delegate或block将图片传递给外界。 

 1 #pragma mark 点击button获取图片数据
 2 - (IBAction)getImageButtonAction:(UIButton *)sender
 3 {
 4     
 5 //    1.准备URL
 6     NSURL *url = [NSURL URLWithString:kImageDownloader];
 7     
 8 //    2.创建GET方式的请求对象
 9     NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
     [request setHTTPMethod:@"GET"];
     
 //    3.创建异步的请求对象，使用block方式
     __block ViewController *weakSelf = self;
     [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
         
 //        4.将Data数据转化为image
         UIImage *image = [UIImage imageWithData:data];
         
 //        5.显示
         weakSelf.imageView.image = image;
     }];
 } 

 

---

UITableView中图片的异步下载

 UITableView显示图片

• 多数App中，UITableView都会显示图片。
• UITableView的重用机制，让我们能用很少的cell来呈现很多的内容（cell和model的数量不统一）。
• 为了能正确显示图片，Model类应该提供图片获取功能（Model通过ImageDownloader下载图片，供cell使用）。

 

Model类注意事项：

1. 除了包含必要的数据外，还要包含一个ImageDownloader对象。
2. 包含一个image
3. 包含一个图片是否正在下载BOOL值。（用于判断是否需要开始下载） 

 

Cell注意事项：

 

根据Model信息，做页面显示。

 

---

 KVO

 

KVO

key－Value－Observer键值观察者，是观察设计模式的一种具体体现。

KVO触发机制

 一个对象（观察者），监测另一个对象（被观察者）的某属性是否发生变化，若被监测的属性发生更改，会触发观察者的一个方法（方法名u固定，类似代理方法）

 

 KVO使用步骤：

1. 注册观察者（为被观察者指定观察者以及被观察者属性）
2. 实现回调方法
3. 触发回调方法（被观察者属性发生更改）
4. 移除观察者 

 

 KVO使用场景：

 

MVC中M与C的通信，M发生变化通知C。其中M是被观察者，C是观察者

 

 KVO注意事项：

 

观察者销毁之前，移除观察者，否则会出现程序异常（给已经销毁的对象发送消息） 

 

 

 

---

KVO监测model图片下载

cell图片及时显示

• tableView:cellForRowAtIndexPath:会在重用的时候，根据Model显示image或者placeholderImage。
• 如果tableView并未滑动，此时有图片下载完毕，是不会立即更新到cell上的。
• tableView可以借助KVO监测下载，及时更新cell。

 

KVO监测Model属性

1.  tableView:cellForRowAtIndexPath:中，为Model的image属性添加观察者。
2. image属性由nil变为非空的时候，视图控制器根据indexPath更新cell显示