[iOS SDK] ネット上の画像を表示させた UITableView をぬるぬる動作させる方法
UITableView の Cell に、ネットから取得した画像を表示したい場合(上図)、次のようなコードになると思います(ARC で書いています)。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.textLabel.text = @"rakuishi07";
NSString *imageURL = @"http://rakuishi.com/wp-content/themes/rakuishi/image/rakuishi.png";
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString: imageURL]]];
cell.imageView.image = image;
return cell;
}
これで動くっちゃ動くのですが、テーブルビューを動かしている時に画像ロードが発生して、操作がカクついてしまうので、あまりよろしくないです(カクついている時、ビーチボールを連想します)。
こういう時は、GCD の非同期通信を使用して、Blocks との組み合わせ技を使うと、テーブルビューがぬるぬるになるようです。
慣れるために、簡単なコードを書いてみました。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.textLabel.text = @"rakuishi07";
dispatch_queue_t q_global = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
dispatch_queue_t q_main = dispatch_get_main_queue();
cell.imageView.image = nil;
dispatch_async(q_global, ^{
NSString *imageURL = @"http://rakuishi.com/wp-content/themes/rakuishi/image/rakuishi.png";
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL: [NSURL URLWithString: imageURL]]];
dispatch_async(q_main, ^{
cell.imageView.image = image;
[cell layoutSubviews];
});
});
return cell;
}
このコードで動作させると先程までかくかくしていたのが、ぬるぬるになります。
これを基本に、読み込みまでインジケータを表示させたり、画像キャッシュを利用する(今のままでは、スクロールするたびに新しく読み込んでしまう)ためにどうすればいいかこれから勉強していこうと思います。