How do stop repeating images in TableView Cell - ios

Question

I created programmatically a ImageView in the cellForRowAt method and added also to the cell:
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
It works, there is nothing to grumble. Now I want to show this image only if the indexpath.row equals 2, so I added a simple if-statement:
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
}
It works. But when I scroll down, some cells have the image too. I suspected there works something wrong in the cellForRowAt, so I added in the UITableViewCell the method prepareForReuse to hidden each imageView and only if the if-statement is true, the hide will be remove:
override func prepareForReuse() {
super.prepareForReuse()
self.imageView!.isHidden = true
}
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
imageView.isHidden = false
cell.addSubview(imageView)
}
Unfortunately it doesn't work and I have no idea what I could improve.

Answer 1

prepareForReuse in your cell's subclass is referencing the subclass' property imageView and setting it to hidden. However, in your if statement, you are creating a new image view and adding it to the cell's hierarchy. This is a bad idea as it'll never be removed and more and more will be added as you scroll around.
Instead, reference the cell's image view:
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
cell.imageView?.image = image
cell.imageView?.isHidden = false
}

Answer 2

In cellForRowAt add the else part with the empty imageView to solve this issue.
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
} else { // ## Add this else methode.
let imageView = UIImageView()
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
}

Answer 3

Hi the problem with your code is when the cell is reused the imageView is still in the hierarchy, so in prepareForReuse remove the subviews that are of type image view simply also because the cell already had default imageview so create a new imageView class and remove of that specific type, Im adding code for it, Hope it helped :).
class CustomImageView : UIImageView { //CustomImageView
}
func removeCustomImageViewIfNeeded() {
self.subviews.forEach { (subView) in
if subView is CustomImageView {
subView.removeFromSuperview()
}
}
}
override func prepareForReuse() {
super.prepareForReuse()
removeCustomImageViewIfNeeded()
}
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = CustomImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
imageView.isHidden = false
cell.addSubview(imageView)
}else {
removeCustomImageViewIfNeeded()
}