iOS swift UIImageView change image in tableView cell

Question

I have a strange problem in tableView Custom cell. for like Image action I write these code in Custom cell called FeedViewCell:

self.like.isUserInteractionEnabled = true
let CommenttapGestureRecognizer = UITapGestureRecognizer(target:self, action:#selector(likehandleTap))
self.like.addGestureRecognizer(CommenttapGestureRecognizer)

func likehandleTap(_ sender: UITapGestureRecognizer) {

    if self.like.image == UIImage(named: "like-btn-inactive") {

        self.like.image = UIImage(named: "like-btn-active")

    } else {
        self.like.image = UIImage(named: "like-btn-inactive")
    }
}

and TableViewController:

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

    let cell = tableView.dequeueReusableCell(withIdentifier: "FeedCell", for: indexPath) as! FeedViewCell

    return cell
}

but as you see in this video when I touch the like button in index 0 and change the image, the like button in index 3 change image also. can you guys tell me my mistake please?

thanks

You should have take button and give image to it. You can easily manage this thing with button. If you want answer then I will post — Jitendra Modi, Oct 15 '16 at 10:07
dear @Jecky the problem still exist with button, nothing change — Mohammadreza, Oct 15 '16 at 10:12
I have the same problem: http://stackoverflow.com/questions/40049590/reusing-cell-doesnt-work-well-tableview/40050084#40050084 — Carlo, Oct 15 '16 at 10:16
Yes. The difference is only that I have a button and you have an image. It is something about reusing cells. — Carlo, Oct 15 '16 at 10:24
https://www.dropbox.com/s/zedbmuqsmynx5zn/Untitled.mov?dl=0 @MohammadReza You want like this? — Jitendra Modi, Oct 15 '16 at 10:24
Cells are reused, so you can't rely on the cell to store state. You need to store liked/unliked state in your data model somewhere and then use that in `cellForRowAtIndexPath` and in your button handler; you should also use delegation or a closure to allow the tableview controller to handle the tap rather than having the logic in the cell — Paulw11, Oct 15 '16 at 10:26
@Paulw11, you can help me with code also in my question please? http://stackoverflow.com/questions/40049590/reusing-cell-doesnt-work-well-tableview/40050084#40050084 — Carlo, Oct 15 '16 at 10:30
@MohammadReza try Jecky answer its work perfectly i try it and i got a the result so you also try it . — Himanshu Moradiya, Oct 15 '16 at 11:16

score 3 · Accepted Answer · answered Oct 15 '16 at 11:52

3

Try code its working 100%

  var selectindex : Int?
  var selectedindex : NSMutableArray = NSMutableArray()
  @IBOutlet var tableview: UITableView!

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("LikeCell", forIndexPath: indexPath)

        let like: UIButton = (cell.viewWithTag(2) as! UIButton)
        let comment: UIButton = (cell.viewWithTag(3) as! UIButton)
        if selectedindex.containsObject(indexPath.row) {
                like.setBackgroundImage(UIImage.init(named: "like.png"), forState: .Normal)
        }else{
                like.setBackgroundImage(UIImage.init(named: "like (1).png"), forState: .Normal)
        }
       comment.setBackgroundImage(UIImage(named: "chat.png"), forState: UIControlState.Normal)
        like.addTarget(self, action: #selector(self.CloseMethod(_:event:)), forControlEvents: .TouchDown)
        comment.addTarget(self, action: #selector(self.CloseMethod1(_:event:)), forControlEvents: .TouchDown)

        return cell

    }



 @IBAction func CloseMethod(sender: UIButton, event: AnyObject) {

        let touches = event.allTouches()!
        let touch = touches.first!
        let currentTouchPosition = touch.locationInView(self.tableview)
        let indexPath = self.tableview.indexPathForRowAtPoint(currentTouchPosition)!
        selectindex = indexPath.row
        if selectedindex.containsObject(selectindex!) {
            selectedindex.removeObject(selectindex!)
        }else{
              selectedindex.addObject(selectindex!)
        }
        self.tableview.reloadData()
    }

answered Oct 15 '16 at 11:52

Himanshu Moradiya

4,769
4
25
49

https://www.dropbox.com/sh/d5gzw4ocqgprfj4/AAAdRCEFv1iToXxwbDGuerWta?dl=0 – Himanshu Moradiya Oct 15 '16 at 12:01
I try your code yesterday brother, but I have a new problem with your code, it happened when tableView.reloadData called. see video here: https://dl.dropboxusercontent.com/u/8744173/quickcast-24-07-1395-03-43-51.mp4 – Mohammadreza Oct 15 '16 at 12:17
right now i create one demo so howz its possible that you try my code ? – Himanshu Moradiya Oct 15 '16 at 12:18
you send me yesterday, remember? but I try this code now and the new problem (tableview jump) is still exist – Mohammadreza Oct 15 '16 at 12:21
No its right now running on my pc and i dont get any problem . send me your whole project i did changes in your this code and run this project in mine pc and i again send it to you – Himanshu Moradiya Oct 15 '16 at 12:24
@MohammadReza you have mine email id ? so send it – Himanshu Moradiya Oct 15 '16 at 12:24
it happened (tableview jumping) because UITableViewAutomaticDimension – Mohammadreza Oct 15 '16 at 12:52
Did you watch my video that i comment above ? and why you use UITableViewAutomaticDimension animation ? – Himanshu Moradiya Oct 15 '16 at 12:53
yes I watched, you code works fine except tableView jump problem, I use UITableViewAutomaticDimension because my cell height not static and it change depend on content height – Mohammadreza Oct 15 '16 at 12:56
@MohammadReza try once just comment that line and run your project with my code and check it and approve my answer brother . – Himanshu Moradiya Oct 15 '16 at 12:58

score 0 · Answer 2 · edited Oct 15 '16 at 10:46

0

Take one array

let arr : NSMutableArray = NSMutableArray()

And in tableview take button instead of image and set unlike image in button and set your images instead of my images

 func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

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

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)

        let btn = cell.viewWithTag(10) as! UIButton
        btn.addTarget(self, action: #selector(ViewController.connected(_:)), forControlEvents: .TouchUpInside)
        return cell
    }

    func connected(sender: UIButton){
        let buttonposition = sender.convertPoint(CGPointZero, toView: self.tblview)
        let index = self.tblview.indexPathForRowAtPoint(buttonposition)

        if !arr.containsObject((index?.row)!) {
            arr.addObject((index?.row)!)
            sender.setImage(UIImage(named: "ic_check.png"), forState: .Normal)
        }else
        {
            arr.removeObject((index?.row)!)
            sender.setImage(UIImage(named: "ic_uncheck.png"), forState: .Normal)
        }

    }

edited Oct 15 '16 at 10:46

Himanshu Moradiya

4,769
4
25
49

answered Oct 15 '16 at 10:40

Jitendra Modi

2,344
12
34

An `IndexSet` is a better structure than an array for this task – Paulw11 Oct 15 '16 at 10:45
Also, you should use a delegate or a closure to get the action from the cell rather than setting an action handler between classes - http://stackoverflow.com/questions/28659845/swift-how-to-get-the-indexpath-row-when-a-button-in-a-cell-is-tapped/38941510#38941510 – Paulw11 Oct 15 '16 at 10:46
Yeah, I can do that. Thank you I will try it @Paulw11 – Jitendra Modi Oct 15 '16 at 10:54
@MohammadReza Download demo from here https://www.dropbox.com/s/4d3dva6rxsic6u6/Demo%20in%20Swift%202.0.zip?dl=0 – Jitendra Modi Oct 15 '16 at 11:19
@MohammadReza Got it or not ? – Jitendra Modi Oct 15 '16 at 11:26
@Jecky yes thanks, but your code have a problem like my code!! see here : https://dl.dropboxusercontent.com/u/8744173/quickcast-24-07-1395-03-03-30.mp4 – Mohammadreza Oct 15 '16 at 11:35
@Jecky do you have an idea why on my simulator work like that? – Mohammadreza Oct 15 '16 at 12:53

score 0 · Answer 3 · answered Oct 15 '16 at 10:43

That's why you are changing the image loaded in the imageView and then with method tableView.dequeueReusableCell you are reusing that cell with the changed image.

In iOS UITableView and UICollectionView apply the concept of reusable cells. They don't create one cell for every element of the array; they just create 3-4 cells and then they'll reuse it just changing the content inside. That's a great thing because it allows developers to create tables with hundreds of rows without having memory issues.

These are the steps followed by the tableView (and also collectionView) to show the array of elements:

prepareForReuse
cellForRowAtIndexPath
willDisplayCell

To solve your problem you have just to check the like in the cellForRowAtIndexPath

Example:

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

    let cell = tableView.dequeueReusableCell(withIdentifier: "FeedCell", for: indexPath) as! FeedViewCell

    let model = arrayOfElements[indexPath.row]
    if model.isLiked {
        cell.like.image == UIImage(named: "like-btn-active")
    } else {
        cell.like.image == UIImage(named: "like-btn-active")
    }

    return cell
}

iOS swift UIImageView change image in tableView cell

3 Answers3

Linked