在 TableView 上滚动时，tableViewCell 中的按钮图像正在更改

Question

I have an issue while scrolling in the tableView. I implemented the bookmarking in the project, and everything works perfectly, except when scrolling. As it runs for the first time, it calls the API to check if the item is bookmarked or not. If bookmarked, show it displays the filled image, if not, displays the not filled image. It works fine when it loads, for the first time, but when I scroll the bookmark button image changes.

I tried to use prepareForReuse on CustomTableViewCell to solve the issue, and also render the button image on the cellforRow only but didn't work.

Here is the MainViewController:

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

        let itemCell = tableView.dequeueReusableCell(withIdentifier: "NewPodcastTableViewCell", for: indexPath) as! NewPodcastTableViewCell

            let allMaterial = materials[indexPath.row]
            itemCell.setMaterials(materials: allMaterial)
            itemCell.delegate = self
        return itemCell
}

extension BrowseViewController: ViewBookmarkedDelegate  {

    func setBookmark( refId: String, isBookmarking: Bool, refType: String, refSubType: String) {
            let query = SetBookmarkMutation(refId: refId, refType: "material", isBookmarking: true, refSubType: refSubType)
            Apollo.shared.client.perform(mutation: query ) { results, error in
                if var bookmarked = results?.data?.bookmark {
                   print(refId,bookmarked,"onUnbookmark")            

                } else if let error = error {
                    print("Error loading data \(error)")
                }
           }
    }

    func setUnbookmark(refId: String, isBookmarking: Bool, refType: String, refSubType: String) {
            let query = SetBookmarkMutation(refId: refId, refType: "material", isBookmarking: false, refSubType: refSubType)
            Apollo.shared.client.perform(mutation: query ) { results, error in
                if var bookmarked = results?.data?.bookmark {
                    print(refId,bookmarked,"onUnbookmark")

                } else if let error = error {
                    print("Error loading data \(error)")
                }
           }
    }
}

And here is the CustomTableViewCell

protocol ViewBookmarkedDelegate {
    func setBookmark( refId: String, isBookmarking: Bool,  refType: String, refSubType: String)
    func setUnbookmark( refId: String, isBookmarking: Bool, refType: String, refSubType: String)
}

 var delegate: ViewBookmarkedDelegate?

 @IBOutlet weak var bookmarkButton: UIButton!

 @IBAction func bookmarkButtonTapped(_ sender: UIButton) {


    if (self.materials?.fragments.materialFields.bookmark?.bookmarked == false){
                self.bookmarkButton.setImage(#imageLiteral(resourceName: "bookmarkEmpty"), for: .normal)

            } else if (self.materials?.fragments.materialFields.bookmark?.bookmarked == true) {

                self.bookmarkButton.setImage(#imageLiteral(resourceName: "Bookmark Filled"), for: .normal)  
            }  

 func setMaterials(materials: GetMaterialsByTypeQuery.Data.AllMaterial) {
        self.materials = materials
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        self.bookmarkButton.setImage(nil, for: .normal)
    }

Any idea on how to fix the issue?

Thank you in advance.

Answer 1

That happens when you reuse the cells. Just set the bookmark related data in the cell while you are setting the materials and set the image based on that. It would work fine.

Answer 2

Try This

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

    let itemCell = tableView.dequeueReusableCell(withIdentifier: "NewPodcastTableViewCell", for: indexPath) as! NewPodcastTableViewCell

        let allMaterial = materials[indexPath.row]
        itemCell.setMaterials(materials: allMaterial)
        itemCell.delegate = self

        if (allMaterial.fragments.materialFields.bookmark?.bookmarked == false){
            self.bookmarkButton.setImage(#imageLiteral(resourceName: "bookmarkEmpty"), for: .normal)

        } else if (self.materials?.fragments.materialFields.bookmark?.bookmarked == true) {

            self.bookmarkButton.setImage(#imageLiteral(resourceName: "Bookmark Filled"), for: .normal)  
        } 
    return itemCell

}

Answer 3

Change your code of setting image like below

 self.bookmarkButton.setImage(#imageLiteral(resourceName: "Bookmark Filled"), for: .normal)
 if (self.materials?.fragments.materialFields.bookmark?.bookmarked == false){
            self.bookmarkButton.setImage(#imageLiteral(resourceName: "bookmarkEmpty"), for: .normal)

        }

Or just remove else if condtion and use just else condition

  if (self.materials?.fragments.materialFields.bookmark?.bookmarked == false){
            self.bookmarkButton.setImage(#imageLiteral(resourceName: "bookmarkEmpty"), for: .normal)

        } else {

            self.bookmarkButton.setImage(#imageLiteral(resourceName: "Bookmark Filled"), for: .normal)  
        }  

Answer 4

Try to set the bookmark inside cellForRowAt using indexpath so when its scroll it will keep the track of correct cell