如何以编程方式在 TableCell 中添加图像和添加约束？

Posted 2023-02-15

【中文标题】如何以编程方式在 TableCell 中添加图像和添加约束？

【英文标题】：how to add Images and add constraints in TableCell programmatically?

【发布时间】：2022-01-19 05:54:56

【问题描述】：

我想实现下图的效果。 我想在我的单元格中添加图像（由我用红线框起来），如何实现？ 我尝试使用equalToSuperView().inset(10)做一些布局，但是我不知道如何设置单元格和图像之间的关系。：

1.我创建了一个遵循“UITableViewCell”协议的“WechatMomentListCell”

class WechatMomentListCell: UITableViewCell
    var content = UILabel()
    var senderAvatar = UIImageView()
    var senderNick = UILabel()
    var Images = [UIImageView()]
    var comments = [UILabel()]

2.我尝试像这样在我的ViewController中实现func tableView()，这是布局头像的部分。

tweetCell.senderAvatar.sd_setImage(with: URL(string: tweet?.sender?.avatar ?? ""), placeholderImage: UIImage(named: "placeholder.png"))
        //tweetCell.senderAvatar.frame = CGRect(x:0, y:0, width: 40, height: 40)
        
        tweetCell.senderAvatar.snp.makeConstraints(make) in
            make.leading.equalToSuperview().offset(50)
            make.bottom.equalToSuperview().offset(20)
            make.width.equalTo(40)
            make.height.equalTo(40)
        

3.覆盖tableView的完整代码如下：

        let tweet = viewModel.tweetList?[indexPath.row]
        
        for i in tweet?.images ?? [] 
            let flagImage = UIImageView()
            flagImage.sd_setImage(with: URL(string: i.url))
            tweetCell.Images.append(flagImage)
        
        for i in tweet?.comments ?? [] 
            let flagComment = UILabel()
            flagComment.text = "\(i.sender) : \(i.content)"
            tweetCell.comments.append(flagComment)
        
        tweetCell.senderNick.text = tweet?.sender?.nick
        tweetCell.senderAvatar.sd_setImage(with: URL(string: tweet?.sender?.avatar ?? ""), placeholderImage: UIImage(named: "placeholder.png"))
        
        //this part use for layouting avatar
        tweetCell.senderAvatar.frame = CGRect(x:0, y:0, width: 40, height: 40)
        tweetCell.senderAvatar.snp.makeConstraints(make) in
            make.leading.equalToSuperview().offset(50)
            make.bottom.equalToSuperview().offset(20)
            make.width.equalTo(40)
            make.height.equalTo(40)
                
 
        return tweetCell

在我自己的演示中，tablelistcell 显示为空白。

感谢您的帮助！

【参考方案1】：

所有代码都在 1. 您的单元格的整个代码中吗？ 如果单元格为空，我将首先检查您是否已将单元格正确注册到 tableView 以及 cellForRow 委托函数是否实际返回正确的单元格。

假设 1. 中的内容是您单元格的完整代码： 您的单元应该处理更多它自己的设置。它应该自己布局，自己下载图像并设置它的约束（以编程方式，正如您在问题中提到的那样）。使用您提供的 sn-ps 来更正您的代码实际上是不可能的。 This 对你来说可能是一个很好的教程。

【讨论】：

是的，这个视频真的很有帮助！非常感谢！