Home > database >  Swift UITableView's Cell Stacked
Swift UITableView's Cell Stacked

Time:05-10

I created a tableview with swift programmatically. The data is from API. But what i get is cells that are stacked like this :

enter image description here

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)

https://pastebin.com/DqhLMGs5

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 = "           
  • Related