Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

iOS

Posted by Diogenes Buarque
Diogenes Buarque
7,804 Points

AFNetworking + UIImageView

Hello guys, i'm trying improve my BlogReader app using AFNetworking to load async images to UITableViewCell but at the moment i get some bugs that i can't figure out how to solve it.

The first bug happens when i start the app and scroll the uitableview, at this point some images are resized.

alt text

The other problem happen with some images that only get the border style when i scroll the tableview alt text

My Code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:    (NSIndexPath *)indexPath
{
   static NSString *CellIdentifier = @"Cell";
   UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifierforIndexPath:indexPath]

   BlogPost *blogPost = [self.blogPosts objectAtIndex:indexPath.row];


    if ( [blogPost.thumbnail isKindOfClass:[NSString class]]) {

        //NSLog(@"URL: %@", blogPost.thumbnail);
        [cell.imageView setImageWithURL:blogPost.thumbnailURL placeholderImage:[UIImage imageNamed:@"treehouse.png"]];
        cell.imageView.image = [ImageUtils scaleTheImage:cell.imageView.image];
        cell.imageView.image = [ImageUtils     imageWithBorderFromImage:cell.imageView.image];
        cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
        cell.imageView.clipsToBounds=YES;
    }

    cell.textLabel.text = blogPost.title;
    cell.detailTextLabel.text =  blogPost.snippet;
    return cell;
}

2 Answers

Amit Bijlani
STAFF
Amit Bijlani
Treehouse Guest Teacher
Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

The resizing problem could be that the imageView is getting resized because of the size of the image. You can set the frame size of the imageView after setting the image. You can add the following line right after the if statement:

    [cell.imageView setFrame:CGRectMake(0, 0, 50, 50)];

As for the other issue, it all depends on how the ImageUtils class sets the border. You have to look at the implementation of the method imageWithBorderFromImage and probably step through the code.

Diogenes Buarque
Diogenes Buarque
7,804 Points

Hi Amit, i try use your suggestion but after scroll the same problem occurs.

[cell.imageView setImageWithURL:blogPost.thumbnailURL placeholderImage:[UIImage imageNamed:@"treehouse.png"]];
//cell.imageView.image = [ImageUtils scaleTheImage:cell.imageView.image];
//cell.imageView.image = [ImageUtils imageWithBorderFromImage:cell.imageView.image];
//cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
cell.imageView.clipsToBounds=YES;
[cell.imageView setFrame:CGRectMake(0, 0, 60, 60)];
Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher
Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

You still need the content mode and probably might want to try setting the autoResizingMask

[cell.imageView setImageWithURL:blogPost.thumbnailURL placeholderImage:[UIImage imageNamed:@"treehouse.png"]];
cell.imageView.clipsToBounds=YES;
[cell.imageView setFrame:CGRectMake(0, 0, 60, 60)];
[cell.imageView setContentMode:UIViewContentModeScaleAspectFill];
[cell.imageView setAutoresizingMask: UIViewAutoresizingNone];
Diogenes Buarque
Diogenes Buarque
7,804 Points
Diogenes Buarque
Diogenes Buarque
7,804 Points

The same problem again :(

alt "problem"

Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher
Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

I think the issue is that the landscape images appear smaller because you are using aspect fill. It is working exactly as you are instructing it to, filling the view horizontally but vertically it does not have enough to fill anything. That's why the portrait images look good but the landscape ones look small. This is the real world problem when dealing with images of various sizes. This library can help: https://github.com/toptierlabs/ImageCacheResize