Dynamic UIImageView Size Within UITableView Dynamic UIImageView Size Within UITableView ios ios

Dynamic UIImageView Size Within UITableView


In the storyboard add trailing, leading, bottom and top constraints to your UIImageView. After you load your image all you need to do is add an aspect constraint to your UIImageView. Your images cell would look something like this:

class ImageTableViewCell: UITableViewCell {    @IBOutlet weak var customImageView: UIImageView!    internal var aspectConstraint : NSLayoutConstraint? {        didSet {            if oldValue != nil {                customImageView.removeConstraint(oldValue!)            }            if aspectConstraint != nil {                customImageView.addConstraint(aspectConstraint!)            }        }    }    override func prepareForReuse() {        super.prepareForReuse()        aspectConstraint = nil    }    func setCustomImage(image : UIImage) {        let aspect = image.size.width / image.size.height        let constraint = NSLayoutConstraint(item: customImageView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: customImageView, attribute: NSLayoutAttribute.height, multiplier: aspect, constant: 0.0)        constraint.priority = 999        aspectConstraint = constraint        customImageView.image = image    }}

You can check working example here DynamicTableWithImages


enter image description here

While loading images into the tableView each image can be with diffrent aspect ratio.With using of SDWebImage we can get the image from url as -

 testImageView.sd_setImage(with: url, placeholderImage: nil, options: [], completed: { (downloadedImage, error, cache, url) in            print(downloadedImage?.size.width)//prints width of image            print(downloadedImage?.size.height)//prints height of image        })

In UITableViewCell set the constraint for imageView as top, bottom, leading, trailing, fixed height constraint with 999 priorityAnd change height-constraint-constant according to image.

 var cellFrame = cell.frame.size cellFrame.height =  cellFrame.height - 15 cellFrame.width =  cellFrame.width - 15 cell.feedImageView.sd_setImage(with: url, placeholderImage: nil, options: [], completed: { (theImage, error, cache, url) in            cell.feedImageHeightConstraint.constant = self.getAspectRatioAccordingToiPhones(cellImageFrame: cellFrame,downloadedImage: theImage!)        })

Calculate cell frame & find the respective height based on that.

  func getAspectRatioAccordingToiPhones(cellImageFrame:CGSize,downloadedImage: UIImage)->CGFloat {        let widthOffset = downloadedImage.size.width - cellImageFrame.width        let widthOffsetPercentage = (widthOffset*100)/downloadedImage.size.width        let heightOffset = (widthOffsetPercentage * downloadedImage.size.height)/100        let effectiveHeight = downloadedImage.size.height - heightOffset        return(effectiveHeight)    }

Example on Github


If you want the UIImageView to tell the UITableView how tall it needs to be, then you need to configure the table view to enable automatic row calculation. You do this by setting estimatedRowHeight to a fixed positive value and setting rowHeight to UIViewAutomaticDimension. That's part one.

Now you need to configure the UIImageView to request a height based on the width which the table view requires and on the aspect ratio of the image. This will be part two.

First, set the contentMode to .AspectFit. This will cause the view to resize the appearance of the image based on whatever dimensions it takes. However, this still doesn't cause it to request the needed height with auto layout. Instead, it will request the height of the intrinsicContentSize, which may be quite different from the resized image. So, second, add a constraint to the UIImageView that is of the form width = height * multiplier, where the multiplier is based on the aspect ratio of the image itself.

Now the table view will require the correct width, the contentMode mechanism will ensure the image is resized correctly without distortion, and the aspect ration constraint will ensure that the image view requires the correct height via auto layout.

This works. The downside of it is that you will need to update the aspect ratio constraint every time you assign a new image to the image view, which could be quite often if the image view is in a cell that's getting re-used.

An alternative approach is to add only a height constraint and update it in the layoutSubviews of a view containing the image view. This has better performance but worse code modularity.


matomo