I created a tableview with swift programmatically. The data is from API. But what i get is cells that are stacked like this :
Here is my code of tableView function:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "UITableViewCell", for: indexPath)
cell.selectionStyle = .none
cell.backgroundColor = .systemBackground
cell.contentView.addSubview(profileUsernameView)
cell.contentView.addSubview(profilePictureView)
cell.contentView.addSubview(emailView)
cell.contentView.addSubview(phoneView)
Anyone can help me so my UITableView's doesn't stacked again? Thank you
CodePudding user response:
First, create a custom UITableViewCell
and add the views in it.
class UserCell: UITableViewCell {
private let profileUsernameLabel: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 18, weight: .semibold)
label.numberOfLines = 0
label.textAlignment = .left
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let profilePictureView: UIImageView = {
let imgView = UIImageView()
imgView.clipsToBounds = true
imgView.layer.cornerRadius = 45
imgView.translatesAutoresizingMaskIntoConstraints = false
return imgView
}()
private let emailLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let phoneLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let locationLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.textAlignment = .left
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let registeredDateLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
defineLayout()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
profilePictureView.image = nil
profileUsernameLabel.text = nil
locationLabel.text = nil
phoneLabel.text = nil
emailLabel.text = nil
registeredDateLabel.text = nil
}
private func defineLayout() {
NSLayoutConstraint.activate([
profilePictureView.widthAnchor.constraint(equalToConstant: 90),
profilePictureView.heightAnchor.constraint(equalToConstant: 90),
profilePictureView.topAnchor.constraint(equalTo: contentView.topAnchor,constant: 5),
profilePictureView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
profileUsernameLabel.topAnchor.constraint(equalTo: profilePictureView.bottomAnchor, constant: 10),
profileUsernameLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
locationLabel.topAnchor.constraint(equalTo: profileUsernameLabel.bottomAnchor, constant: 2),
locationLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
phoneLabel.topAnchor.constraint(equalTo: locationLabel.bottomAnchor, constant: 2),
phoneLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
emailLabel.topAnchor.constraint(equalTo: phoneLabel.bottomAnchor, constant: 2),
emailLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
registeredDateLabel.topAnchor.constraint(equalTo: emailLabel.bottomAnchor, constant: 2),
registeredDateLabel.leadingAnchor.constraint(equalTo: contentView.layoutMarginsGuide.leadingAnchor),
contentView.heightAnchor.constraint(greaterThanOrEqualToConstant: 350)
])
}
func setUser(with data: UserModel) {
self.profilePictureView.load(url: URL(string: data.picture)!)
self.profileUsernameLabel.text = data.firstName " " data.lastName
self.emailLabel.text = data.email
self.phoneLabel.text = data.phone
self.locationLabel.text = "