IOS CollectionView with UIImage load from url - ios

Question

I have an UICollectionView and I want to load picture from web to the UIImageView which on cell. (The UIImageView with tag:100 on the cell.)
The picture isn't appear when I use this method:
- (void)viewDidLoad
{
[super viewDidLoad];
Img = [NSArray arrayWithObjects:#"http://192.168.1.103:8088/Images/1.png",#"http://192.168.1.103:8088/Images/2.png",nil];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"List";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
chlImage.image = image;
NSLog("%#",[Img objectAtIndex:indexPath.row]); //Here can show Img's values correctly
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"backgroung.png"]];
return cell;
}
But when I use the picture in project, it can appear correctly. like this:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"List";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
chImage.image = [UIImages imageNames:#"123.jpg"];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"backgroung.png"]];
return cell;
}
Why it can't work when I used picture load from web? (The picture can be opened by "browser".)
Can give me some tips or correct code? Thank you very much!

Answer 1

You are expecting to get an UIImageView from this line:
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
But you are not. You are getting just an UIView. So you must create an UIImageView and then use addSubview: method to add this UIImageView to the backgroudViewView.
So, it should be:
UIImageView *chImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, cell.backgroundView.frame.size.width,cell.backgroundView.frame.size.height)];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
chImage.image = image;
NSLog("%#",[Img objectAtIndex:indexPath.row]); //Here can show Img's values correctly
[cell.backgroundView addSubview:chImage];
And finally, I have a suggestion for you. Take a look at SDWebImage library. It's an awesome feature to fetch images from URL.

Answer 2

Create a class ImageCell by subclassing UICollectioViewCell and create a property ImageCell.h:
#interface ImageCell : UICollectionViewCell
#property (nonatomic, strong) UIImage *dImage;
#end
Then add a function in ImageCell.m
- (void)downloadImageFromURL:(NSURL *)imageUrl
{
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
dImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
dispatch_sync(dispatch_get_main_queue(), ^{
UIImageView *chImageView = (UIImageView *)[cell viewWithTag:100];
chImageView.image = dImage;
});
});
}
Now from UICollectionView delegate:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = #"List";
ImageCell *cell = (ImageCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
[cell downloadImageFromURL:imageUrl];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
return cell;
}
And at last please make sure that you set the tag 100 to that ImageView you are trying to get. Let me know if you have any confusions.

Answer 3

Simply move your data fetching part from the collection view's delegate to it's viewDidLoad.
Store the images into an array. And use this as the datasource for your collection view.
ie.Each time an image gets added to the array just reload the collection view.
Or you could create a custom cell that does this as 'iOSGeek' suggested.