為什么我的 UITableView 單元格在滾動時重疊？

Question

我以編程方式創建了一個基本的 iOS 應用程序（刪除了故事板）。 我還創建了一個帶有自定義 UITableViewCell 的 UITableView，並以編程方式設置了約束。 在我向下滾動表格視圖之前，表格視圖的行看起來應該是這樣的。 但是當我滾動時，它們重疊並且事情變得奇怪。

這是滾動前的樣子：單擊此處查看滾動前的應用圖像

這是滾動后應用程序的外觀：單擊此處查看滾動后應用程序的圖像

我嘗試設置行高，並在單元格和表格視圖上使用clipsToBounds屬性。 這是管理 UITableView 的視圖 controller 的代碼的一部分：

class SocialFeedVC: UIViewController {
    let tableView = UITableView()
    view.addSubview(tableView)
    tableView.delegate = self
    tableView.dataSource = self
    tableView.allowsSelection = false
    tableView.showsVerticalScrollIndicator = false
    tableView.translatesAutoresizingMaskIntoConstraints = false
    tableView.topAnchor.constraint(equalTo: teamSelectorContainer.bottomAnchor, constant: 3.5).isActive = true
    tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    tableView.register(SocialFeedPostCell.self, forCellReuseIdentifier: cellName)
}

extension SocialFeedVC: UITableViewDelegate, UITableViewDataSource {
    // Define amount of rows in table view
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return feedPosts.count
    }

    // Define each cell in table view
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellName) as! SocialFeedPostCell
        let feedPost = feedPosts[indexPath.row]
        cell.set(feedPost: feedPost)
        return cell
    }

}

我的表格單元格代碼也在下面，但由於采用程序化路線而有點長。 隨意看看你想要什么。

import UIKit

class SocialFeedPostCell: UITableViewCell {

    let nameLabel = UILabel()
    let postCreationTimeLabel = UILabel()
    let profilePhoto = UIImageView()

    // Needed with programmatic method
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureProfilePhoto()
        configureNameLabel()
        configrePostCreationTimeLabel()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // Update view with controller information accordingly
    func set(feedPost: FeedPost) {
        nameLabel.text = feedPost.nameOfPoster
        postCreationTimeLabel.text = feedPost.creationTimestamp
        profilePhoto.image = UIImage(named: feedPost.profilePhoto)

        // Create post depending on type
        if (feedPost.content.type == PostType.text) {
            let contentLabel: UILabel = {
                let label = UILabel()
                label.numberOfLines = 5
                label.font = Probook.paragraph
                label.lineBreakMode = .byTruncatingTail
                let paragraphStyle = NSMutableParagraphStyle()
                paragraphStyle.lineSpacing = 2.5
                paragraphStyle.lineBreakMode = .byTruncatingTail
                let attrString = NSMutableAttributedString(string: feedPost.content.text!)
                attrString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range:NSMakeRange(0, attrString.length))
                label.attributedText = attrString
                return label
            }()
            // Add to subview and provide constraints
            addSubview(contentLabel)
            contentLabel.translatesAutoresizingMaskIntoConstraints = false
            contentLabel.topAnchor.constraint(equalTo: postCreationTimeLabel.bottomAnchor, constant: 15).isActive = true
            contentLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -17.5).isActive = true
            contentLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
            contentLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
        }
        else if (feedPost.content.type == PostType.image) {
            // Create image caption
            let imageCaptionLabel: UILabel = {
                let caption = UILabel()
                caption.numberOfLines = 5
                caption.font = Probook.paragraph
                caption.lineBreakMode = .byTruncatingTail
                let paragraphStyle = NSMutableParagraphStyle()
                paragraphStyle.lineSpacing = 2.5
                paragraphStyle.lineBreakMode = .byTruncatingTail
                let attrString = NSMutableAttributedString(string: feedPost.content.imageCaption!)
                attrString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyle, range:NSMakeRange(0, attrString.length))
                caption.attributedText = attrString
                return caption
            }()
            // Add to subview and provide constraints
            addSubview(imageCaptionLabel)
            imageCaptionLabel.translatesAutoresizingMaskIntoConstraints = false
            imageCaptionLabel.topAnchor.constraint(equalTo: postCreationTimeLabel.bottomAnchor, constant: 15).isActive = true
            imageCaptionLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
            imageCaptionLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true

            // Create image
            let imageView: UIImageView = {
                let image = UIImage(named: "chase")
                let imageView = UIImageView(image: image)
                imageView.contentMode = .scaleAspectFit
                imageView.clipsToBounds = true
                imageView.layer.masksToBounds = true
                return imageView
            }()
            // Add to subview and provide constraints
            addSubview(imageView)
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.topAnchor.constraint(equalTo: imageCaptionLabel.bottomAnchor, constant: 15).isActive = true
            imageView.heightAnchor.constraint(equalToConstant: 50).isActive = true
            imageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
            imageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
            imageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        }
    }

    func configureProfilePhoto() {
        addSubview(profilePhoto)
        profilePhoto.contentMode = .scaleAspectFill
        profilePhoto.translatesAutoresizingMaskIntoConstraints = false
        profilePhoto.widthAnchor.constraint(equalToConstant: 45).isActive = true
        profilePhoto.heightAnchor.constraint(equalToConstant: 45).isActive = true
        profilePhoto.layer.cornerRadius = 25
        profilePhoto.clipsToBounds = true
        profilePhoto.topAnchor.constraint(equalTo: topAnchor, constant: 17.5).isActive = true
        profilePhoto.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
    }

    func configureNameLabel() {
        addSubview(nameLabel)
        nameLabel.numberOfLines = 0
        nameLabel.adjustsFontSizeToFitWidth = true
        nameLabel.font = Probook.h2
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.leadingAnchor.constraint(equalTo: profilePhoto.trailingAnchor, constant: 20).isActive = true
        nameLabel.centerYAnchor.constraint(equalTo: profilePhoto.centerYAnchor).isActive = true
    }

    func configrePostCreationTimeLabel() {
        addSubview(postCreationTimeLabel)
        postCreationTimeLabel.numberOfLines = 0
        postCreationTimeLabel.adjustsFontSizeToFitWidth = true
        postCreationTimeLabel.font = Probook.timestamp
        postCreationTimeLabel.translatesAutoresizingMaskIntoConstraints = false
        postCreationTimeLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor).isActive = true
        postCreationTimeLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor).isActive = true
    }

}

Answer 1

它們不是“重疊”的。 問題是你忘記了細胞被重用了。 因此，一個曾經說“我在發帖”但現在說“Sivan 月”的單元格現在同時說這兩個，因為當您添加新文本時，您並沒有刪除舊文本。 當單元格位於不同行時，您正在將視圖放置在您添加的現有視圖上。