Resize a table cell according to the height of the loaded image

Question

I get the URL of the image at runtime, and I want to download and display these images in a table. Images will be loaded asynchronously. More importantly, I want to display all of these images with their actual sizes.

Please help me. Thanks in advance:)

Answer 1

In the delegate method, you must update the image when the download is complete, you can use

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

It will cause again

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

Thus, you should have it using the height of the image, if it exists, the default value, or the image with a placeholder, if any.

Answer 2

First, I highly recommend using SDWebImage for asynchronous loading, if you haven’t done so already. Depending on what you want, you can have cache images in memory or on disk - the latter is performed correctly, saving them in a special cache folder, so iOS can delete them if you run out of free space. It also provides a convenient category in UIImageView, similar to what AFNetworking provides, but with more options and an additional termination block. So 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; } 

This way you load the image asynchronously, set up the UIImageView correctly, but you also use the block to save the image in NSMutableArray, so you can say that the table has the correct height. It also tells the table view to update the height of the cell whose image is loaded. Then, when the table view needs to know how high this cell is, if the image is loaded, we 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; } } 

This way we know the height of even the images off the screen (for example, when you scroll from the bottom). This solution assumes that you start by populating the NSMutableArray with NSNull values, which are then replaced with images at boot time. Finally, if you like, you can use the SDWebImageManager to start the download manually even before the cells are displayed.

Answer 3

You can make your UIImageView size according to the image you are loading, but it will look bad .

So, I suggest you make all your images the same size, so it will look beautiful and sweet

You can use this to make the whole image the 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 a table with a different row size, then make changes to the row size at runtime

when you get the image, then save your image in the dictionary with the indexPath key string value.

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

and then reload the table.

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

It will change the height of the line

 -(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 is another post about it.

Answer 5

for this u need to create a custom UITableviewCell, and you can set the size of the 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 height is increased in accordance with the height of the image

Answer 6

If asynchronous loading is your real problem, check out the AFNetworking UIImageView library. Especially this function:

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

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