UITableViewCell custom button image not displaying correctly after UITableView scrolled
I have a UITableViewCells that contains a custom button that is an image. When the button is pressed, the image changes. However, when I scroll up and down the tableView, the cell that is being used no longer displays the correct image, or the "tapped" image is displayed elsewhere. I understand this issue is due to cells being deferred and reused. What I was trying to do was create a delegate in my cell class. The delegate calls a method on the tableViewController class. I am doing this with code
self.delegate?.pressedButtonInCell?(self)
However, this doesn't work.
======= custom cell class = ===
import UIKit
@objc protocol BoostCellDelegate{
optional func pressedButtonInCell(cell:BoostCell)
optional func displayAlert (title:String , error: String)
}
class BoostCell: UITableViewCell {
var delegate:BoostCellDelegate?
var boosted = false
var boostedButton = UIImage(named: "boostButtons.png")
@IBOutlet var userImage: UIImageView!
@IBOutlet var name: UILabel!
@IBOutlet var createdAt: UILabel!
@IBOutlet var boostButton: UIButton!
@IBAction func boostPressed(sender: UIButton) {
let objectId = sender.titleLabel!.text!
var query = PFQuery(className:"boostPost")
query.getObjectInBackgroundWithId(objectId) {
(boostPost: PFObject!, error: NSError!) -> Void in
if error != nil {
NSLog("%@", error)
self.delegate?.displayAlert?("Something gone wrong", error: "Might be the bad reception")
} else {
if boostPost != nil{
if boostPost["boostedBy"] != nil {
var boostedByArray : NSArray = boostPost["boostedBy"] as NSArray
if boostedByArray.containsObject(PFUser.currentUser().username){
println("username already boosted")
}
else{
var boostNumber = boostPost["boostNumber"] as Int
boostNumber++
boostPost["boostNumber"] = boostNumber
boostPost.addObject(PFUser.currentUser().username, forKey:"boostedBy")
boostPost.saveInBackground()
println("new username added to boosted")
self.delegate?.pressedButtonInCell?(self)
}
}
else if boostPost["boostedBy"] == nil{
var boostNumber = boostPost["boostNumber"] as Int
boostNumber++
boostPost["boostNumber"] = boostNumber
boostPost.addObject(PFUser.currentUser().username, forKey:"boostedBy")
boostPost.saveInBackground()
println("new username added to boosted")
self.delegate?.pressedButtonInCell?(self)
==================================== code in class tableViewController ====== ===
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as BoostCell
cell.name.text = userNewNames[indexPath.row]
cell.content.text = userNewContent[indexPath.row]
var dateFormatter = NSDateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd"
cell.createdAt.text = userCreatedAt[indexPath.row]
cell.delegate = self
if userBoostedBy[indexPath.row].count == 2 {
cell.boostedBy.text = "1 boost"
}
else if userBoostedBy[indexPath.row].count > 2 {
var count = userBoostedBy[indexPath.row].count - 1
cell.boostedBy.text = "\(count) boosts"
}
else {
cell.boostedBy.text = "0 boost"
}
if (userButtonState[indexPath.row] == true) {
cell.boostButton.setImage(self.boostedButton, forState: UIControlState.Normal)
}
else {
cell.boostButton.setImage(self.unBoostedButton, forState: UIControlState.Normal)
}
userImagesFiles[indexPath.row].getDataInBackgroundWithBlock({ (imageData:NSData!, error:NSError!) in
if error == nil {
let image = UIImage(data: imageData)
cell.userImage.image = image
}
})
cell.boostButton.setTitle(objectIds[indexPath.row], forState: UIControlState.Normal)
func pressedButtonInCell(cell:BoostCell)
{
cell.boostButton.setImage(self.boostedButton, forState: UIControlState.Normal)
}
// function to display the alert message
func displayAlert (title:String , error: String){
var alert = UIAlertController(title: title, message: error, preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "Ok", style: UIAlertActionStyle.Default, handler: {
action in
}))
self.presentViewController(alert, animated: true, completion: nil)
}
return cell
}
source to share
It looks like your method is cellForRowAtIndexPath
using userButtonState[indexPath.row]
to determine if the image for boostButton needs to be changed. So, you just need to change your method pressedButtonInCell
to set the userButtonState to the corresponding line:
func pressedButtonInCell(cell:BoostCell)
{
cell.boostButton.setImage(self.boostedButton, forState: UIControlState.Normal)
if let indexPath = self.tableView.indexPathForCell(cell) {
userButtonState[indexPath.row] = true
}
}
(Supposed to self.tableView
point to your tabular view, unless amended to indicate the correct link). Now when you click a button on a row, the corresponding array element will be set to true
. If the line is then scrolled off the screen when it is scrolled again, the method tableView:cellForRowAtIndexPath:
checks userButtonState
, finds it, true
and updates the image for the button. Conversely, if userButtonState is false, the image is reset (just in case the reused cell had an image boostedButton
).
source to share