SwiftUITableView的CellStacked

我以編程方式快速創建了一個表格視圖。資料來自API。但我得到的是像這樣堆疊的單元格：

這是我的 tableView 函式代碼：

 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

任何人都可以幫助我，這樣我的 UITableView 就不會再堆疊了嗎？謝謝

uj5u.com熱心網友回復：

首先，創建一個自定義UITableViewCell并在其中添加視圖。

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 = "?? "   data.location.city   ", "   data.location.country
        self.registeredDateLabel.text = "Joined since \((data.registerDate).prefix(10))"
    }
}

在方法中注冊UserCell到 tableView 。viewDidLoad()

tableView.register(UserCell.self, forCellReuseIdentifier: "\(UserCell.self)")

我假設您有一個用戶串列。UserModel所以宣告一個像下面這樣的陣列

var users = [UserModel]()

在方法中回傳陣列numberOfRowsInSection()的長度。users

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return users.count
}

在cellForRow()方法中將單元格轉換為UserCell并從中呼叫setUser()方法。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "\(UserCell.self)", for: indexPath) as? UserCell else {
        return UITableViewCell()
    }
    
    let user = users[indexPath.row]
    cell.setUser(with: user)
    return cell
}

標籤：迅速 uikit

上一篇：Swift：iOS15之前的任務{}？

下一篇：為什么在Swift中允許添加Int和Float字面量，但不允許Int和Float變數做同樣的事情？