时间戳

首页 > 解决方案 > iOS | UIKit | 将头像图像大小调整到图像容器时出错

swift - iOS | UIKit | 将头像图像大小调整到图像容器时出错

问题描述

我正在开发一个从端点获取数据的聊天视图，它有一个给我头像 URL 的键，在转换该数据并将其显示在自定义聊天单元格上之后，它不需要图像的高度和宽度在自定义单元格中查看（我限制为 32x32）

我已经添加了表格视图控制器和表格单元控制器的代码以及视图和单元布局的参考图像。

自定义聊天单元 在此处输入图像描述

屏幕错误 错误

聊天单元代码


class MessageCell: UITableViewCell {

    @IBOutlet weak var userImage: UIImageView!
    @IBOutlet weak var userName: UILabel!
    @IBOutlet weak var userMessage: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        // set message corner radius as 8px and border
        userMessage.layer.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) // set the background color
        userMessage.layer.cornerRadius = 8 // set the corner radius
        userMessage.layer.masksToBounds = true // this will make sure that the corner radius bounds are all color of the layerBG
        userMessage.layer.borderWidth = 1
        userMessage.layer.borderColor = #colorLiteral(red: 0.937254902, green: 0.937254902, blue: 0.937254902, alpha: 1)
        

    }  
}

聊天视图控制器


class ChatTableViewController: UIViewController {
    // Cell ID
    let cellId = "ReusableCell"
    
     // table view where chat bubbles will be displayed.
    @IBOutlet var chatBoxTableView: UITableView!
    
    // Set up the messages data structure to capture the chat client data
    var messages : [MessageData]?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        overrideUserInterfaceStyle = .light
        
        // set background color of the tableview
        chatBoxTableView.backgroundColor = #colorLiteral(red: 0.9764705882, green: 0.9764705882, blue: 0.9764705882, alpha: 1)
        
        // register the custom cell xib file (previously nib file)
        chatBoxTableView.register(UINib(nibName: "MessageCell", bundle: nil), forCellReuseIdentifier: cellId)
        
        // remove separators
        chatBoxTableView.separatorStyle = .none
        chatBoxTableView.dataSource = self
        
        
        // call out chat client to fetch data from the
        ChatClient().getData { [weak self] (message) in
            self?.messages = message // initiate the messages data from the chat client
            
            DispatchQueue.main.async {
                self?.chatBoxTableView.reloadData() // reload the table to show it.
            }
        }
        
    }
    
    
    
}

extension ChatTableViewController : UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        messages?.count ?? 0
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! MessageCell

        
//         download image to display on the cell
        if let url = URL(string: messages?[indexPath.row].avatar_url ?? "Google.com") {
            URLSession.shared.dataTask(with: url) { [weak self] data , _ , error in
                if let data = data, error == nil {
                    // on the main thread
                    DispatchQueue.main.async {
                        cell.imageView?.image = UIImage(data: data)?.circleMask
                        self?.chatBoxTableView.reloadData()
                    }
                } else {
                    print("error data")
                }
            }.resume()
        }
        
        
        // give the cell data
        cell.userMessage.text = messages?[indexPath.row].message
        cell.userName.text = messages?[indexPath.row].name
        
        return cell

    }
}

标签： swiftuikitmessage

解决方案

您设置了自动布局约束的图像视图称为userImage.

class MessageCell: UITableViewCell {
    @IBOutlet weak var userImage: UIImageView!

但是您将图像设置为不同的图像视图：

cell.imageView?.image = UIImage(data: data)?.circleMask

那不是userImage，是imageView。他们是两个不同的东西。

推荐阅读