Resize the Table cell height as per downloaded image height

Question

I am getting the image's URL at run time and I want to download & display these images in a table. Images are going to be download asynchronously. What is more important is that I want to display all these images with their actual sizes.

Kindly help me. Thanks in advance:)

Answer 1

On the delegate method you have to update the image when finished downloading you can use

[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:indexPath, nil] 
                 withRowAnimation:UITableViewRowAnimationAutomatic];

This will call again

    -(CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath

So you should have it using the image's height if it exists, a default heigh, or a placeholder image if you have one.

Answer 2

First off, I'd highly recommend using SDWebImage for the asynchronous downloading, if you're not already doing so. Depending on what you want, you can have it cache images in memory or on disk - the latter is done in the correct fashion, by saving them in the special cache folder, so iOS can delete them if it runs out of space. It also provides a handy category on UIImageView, similar to what AFNetworking gives you, but with more options and and an optional completion block. That way you can do something like this:

#import <SDWebImage/UIImageView+WebCache.h>

...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    // Create the cell...

    [cell.myImageView setImageWithURL:[NSURL URLWithString:@"http://example.com/image.jpg"]
              placeholderImage:[UIImage imageNamed:@"placeholder"]
                     completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
        if (image != nil) {
            [self.images insertObject:image atIndex:indexPath.row];
            [tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:indexPath, nil] withRowAnimation:YES];
        }
    }];
    return cell;
}

That way you download the image asynchronously, set the UIImageView correctly, but you also use the block to save the image in an NSMutableArray, so you can tell the tableview the correct height. It also tells the table view to update the height of the cell whose image has loaded. Then when the table view needs to know how high a given cell is, if the image has been loaded, we'll get the size from it:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    id image = [self.images objectAtIndex:indexPath.row];
    if ([image isKindOfClass:[NSNull class]]) {
        return defaultHeight;
    } else {
        return [image size].height + topPadding + bottomPadding;
    }
}

That way we know the height even of images that are off-screen (e.g. when you have scrolled to the bottom). This solution assumes that you start by populating the NSMutableArray with NSNull values, which are then replaced with the images when they load. Finally, if you like, you could use SDWebImageManager to start the downloads manually even before the cells are shown.

Answer 3

You can make your UIImageView size as per downloading image but it will give bad look.

So i suggest you to make all your image of same size , so it will be look fine and sweet

you can use this to make all your image of same size.

+ (UIImage *)imageScaledToSizeWithImage:(UIImage *)imagewww andsizeee:(CGSize)size
{
    //avoid redundant drawing
    if (CGSizeEqualToSize(imagewww.size, size))
    {
        return imagewww;
    }

    //create drawing context
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f);

    //draw
    [imagewww drawInRect:CGRectMake(0.0f, 0.0f, size.width, size.height)];

    //capture resultant image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //return image
    return image;
}

But if you really want to show table with different row size then make change your row size on run time

when you will get image then save your image in dictionary with key value is indexPath of row.

[tableImageDict setObject:image forKey:[NSString stringWithFormat:@"%i,%i",indexPath.row,indexPath.section]];

and then reload your table row.

[table reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]
                     withRowAnimation:UITableViewRowAnimationNone];

It will change your row height

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UIImage *image = (UIImage *)[tableImageDict objectForKey:
                                 [NSString stringWithFormat:@"%i,%i",
                                  indexPath.row,indexPath.section]];


    if (image != nil)
    {
        return image.size.height;
    }
    else{
        return 44.0;
    }
}

Answer 4

Check out heightForRowAtIndexPath:. Here's another post about it.

Answer 5

for that u have to create custom UITableviewCell and u can set the size of Table view cell using this code

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
   int rowHeight =0.0f;

   // here u can get particular Url by indexPath.row, now create UIImage object using that Url 

   CGRect bioHeadingFrame = image.frame;
   rowHeight = size.height; //get the height of that image 

   return rowHeight;
}

now Your Table cell's height is increase according to image height

Answer 6

If asynchronous downloading is your real issue, refer to AFNetworking library's UIImageView category. Especially this function:

- (void)setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholderImage

You can include this UIimageview category into your project and set cell images derived from that class.