Value changes on scroll UITableView - ios

Question

I have a UITableView with a button in that's toggled depending on whether a user 'favorites' a post or not. Everything works well, except for when the table view is scrolled, the button changes. Here's my code:
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
guard let feed = self.feed else {
return 0
}
return feed.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
if feed!.count > 9 {
if indexPath.row == feed!.count - 1 {
self.loadMorePosts()
}
}
if hasImageAtIndexPath(indexPath) {
return imageCellAtIndexPath(indexPath)
} else {
return basicCellAtIndexPath(indexPath)
}
}
func hasImageAtIndexPath(indexPath:NSIndexPath) -> Bool {
let post = self.feed?[indexPath.row]
if post?.image?.isEmpty == false {
return true
}
return false
}
func imageCellAtIndexPath(indexPath:NSIndexPath) -> PostCellImage {
let cell:PostCellImage = self.tableView.dequeueReusableCellWithIdentifier("imageCell", forIndexPath: indexPath) as! PostCellImage
if let post = self.feed?[indexPath.row] {
let likedPost = post.hasFavorited
if likedPost == true {
if let favoriteCount = post.favoriteCount {
let count = String(favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
cell.likeButton.setImage(UIImage(named: "liked"), forState: .Normal)
cell.likeButton.setTitleColor(UIColorFromRGB("A61224"), forState: .Normal)
cell.likeButton.addTarget(self, action: "unfavoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
}
} else {
if let favoriteCount = post.favoriteCount {
let count = String(favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
cell.likeButton.addTarget(self, action: "favoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
}
}
}
return cell
}
Favorited Posts Array
var favoritedPosts = [Int]()
Table View
if let likedPost = post.hasFavorited {
if likedPost == true {
self.favoritedPosts.append(indexPath.row)
print(self.favoritedPosts)
}
}
if self.favoritedPosts.contains(indexPath.row) {
let count = String(post.favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
cell.likeButton.setImage(UIImage(named: "liked"), forState: .Normal)
cell.likeButton.setTitleColor(UIColorFromRGB("A61224"), forState: .Normal)
cell.likeButton.addTarget(self, action: "unfavoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
} else {
let count = String(post.favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
cell.likeButton.addTarget(self, action: "favoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
}

Answer 1

In your UITableViewCell PostCellImage subclass you should override prepeareForReuse function - to turn cell to default mode.
Swift:
override func prepareForReuse() {
super.prepareForReuse()
//set cell to initial state here
//set like button to initial state - title, font, color, etc.
}

Answer 2

This might be cased by the table view cell reuse. It turns out that your code set the likeButton.image when the post is a favorited post but did not remove the image when the post is not a favorited one. So when the first time each cell is loaded into tableView every thing works fine. However, when scrolling the tableView, when those cells with favorite image set moves out of the screen area, they will be reused for the cell scrolling in. Thus if this kind of cell is reused by a post that is even not favorited, the image will still be there.
There is a prepareForReuse method for UITableViewCell, it gives you the chance to reset the contents before a cell is being reused.

Answer 3

You need to completely reset the appearance for normal case here.
Reason is you can't be sure which state of the button you get when
cells are reused.
When you receive a dequeued cell, it might have a
button with 'liked'/'not-liked' state.
Completing the appearance with two commented out lines in the else clause will resolve your problem.
if self.favoritedPosts.contains(indexPath.row) {
let count = String(post.favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
cell.likeButton.setImage(UIImage(named: "liked"), forState: .Normal)
cell.likeButton.setTitleColor(UIColorFromRGB("A61224"), forState: .Normal)
cell.likeButton.addTarget(self, action: "unfavoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
} else {
let count = String(post.favoriteCount)
cell.likeButton.setTitle(count, forState: .Normal)
// Uncomment these two lines and add proper values for image / color to resolve your problem
// cell.likeButton.setImage(UIImage(named: "not-liked-yet"), forState: .Normal)
// cell.likeButton.setTitleColor(UIColorFromRGB("A67832"), forState: .Normal)
cell.likeButton.addTarget(self, action: "favoritePost:", forControlEvents: UIControlEvents.TouchUpInside)
cell.likeButton.tag = post.id!
}
Hope this helps.

Answer 4

You can try prepareForReuse or try to set unlike image in the case likedPost == false