Swift: UIButton image in UICollectionViewCell won't change

Question

I'm new to coding so please excuse me for my messy code. I'm trying to change the image of a button when that button is tapped. The button is located in a UICollectionViewCell which makes this a bit tricky.

This is where the button gets added to the cell:

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    let d = self.data[indexPath.row].image

    let button = UIButton(frame: CGRect(x:0, y:0, width:68,height:80))
    button.setImage(d, for: UIControl.State.normal)
    button.addTarget(self, action: #selector(buttonTapped), for: UIControl.Event.touchUpInside)
   cell.addSubview(button)

    return cell }

This is the data array where the button gets its image from:

var data: [CustomData] = [CustomData]()

override func viewDidLoad() {
       super.viewDidLoad()

       self.data.append(CustomData(title: "abc", image: #imageLiteral(resourceName: "bookOne"), url: "typeURLa"))
       self.data.append(CustomData(title: "def", image: #imageLiteral(resourceName: "bookTwo"), url: "typeURLb"))
       self.data.append(CustomData(title: "ghi", image: #imageLiteral(resourceName: "bookThree"), url: "typeURLc"))
}

This is what happens when the button gets tapped:

        @objc func buttonTapped(sender: UIButton!) {
            print("button tapped")

            let r = data[0]

            print(sender.currentImage!)
            print(r.image)

            sender.setImage(r.image, for: UIControl.State.normal)


            collectionView.reloadData()

            print(sender.currentImage!)
            print(r.image)


        }

In the debug console I can see it did update the button image yet in the simulator the image stays the same.

button tapped
<UIImage:0x600000adad90 named(main: bookTwo) {600, 754}>
<UIImage:0x600000adafd0 named(main: bookOne) {798, 1210}>
<UIImage:0x600000adafd0 named(main: bookOne) {798, 1210}>
<UIImage:0x600000adafd0 named(main: bookOne) {798, 1210}>

When I tap the button in row 2 that holds the image "bookTwo" I want it to change to the image "bookOne". When I print out the image of the button in row 2 after it got tapped, I can see it successfully changed "bookTwo" into "bookOne" image in the debug console. "bookOne" located in the array data[0] and "bookTwo" located in data[1]. But on screen the image "bookTwo" still shows.

Answer 1

The problem is you have been reloading collectionView every time after the cell has been updated. Whenever you reload collectionView collectionViewCellForItemAt method is being called. But in collectionViewCellForItemAt the method had been set to write the image in button as the image in the indexpath.row of the data array. Since the data array is unchanged, the cell is being set back as the default image given by the data array.

Instead you can update the code. The updated code looks like this

@objc func buttonTapped(sender: UIButton!) {
            print("button tapped")
            let row = sender.tag
            let intialData = data[row]

            print(sender.currentImage!)
            print(data[row].image)

            data[row] = CustomData(title: intialData.title, image: #imageLiteral(resourceName: "bookOne"), url: intialData.url)

            sender.setImage(data[row].image, for: UIControl.State.normal)

            print(sender.currentImage!)
            print(data[row].image)
        }

In collectionViewCellForItemAt add this line button.tag = indexPath.row. The updated code looks like this

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    let d = self.data[indexPath.row].image

    let button = UIButton(frame: CGRect(x:0, y:0, width:68,height:80))
    button.setImage(d, for: UIControl.State.normal)
    button.tag = indexPath.row
    button.addTarget(self, action: #selector(buttonTapped), for: UIControl.Event.touchUpInside)
    cell.addSubview(button)

    return cell 
    }