Swift：如何清除 collectionView 以便在 collectionViewCell 中重用

Question

I have a collectionView that is inside a collectionViewCell and the collectionView isn't getting cleared correctly when the cell is being reused.

Code:

class TweetCell: UICollectionViewCell {

    lazy var mediaCollectionView: UICollectionView = {
        let size = NSCollectionLayoutSize(
            widthDimension: NSCollectionLayoutDimension.fractionalWidth(1),
            heightDimension: NSCollectionLayoutDimension.fractionalHeight(1)
        )
        
        let item = NSCollectionLayoutItem(layoutSize: size)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 4
        section.orthogonalScrollingBehavior = .paging
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.dataSource = self
        cv.delegate = self
        cv.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        return cv
    }()

    var tweet: Tweet? {
        didSet {
            if let tweet = tweet {

                //Setup other UI elements
                nameLabel.text = tweet.name ?? ""
                twitterHandleLabel.text = tweet.twitterHandle ?? ""
                profileImageView.sd_setImage(with: profileImageUrl) 
            }
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    
        setupViews()
    }
 
    func setupViews() {
    
 
        let mainStack = UIStackView(arrangedSubviews: [
            userHStack,
            mediaCollectionView,
            bottomHStack
        ])
    
        mainStack.axis = .vertical
        mainStack.translatesAutoresizingMaskIntoConstraints = false
    
        addSubview(mainStack)
        mainStack.topAnchor.constraint(equalTo: topAnchor).isActive = true
        mainStack.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        mainStack.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        mainStack.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    
        //Must lower priority otherwise autolayout will complain
        heightConstraint = mediaCollectionView.heightAnchor.constraint(equalToConstant: 0)
        heightConstraint.priority = UILayoutPriority(999)
    
    }

    override func prepareForReuse() {
        super.prepareForReuse()
    
        mediaCollectionView.reloadData()
        tweet = nil
    }
} 

extension TweetCell: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource  {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return tweet?.mediaArray?.count ?? 1
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .systemPink
        return cell
    }
}

//HomeController that displays the feed
class HomeController: UIViewController {

    lazy var collectionView: UICollectionView = {
        let size = NSCollectionLayoutSize(
            widthDimension: NSCollectionLayoutDimension.fractionalWidth(1),
            heightDimension: NSCollectionLayoutDimension.estimated(500)
        )
        
        let item = NSCollectionLayoutItem(layoutSize: size)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)
        
        let section = NSCollectionLayoutSection(group: group)
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.dataSource = self
        cv.delegate = self
        cv.register(TweetCell.self, forCellWithReuseIdentifier: "cell")
        return cv
    }()
    
    var tweets: [Tweet]?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupViews()
        fetchData()
    }
    
    func fetchData() {
        let accessToken = UserDefaults.standard.string(forKey: Constants.UserDefaults.UserAccessTokenKey) ?? ""
        let secretToken = UserDefaults.standard.string(forKey: Constants.UserDefaults.UserSecretTokenKey) ?? ""
                
        TwitterClient.shared.fetchHomeTimeline(accessToken: accessToken, secretToken: secretToken) { (tweets) in
            self.tweets = tweets
            
            DispatchQueue.main.async {
                self.collectionView.reloadData()
            }
        }
    }
    
    
    func setupViews() {

        view.addSubview(collectionView)
        collectionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
    
    
}

extension HomeController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return tweets?.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! TweetCell
        cell.tweet = tweets?[indexPath.item]
        return cell
    }
}

If I hard code the numberOfItemsInSection to a random integer, the mediaCollectionView displays the number of cells correctly. However when set dynamically to tweet?.mediaArray?.count , the number of cells are no longer correct. I believe it is due to the reuse of the collectionViewCell as the counts of these cells starts jumping around as I scroll through the collectionView.

How do I properly reset the collectionView inside TweetCell?

UPDATE:

Attempt 2: -

override func prepareForReuse() {
    
    mediaCollectionView.reloadData()
    tweet = nil
    super.prepareForReuse()
}

Above didn't quite work as well.

Answer 1

Hmmm. I think you have to implement the regular protocols inside the cell and refactoring all your code.

I mean UICollectionViewDelegate (or flownDelegate) and UICollectionViewDataSource.

class TweetCell: UICollectionViewCell,UICollectionViewDelegate,UICollectionViewDataSource {

...