#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. Я понимаю, спасибо вам за ваше руководство.