Resizing UIImageView inside a UITableViewCell

Question

in my app the UITableViewCell size are dynamic which means each has it's own height. inside of each cell there is a background image in a UIImageView. Through storyboard, i used autolayouts to customize the UIImageView to automatically stretch as the cell is stretched. The problem is that when they stretch the whole image stretches with the corners. So i was looking up online and i came over using resizableImageWithCapInsets: in order to stretch the stretchable sides and exclude the unwanted ones. So i tried the following code in tableView: cellForRowAtIndexPath: as i wanted the image to be stretched vertically only (height):

[cell.backgroundImage.image resizableImageWithCapInsets:UIEdgeInsetsMake(16, 0, 16, 0)];

however, the problem persisted as in the picture below

As you can see, the image corners are still stretched. What am i doing wrong? is the edgeInset values wrong? or should i place the code somewhere else ?

Answer 1

You create UIEdgeInsets values using the UIEdgeInsetsMake() function. UIEdgeInsets encapsulates four different CGFloat values for the inset values of the top, bottom, left, and right individually. Positive inset values shrink the content area, while negative inset values will effectively increase it. Make sure you create the image first and apply the insets there and then, Once that is done then apply the image to the backgroundView as opposed to trying to edit the edge insets from the backgroundView.image property.

     UIImageView *cellBGIV = 
    [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"imageName"]
           resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]];
    cell.backgroundView = cellBGIV;