iOS | UIKit | Ошибка при изменении размера изображений аватара в контейнере изображений

#swift #uikit #message

Вопрос:

Я работаю над представлением чата, которое извлекает данные из конечной точки, у него есть ключ, который дает мне URL-адрес аватара, после преобразования этих данных и отображения их в пользовательской ячейке чата он не принимает высоту и ширину представления изображения в пользовательской ячейке ( у меня есть ограничение 32×32).

Я добавил код для контроллера представления таблицы и контроллера ячеек таблицы вместе со справочными изображениями для представления и компоновки ячеек.

Пользовательская Ячейка Чата введите описание изображения здесь

Ошибка экрана Ошибка

Код Ячейки Чата

 
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

    }
}
 

Ответ №1:

Вызывается представление изображения, для которого вы установили ограничения userImage автоматического отображения .

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

Но вы устанавливаете изображение в другой вид изображения:

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

Это не userImage так , это так imageView . Это две разные вещи.

Комментарии:

1. Я также должен добавить, что весь ваш метод загрузки изображения и добавления его в ячейку полностью ошибочен и приведет к большому количеству ненужной загрузки, плюс изображения появятся в неправильной ячейке (или вообще не появятся, или вы можете аварийно завершить работу). Однако вы можете пересечь этот мост позже. 🙂

2. О черт, спасибо, я не мог понять, какую ошибку совершил. И да, я знаю, что метод загрузки неправильный, я просто сделал это, чтобы проверить пользовательский интерфейс, я планирую вставить это в чат-клиент и вернуть изображение пользовательского интерфейса в модель. Спасибо, что поправили меня. Ценю это.

3. «Я просто сделал это, чтобы протестировать пользовательский интерфейс» Вполне разумно, но если вы тестируете пользовательский интерфейс, вам следует издеваться над сетью, а не использовать реальную сеть. Для этой цели вам захочется вооружиться некоторыми поддельными изображениями.

4. Я понимаю, спасибо вам за ваше руководство.