从URL异步将图像加载到单元格中的UIImageView时不会在初始加载时加载

Question

I am downloading an image from a URL then setting the image to my imageView when the image has downloaded (see code below). I am using a custom UITableViewCell with a UIImageView setup with NSAutoLayoutConstraints . The constraints properly set the size of the cell, but the cell only displays the image if the cell is off the screen or if the user scrolls to reload that cell.

Here is the code:

final class ImageTableViewCell: UITableViewCell {

static let reuseIdentifier = "Image Cell"

@IBOutlet var postImageView: UIImageView!

internal var aspectConstraint : NSLayoutConstraint? {
    didSet {
        if oldValue != nil {
            postImageView.removeConstraint(oldValue!)
        }
        if aspectConstraint != nil {
            postImageView.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: postImageView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: postImageView, attribute: NSLayoutAttribute.height, multiplier: aspect, constant: 0.0)
    constraint.priority = UILayoutPriority(rawValue: 999)

    aspectConstraint = constraint

    postImageView.image = image
}}

So essentially, once the image is downloaded then method is called on the main thread. Yet the cell doesn't actually resize itself. The cell is the same height it was when the table originally loaded. In my case, since the image view is nil, the height is only 30 points high due to the margins above/below the image view. If I set a placeholder then that is replaced yet the image is still not replaced. The cell size only displays correctly if it is off the screen or if the user scrolls. I've seen a few threads about this, but many are quite old. Is this still a bug on Apple's part or is there a solution? I have tried setNeedsLayout() as well as other methods to try and force an update on the constraints but nothing has worked. Any ideas/solutions from anyone?

EDIT:

The code that calls setCustomImage is as follows:

The code that calls setCustomImage is the following:

Network.shared.downloadImage(url: post.postURL) { image, error in
                if let image = image {
                    cell.setCustomImage(image: image)

                    // reload row
                    self.tableView.reloadRows(at: [cell.indexPathForCell!], with: .fade)
                } else if let error = error {
                    print(error.localizedDescription)
                }
            }

I added code to reload the row when the image is set which now works. layoutIfNeeded() did not do anything. The network call to download the image returns the image on the main thread so that's not an issue. Once the cell is set I tried calling layoutIfNeeded() to no avail. Specifically reloading the row is the only thing that cures it. I just didn't know if this was inefficient or not.

Answer 1

You need to call layoutIfNeeded which will layout subviews. Calling setNeedsLayout should be redundant in your case since adding the constraint itself should already call that internally.

There is no bug in this situation, you can't expect the whole window hierarchy is repositioned and redrawn just because one of your image is being downloaded.

Saying "but the cell only displays the image if the cell is off the screen" is what a tester does. You need to analyze your issue and identify:

• Is cell size correct after the image is set?
• Is image view size and position correct after the image is set?
• Is image on image view correct after assigning it?

From your description I see a few most probable candidates:

• You are not updating UI on main thread
• Your cell is internally not layout correctly (call layoutIfNeeded )
• Your cell needs to resize (on table view call beginUpdates + endUpdates )
• You are having issues on which cell you are calling setCustomImage due to cell dequeuing (table view cell and async data load is a bit more complex then what you seem to have built)

Try these points and hopefully one of the first will solve your issue. If not then make sure you update your question by showing how these methods are being called.

Although there are many tools to achieve this but setting remote images in table view cells should look something like this:

class MyCell: UITableViewCell {

    @IBOutlet private var modelImageView: UIImageView?

    var model: MyModel? {
        didSet {
            refresh()
        }
    }

    private var currentImageURL: URL? // Track what the current image URL is
    func refresh() {
        if model?.imageURL != currentImageURL { // Only do changes if another URL is being set
            let url = model?.imageURL // We need to save this to check it in block
            modelImageView?.image = nil // Clear the current image for cases of dequeuing
            ImageTools.fetchImage(url, completion: { image in
                if url == model?.imageURL { // Due to asynchronousy we need to check if this is really the image we need to show
                    self.currentImageURL = url // Save the new url
                    self.modelImageView.image = image // Assign the image
                }
            })
        }
        // Setup other UI here
    }

}

Answer 2

实际上，您实际上需要reload row at specific Index或Reload TableView reload row at specific Index正如您提到的，当滚动tableView或正确显示在屏幕外的Cell时，一切都按预期工作