iosswiftuitableviewuikitsdwebimage

Ios images and labels keep loading while scrolling


I'm writing a demo to show user's tweets.

The question is: Every time I scroll to the bottom and then scroll back, the tweet's images and comments are reloaded, even the style became mess up. I know it something do with dequeue, I set Images(which is an array of UIImageView) to [] every time after dequeue, but it is not working. I'm confused and couldn't quite sleep....

Here is core code of my TableCell(property and Images set), which provide layout:

class WechatMomentListCell: UITableViewCell{
    
    static let identifier = "WechatMomentListCell"
    
    var content = UILabel()
    var senderAvatar = UIImageView()
    var senderNick = UILabel()
    var images = [UIImageView()]
    var comments = [UILabel()]


  override func layoutSubviews() {
//there is part of Image set and comments
        if images.count != 0 {
            switch images.count{
            case 1:
                contentView.addSubview(images[0])
                images[0].snp.makeConstraints{ (make) in
                    make.leading.equalTo(senderNick.snp.leading)
                    make.top.equalTo(content.snp.bottom)
                    make.width.equalTo(180)
                    make.height.equalTo(180)
                }
            default:
                for index in 0...images.count-1 {
                    contentView.addSubview(images[index])
                    images[index].snp.makeConstraints{ (make) in
                        make.leading.equalTo(senderNick.snp.leading).inset(((index-1)%3)*109)
                        make.top.equalTo(content.snp.bottom).offset(((index-1)/3)*109)
                        make.width.equalTo(90)
                        make.height.equalTo(90)
                    }
                }
            }
        }
        if comments.count != 0, comments.count != 1 {
            for index in 1...comments.count-1 {
                comments[index].backgroundColor = UIColor.gray
                contentView.addSubview(comments[index])
                comments[index].snp.makeConstraints{(make) in
                    make.leading.equalTo(senderNick)
                    make.bottom.equalToSuperview().inset(index*20)
                    make.width.equalTo(318)
                    make.height.equalTo(20)
                }
            }
        }
    }

Here is my ViewController, which provide datasource:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let tweetCell = tableView.dequeueReusableCell(withIdentifier: WechatMomentListCell.identifier, for: indexPath) as? WechatMomentListCell else {
            fatalError("there is no WechatMomentList")
        }
        
        let tweet = viewModel.tweetList?[indexPath.row]
        for i in tweet?.images ?? [] {
            let flagImage = UIImageView()
            flagImage.sd_setImage(with: URL(string: i.url))
            tweetCell.images.append(flagImage)
        }

        for i in tweet?.comments ?? [] {
            let flagComment = UILabel()
            flagComment.text = "\(i.sender.nick) : \(i.content)"
            tweetCell.comments.append(flagComment)
        }
        return tweetCell
    }

The Images GET request has been define at ViewModel using Alamofire.

The firsttime is correct. However, If I scroll the screen, the comments will load again and images were mess up like this.


Solution

  • I found the problem in your tableview cell. in cell you have two variables like this.

    var images = [UIImageView()]
    var comments = [UILabel()]
    

    Every time you using this cell images and comments are getting appended. make sure you reset these arrays every time you use this cell. like setting theme empty at initialization.