ios - 除非缓存图像，否则 TableView 单元格的格式不正确

Question

我的 tableview 有问题，在图像被缓存之前单元格不能正确定向，只有当我返回页面并且我的图像被缓存后它们才能正确定向。这是我正在谈论的一个例子，第一张图片是我第一次进入页面时，我有一个将图像存储在图像缓存中的功能，第二张图片是当我导航到其他地方后返回该页面时, 并且图像被缓存。

格式不正确:

格式正确:

我知道这是一个非常细微的区别以它的样子但我很想弄明白并理解为什么会这样

我的单元格常高是85，相关代码如下:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//Indexing part I left out dw about this



        let cell = discountTableView.dequeueReusableCell(withIdentifier: self.discountCellId, for: indexPath) as! DiscountCell
        cell.textLabel?.text = discount.retailerName
        cell.detailTextLabel?.text = discount.matchedFirstName + " " + discount.matchedLastName
        cell.profileImageView.image = UIImage.gif(name: "imageLoading")!
        grabImageWithCache(discount.retailerImageLink) { (profilePic) in
            cell.profileImageView.image = profilePic
        }
        //Adding second Image
        cell.matchImageView.image = UIImage.gif(name: "imageLoading")!
        grabImageWithCache(discount.matchedProfileImage) { (matchProfilepic) in
            cell.matchImageView.image = matchProfilepic
        }
        //declare no selection style for cell (avoid gray highlight)
        cell.selectionStyle = .none
        //format the cell's curvature
        cell.layer.cornerRadius = 38
        return cell
    }

**我很好奇为什么缓存图像时单元格的高度似乎会发生变化，因为高度设置为常数，所以我不知道它为什么会发生变化。当我打印单元格的高度时，它说两次也是 85...

UITableViewCell 类:

class DiscountCell: UITableViewCell {

    override func layoutSubviews() {
        super.layoutSubviews()
        //vertical spacing between cells
        let padding = UIEdgeInsets(top: 0, left: 0, bottom: 7, right: 0)
        bounds = bounds.inset(by: padding)
        
        textLabel?.frame = CGRect(x: 120, y: textLabel!.frame.origin.y-10, width: textLabel!.frame.width, height: textLabel!.frame.height)
        detailTextLabel?.frame = CGRect(x: 120, y: detailTextLabel!.frame.origin.y, width: detailTextLabel!.frame.width, height: detailTextLabel!.frame.height)
        //spacing between cells
        let margins = UIEdgeInsets(top: 0, left: 0, bottom: 85, right: 0)
        contentView.frame = contentView.frame.inset(by: margins)

    }
    
    //sets a placeholder imageview
    let profileImageView: UIImageView = {
        let imageView = UIImageView ()
        imageView.image = UIImage(named: "failed")
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.cornerRadius = 35
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.borderWidth = 2
        imageView.layer.borderColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1)
        return imageView
    }()
    //PlaceHolder imageview for match
    let matchImageView:UIImageView = {
        let imageView = UIImageView ()
        imageView.image = UIImage(named: "failed")
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.cornerRadius = 35
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        return imageView
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: .subtitle, reuseIdentifier: reuseIdentifier)
        
        addSubview(matchImageView)
        addSubview(profileImageView)
        //Setting Profile Pic anchors
        profileImageView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 5).isActive = true
        profileImageView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        profileImageView.widthAnchor.constraint(equalToConstant: 70).isActive = true
        profileImageView.heightAnchor.constraint(equalToConstant: 70).isActive = true
        //Setting Match Anchors
        matchImageView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        matchImageView.widthAnchor.constraint(equalToConstant: 70).isActive = true
        matchImageView.heightAnchor.constraint(equalToConstant: 70).isActive = true
        matchImageView.leftAnchor.constraint(equalTo: profileImageView.leftAnchor,constant: 35).isActive = true
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

我相信我已经缩小了对这个问题的关注范围，我注意到两次单元格之间的间距都不一致，所以我认为问题出在这些代码行上

        //vertical spacing between cells
        let padding = UIEdgeInsets(top: 0, left: 0, bottom: 7, right: 0)
        bounds = bounds.inset(by: padding)

我不确定该怎么做，因为我看过教程说要更改 contentviews 插图，但是当我这样做时，它没有任何效果，我看到有人说 iOS 11 改变了你这样做的方式，但没有能够找到真正解决这个问题的方法。

Answer 1

几个笔记...

修改单元格的 bounds 或其 contentView 不是一个好主意。 UIKit 将它们用于很多事情(例如在实现表格编辑时调整内容)。

单元格 subview 应该添加到单元格的 contentView，而不是单元格本身。同样，由于 TableView 如何依赖该层次结构。

您可以使用 UIView 和 UIImageView 子类来为您处理“舍入”。例如:

class RoundImageView: UIImageView {
    override func layoutSubviews() {
        layer.cornerRadius = bounds.size.height * 0.5
    }
}
class RoundEndView: UIView {
    override func layoutSubviews() {
        layer.cornerRadius = bounds.size.height * 0.5
    }
}

---

这是一个完整的实现:

class RoundImageView: UIImageView {
    override func layoutSubviews() {
        layer.cornerRadius = bounds.size.height * 0.5
    }
}
class RoundEndView: UIView {
    override func layoutSubviews() {
        layer.cornerRadius = bounds.size.height * 0.5
    }
}

class DiscountCell: UITableViewCell {
    
    // "Holder" view... contains all other UI elements
    // use RoundEndView so it handles the corner radius by itself
    let holderView: RoundEndView = {
        let v = RoundEndView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .white
        return v
    }()
    
    //sets a placeholder imageview
    // use RoundImageView so it handles the corner radius by itself
    let profileImageView: RoundImageView = {
        let imageView = RoundImageView()
        imageView.image = UIImage(named: "failed")
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.borderWidth = 2
        imageView.layer.borderColor = #colorLiteral(red: 0.9725490196, green: 0.9725490196, blue: 0.9725490196, alpha: 1)
        return imageView
    }()
    
    //PlaceHolder imageview for match
    // use RoundImageView so it handles the corner radius by itself
    let matchImageView: RoundImageView = {
        let imageView = RoundImageView()
        imageView.image = UIImage(named: "failed")
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.layer.masksToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        return imageView
    }()
    
    let mainLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.font = UIFont.systemFont(ofSize: 17.0, weight: .regular)
        return v
    }()
    
    let subLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.font = UIFont.systemFont(ofSize: 14.0, weight: .regular)
        return v
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: .subtitle, reuseIdentifier: reuseIdentifier)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    func commonInit() -> Void {
        
        backgroundColor = .clear
        
        contentView.addSubview(holderView)
        
        holderView.addSubview(matchImageView)
        holderView.addSubview(profileImageView)
        holderView.addSubview(mainLabel)
        holderView.addSubview(subLabel)
        
        NSLayoutConstraint.activate([

            // holder view constraints Top 5 pts from contentView Top
            holderView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 5.0),
            // Leading 12 pts from contentView Leading
            holderView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 12.0),
            // Trailing 5 pts from contentView Trailing
            holderView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -5.0),
            // 5 pts from contentView Bottom (use lessThanOrEqualTo to avoid auto-layout warnings)
            holderView.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -5.0),

            //Setting Profile Pic anchors - Top and Leading 5 pts from Top and Leading of Holder view
            profileImageView.topAnchor.constraint(equalTo: holderView.topAnchor, constant: 5),
            profileImageView.leadingAnchor.constraint(equalTo: holderView.leadingAnchor, constant: 5),
            // Botom 5 pts from contentView Bottom - this will determine the height of the Holder view
            profileImageView.bottomAnchor.constraint(equalTo: holderView.bottomAnchor, constant: -5),
            // width 70 pts, height equal to width (keeps it "round")
            profileImageView.widthAnchor.constraint(equalToConstant: 70.0),
            profileImageView.heightAnchor.constraint(equalTo: profileImageView.widthAnchor),
        
            //Setting Match Pic Anchors - 35 pts from Profile Leading, centerY to Profile
            matchImageView.leadingAnchor.constraint(equalTo: profileImageView.leadingAnchor, constant: 35),
            matchImageView.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor, constant: 0.0),
            // same width and height as Profile
            matchImageView.widthAnchor.constraint(equalTo: profileImageView.widthAnchor),
            matchImageView.heightAnchor.constraint(equalTo: profileImageView.heightAnchor),
            
            //Setting Main Label Anchors - Top equal to Top of Match image
            mainLabel.topAnchor.constraint(equalTo: matchImageView.topAnchor, constant: 0.0),
            // Leading 12 pts from Match image Trailing
            mainLabel.leadingAnchor.constraint(equalTo: matchImageView.trailingAnchor, constant: 12.0),
            // prevent Trailing from going past holder view Trailing
            mainLabel.trailingAnchor.constraint(equalTo: holderView.trailingAnchor, constant: -16.0),
            
            //Setting Sub Label Anchors - Top 8 pts from Main label Bottom
            subLabel.topAnchor.constraint(equalTo: mainLabel.bottomAnchor, constant: 8.0),
            // Leading and Trailing equal to Main label Leading / Trailing
            subLabel.leadingAnchor.constraint(equalTo: mainLabel.leadingAnchor, constant: 0.0),
            subLabel.trailingAnchor.constraint(equalTo: mainLabel.trailingAnchor, constant: 0.0),
            
        ])
        
    }
}

// example Discount object struct
struct Discount {
    var retailerName: String = ""
    var matchedFirstName: String = ""
    var matchedLastName: String = ""
    var matchedProfileImage: String = ""
    var retailerImageLink: String = ""
}

class DiscountViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    let discountTableView = UITableView()
    
    let discountCellId = "dcID"
    
    var myData: [Discount] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // a little sample data
        var d = Discount(retailerName: "Cup & Cone", matchedFirstName: "Kara", matchedLastName: "Tomlinson", matchedProfileImage: "pro1", retailerImageLink: "")
        myData.append(d)
        d = Discount(retailerName: "Cup & Cone", matchedFirstName: "Sophie", matchedLastName: "Turner", matchedProfileImage: "pro2", retailerImageLink: "")
        myData.append(d)
        d = Discount(retailerName: "Another Retailer", matchedFirstName: "WanaB3", matchedLastName: "Nerd", matchedProfileImage: "pro3", retailerImageLink: "")
        myData.append(d)

        
        discountTableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(discountTableView)
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            discountTableView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            discountTableView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            discountTableView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            discountTableView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
        ])
        
        view.backgroundColor = UIColor(red: 1.0, green: 0.9, blue: 0.7, alpha: 1.0)
        discountTableView.backgroundColor = UIColor(red: 0.66, green: 0.66, blue: 0.9, alpha: 1.0)
        discountTableView.separatorStyle = .none

        discountTableView.delegate = self
        discountTableView.dataSource = self
        
        discountTableView.register(DiscountCell.self, forCellReuseIdentifier: discountCellId)
        
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return myData.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //Indexing part I left out dw about this
        
        let discount = myData[indexPath.row]
        
        let cell = discountTableView.dequeueReusableCell(withIdentifier: self.discountCellId, for: indexPath) as! DiscountCell
        
        cell.mainLabel.text = discount.retailerName
        cell.subLabel.text = discount.matchedFirstName + " " + discount.matchedLastName

        // add first image
        if let img = UIImage(named: "imageLoading") {
            cell.profileImageView.image = img
        }
        // use your custom image funcs
        //cell.profileImageView.image = UIImage.gif(name: "imageLoading")!
        //grabImageWithCache(discount.retailerImageLink) { (profilePic) in
        //  cell.profileImageView.image = profilePic
        //}

        //Adding second Image
        if let img = UIImage(named: discount.matchedProfileImage) {
            cell.matchImageView.image = img
        }
        // use your custom image funcs
        //cell.matchImageView.image = UIImage.gif(name: "imageLoading")!
        //grabImageWithCache(discount.matchedProfileImage) { (matchProfilepic) in
        //  cell.matchImageView.image = matchProfilepic
        //}
        
        //declare no selection style for cell (avoid gray highlight)
        cell.selectionStyle = .none

        return cell
    }
    
}

结果: