防止 UITableViewCell 图像视图在点击时改变大小

Question

I'm trying to set the imageView on a standard UITableViewCell from a remote source using a placeholder. I have this issue regardless of using SDWebImage or AlamofireImage as the library.

Here is how the cell appears after the initial load:

Then, once the cell has been tapped/reloaded it appears as this:

In the storyboard, I've adjusted the row height to be 60 points instead of the standard 44 points. If I return the height to the standard 44 points, the issue is no longer present.

I believe this issue is more related to custom height of the cell rather than the library providing the placeholder. I made an issue on AlamofireImage in case it was a problem with the library but it turns out this is not the case.

How can I have the image set at the right size initially, or prevent a resize from occurring upon reload?

Here is the code from my UITableViewCell subclass. Note that the issue occurs even if I remove the frame inset code inside of layoutSubviews .

class CategoryTableViewCell: UITableViewCell {

    var category: Category! {
        didSet {
            self.updateCategory(category)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.imageView?.frame = CGRectInset(self.imageView!.frame, 10, 10)
    }

    private func updateCategory(category: Category) {
        self.textLabel?.text = category.name

        self.imageView?.sd_setImageWithURL(category.largeImage ?? nil, placeholderImage: UIImage(named: "DefaultCategory"))
    }
}

---

I've now also set the following overrides on the table view controller, bu it hasn't had any effect.

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 60;
}
    
override func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 60;
}

Answer 1

I would like to leave a comment but I don't have enough reputation to do so. Hence, the "answer".

I remember running into this problem before and it was due to me not setting proper constraints for it on my UITableViewCell XIB. Once I set it to a fixed width/height and pin it to the edges of the parent view, the problem resolved itself.

Answer 2

I'm using SDWebImage , and this post helped me SDWebImage fixed width cell images .

Here is my solution, just save the initial frame of the imageView, text and detailText, and restore it on the layoutSubviews()

class MoreTableViewCell: UITableViewCell {

    var imageFrame: CGRect? = nil
    var textFrame: CGRect? = nil
    var detailTextFrame: CGRect? = nil

    override func layoutSubviews() {
        super.layoutSubviews()
        if imageFrame == nil {
            imageFrame = imageView?.frame
            textFrame = textLabel?.frame
            detailTextFrame = detailTextLabel?.frame
        }

        if imageFrame != nil {
            self.imageView?.frame = imageFrame!
        }

        if textFrame != nil {
            self.textLabel?.frame = textFrame!
        }

        if detailTextFrame != nil {
            self.detailTextLabel?.frame = detailTextFrame!
        }
    }
} 

Answer 3

Just add cell.setNeedsLayout() after setting Cell's image view!

MenuController.shared.fetchImage(url: item.imageURL) { (image) in
        if let image = image {
            DispatchQueue.main.async {
                cell.imageView?.image = image
                cell.setNeedsLayout()
            }
        }
    }