iosswiftuitableviewsocial-media-like

Implementing a like button in a tableviewCell in swift


I am trying to make a like button in each of my tableview cells. When it is pressed, the button will change to "unlike". I was able to do this by creating an IBOutlet in my subclass and an IBAction Method in my tableviewcontroller class using sender.setTitle("unlike",forState: UIControlState.Normal). But when I click it, the method turns a bunch of other tableviewcell's button's to "unlike" as well, essentially duplicating the behavior of one cell. The way it does this is that it changes every other cell, so if I click the "like" button of 2 consecutive cells, all cells in the table view will turn to "unlike". Here is my code for the tableViewController:

class TableViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as TableViewCell
        cell.tag = indexPath.row
        cell.like.tag = indexPath.row
        cell.like.addTarget(self, action: "handleLikes:", forControlEvents: .TouchUpInside)
        return cell
    }

    @IBAction func handleLikes(sender: AnyObject){
        println(sender.tag) // This works, every cell returns a different number and in order.
        sender.setTitle("Pressed", forState: UIControlState.Normal)
    }

And here is my code for the TableViewCell class:

class TableViewCell: UITableViewCell {

    @IBOutlet weak var like: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code

    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Also, This is unrelated, but if anyone reading this could tell me how I could improve my style and/or clarity of code, I would appreciate that as well.


Solution

  • UITableViewCells are reusable. This means that you must set the title to "unlike" or "like" for each cell. Easiest way, since I suppose you will be reading in data anyways, would be to create an array of Strings in your ViewController

    Add this to your ViewController: var likes: [String]!

    in ViewDidLoad: likes = [String](count: 20, repeatedValue: "like") Note that the length should be based on the number of UITableViewCells that you will display.

    Your cellForRowAtIndexPath:

    func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as TableViewCell
        cell.like.tag = indexPath.row
        cell.like.addTarget(self, action: "handleLikes:", forControlEvents: .TouchUpInside)
        cell.like.setTitle(likes[indexPath.row], forState: UIControlState.Normal)
        return cell
    }
    

    handleLikes function:

    func handleLikes(sender: AnyObject){
        println(sender.tag) // This works, every cell returns a different number and in order.
        if likes[sender.tag] == "like" {
            likes[sender.tag] = "unlike"
        }
        else {
            likes[sender.tag] = "like"
        }
        sender.setTitle(likes[sender.tag], forState: UIControlState.Normal)
    }