Swift 4 TableView Cell not Displaying correct images

问题

When I scroll the tableView the UIImageView is not displaying the correct image. How can I accomplish this correctly in the swift 4 language.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")

        //Transform Data From ^ to load at the bottom
        tableView.transform = CGAffineTransform (scaleX: 1,y: -1);
        cell?.contentView.transform = CGAffineTransform (scaleX: 1,y: -1);
        cell?.accessoryView?.transform = CGAffineTransform (scaleX: 1,y: -1);


        let username = cell?.viewWithTag(1) as! UITextView
        username.text = messageArray[indexPath.row].username

        let message = cell?.viewWithTag(2) as! UITextView
        message.text = messageArray[indexPath.row].message

        let timeStamp = cell?.viewWithTag(3) as! UILabel
        timeStamp.text = messageArray[indexPath.row].timeStamp

        let imageView = cell?.viewWithTag(4) as! UIImageView
        let urlString = messageArray[indexPath.row].photoUrl
        imageView.layer.cornerRadius = 10
        imageView.clipsToBounds = true

        //Load profile image(on cell) with URL & Alamofire Library
        let downloadURL = NSURL(string: urlString!)
        imageView.af_setImage(withURL: downloadURL! as URL)

        return cell!
    }

回答1:

Set imageView.image = nil in the beginning of cellForRowAtIndexPath method. You are reusing cells. Sometimes you need to reset cell components.

回答2:

Your solution: Since cell is reusable so you need to update image every time when cell for calls.

Best Practice: I think you can do this think in much better way and avoid force unwrapping.

Use SDWebCache [https://github.com/rs/SDWebImage] pod for image downloading and cache as you every time calling same image via network request.
Use Model way to bind data with cell.

Cell class

import UIKit
import SDWebCache

public struct TableCellModel {
    var username: String
    var imageURL: String
    var messsage: String
    var timeStamp: String
}

class TableCell: UITableViewCell {

    @IBOutlet weak var username: UITextView!
    @IBOutlet weak var message: UITextView!
    @IBOutlet weak var timeStamp: UITextView!
    @IBOutlet weak var imageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    var item: Any? {
        didSet {
            self.configure(item)
        }
    }

    func configure(_ item: Any?) {
        if let model = item as? TableCellModel {
            self.username.text = model.username
            self.message.text = model.message
            self.timeStamp.text = model.timeStamp
            if let url = URL(model.imageURL) {
                self.imageView.sd_setImageWithURL(url)
            }
        }
    }
}

Assign this class to your tableview cell's custom class in storyboard
In your view controller declare var cellItems: [TableCellModel] = []
Initialize array in viewDidLoad() like

In view Controller : call this method in viewDidLoad()

func setupData() {
        self.cellItems =  [TableCellModel(username: "ABC", imageURL: "www....", message: "your message", timeStamp: "22.33.2222" ),
                            TableCellModel(username: "ABC", imageURL: "www....", message: "your message", timeStamp: "22.33.2222" ),
                            TableCellModel(username: "ABC", imageURL: "www....", message: "your message", timeStamp: "22.33.2222" ),
                            TableCellModel(username: "ABC", imageURL: "www....", message: "your message", timeStamp: "22.33.2222" )]

self.tableView.reloadData()
}

And tableView cellforRow delegate be like

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TableCell
    cell.item = self.cellItems[indexpath.row]
    return cell
}

回答3:

We are using reusable cell here , it indeed reuses the cell with the old image. Then you need to update it every time the cell is shown in cellForRowAtIndexPath:

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! MenuTableViewCell
        //MARK:-  Show the image
        let imgName = "menu_\(indexPath.row + 1)"
        //MARK:- Disable the UITableView selection highlighting
        cell.selectionStyle = .none
        return cell
    }

You can set your image in your Assets.xcassetslike this or any format you want-

来源：https://stackoverflow.com/questions/49247175/swift-4-tableview-cell-not-displaying-correct-images

标签

ios

swift

uitableview

alamofire