iOS Facebook SDK Profile Pictures in TableViewCells - ios

Question

I'm working on an iOS application where I want to have a vertical tableview with large-ish pictures of a user's friends. (200x200px, 100x100pt)
I have it working, but it is super slow! I can barely move the tableview at all!
How can I do this asynchronously and in an expedient manner?
This is my current code:
In viewDidload:
FBRequest* friendsRequest = [FBRequest requestForMyFriends];
[friendsRequest startWithCompletionHandler: ^(FBRequestConnection *connection,
NSDictionary* result,
NSError *error)
{
self.friends = [result objectForKey:#"data"];
NSLog(#"Found: %u friends", (unsigned)self.friends.count);
[self.leftTableView reloadData];
[self.rightTableView reloadData];
}];
CellForRowAtIndexPath:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell"];
if (!cell)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"Cell"];
cell.backgroundColor = [UIColor clearColor];
}
NSDictionary<FBGraphUser> *friend = [self.friends objectAtIndex:indexPath.row];
if (friend)
{
NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:#"http://graph.facebook.com/%#/picture?width=200&height=200", friend.id]];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:data];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 4, 100, 100);
imageView.layer.cornerRadius = 50.0f;
imageView.clipsToBounds = YES;
[cell.contentView addSubview:imageView];
}
return cell;
}

Answer 1

It might be easier for you if you made a custom UITableViewCell, then you can place a UIView (instead of UIImageView) and in InterfaceBuilder give it the class FBProfilePictureView. Now, all you need to do is set the profileID property on that view, and the Facebook SDK will handle getting the profile picture for the profile with the provided id and displaying it.
Facebook SDK Reference

Answer 2

The UIImageView+AFNetworking class from AFNetworking Framework is one of the most used methods to do this. You can easy import this Framework to your project:
https://github.com/AFNetworking/AFNetworking
And use like this:
#import "UIImageView+AFNetworking.h"
NSDictionary<FBGraphUser> *friend = [self.friends objectAtIndex:indexPath.row];
if (friend)
{
NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:#"http://graph.facebook.com/%#/picture?width=200&height=200", friend.id]];
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(0, 4, 100, 100);
imageView.layer.cornerRadius = 50.0f;
imageView.clipsToBounds = YES;
[imageView setImageWithURL:url];
[cell.contentView addSubview:imageView];
}

Answer 3

If you use [NSData dataWithContentsOfURL:url] the images will be fetched synchronous. Also when ever you scroll the table view they will be fetched again.
Use https://github.com/rs/SDWebImage for asynchronous image loading. It will also cache the images.

Answer 4

Download the files from EgoImageView. This link ask you to download a file. Unzip it. Add those file into your app. Import EgoImageView.h in your class. Change this code instead of your code. First time, it will take time to load. If you are converting URL as data, it will take long time.
if (friend)
{
NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:#"http://graph.facebook.com/%#/picture?width=200&height=200", friend.id]];
UIImageView *imageView = [[UIImageView alloc] init];
[imageView setImageURL:url];
imageView.frame = CGRectMake(0, 4, 100, 100);
imageView.layer.cornerRadius = 50.0f;
imageView.clipsToBounds = YES;
[cell.contentView addSubview:imageView];
}
Hope, it helps you.