How do I clear images from my UIImageView - swift

Question

I have the following code for a compositionalLayout in Swift, but my images are not going away with the reuse of cells.
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
#IBOutlet var collectionView: UICollectionView!
let myInset: CGFloat = 4.0
let dataColors = [UIColor.red, UIColor.blue, UIColor.green, UIColor.magenta, UIColor.purple, UIColor.orange, UIColor.red, UIColor.blue, UIColor.green, UIColor.magenta, UIColor.purple, UIColor.systemYellow, UIColor.red, UIColor.blue, UIColor.green, UIColor.magenta, UIColor.purple, UIColor.orange, UIColor.red, UIColor.blue, UIColor.green, UIColor.magenta, UIColor.purple, UIColor.systemYellow]
let theImages = [
"MEN_8882","002","003","004","005","006","001","002","003","004","005","006",
"MEN_8882","002","003","004","005","006","001","002","003","004","005","006"
]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
collectionView.setCollectionViewLayout(createCustomLayout(), animated: false)
collectionView.backgroundColor = .white
self.collectionView.delegate = self
self.collectionView.dataSource = self
collectionView.register(QuickCell.self, forCellWithReuseIdentifier: "cellID")
//configureCollectionView()
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1//dataColors.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dataColors.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? QuickCell {
cell.backgroundColor = dataColors[indexPath.row]
let mySubView = UIImageView()
mySubView.image = UIImage(named: theImages[indexPath.row])
cell.addSubview(mySubView)
mySubView.translatesAutoresizingMaskIntoConstraints = false
mySubView.topAnchor.constraint(equalTo: cell.topAnchor, constant: myInset).isActive = true
mySubView.leadingAnchor.constraint(equalTo: cell.leadingAnchor, constant: myInset).isActive = true
mySubView.trailingAnchor.constraint(equalTo: cell.trailingAnchor, constant: myInset * (-1)).isActive = true
mySubView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: myInset * (-1)).isActive = true
mySubView.clipsToBounds = true
// mySubView.layer.cornerRadius = 8
mySubView.contentMode = .scaleAspectFit
cell.clipsToBounds = true
cell.layoutIfNeeded()
//cell.layer.cornerRadius = 12
return cell
} else {
return UICollectionViewCell()
}
}
func createCustomLayout() -> UICollectionViewLayout {
let layout = UICollectionViewCompositionalLayout { (section: Int, environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
let myItemInset: CGFloat = 2.0
let leadingItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)))
leadingItem.contentInsets = NSDirectionalEdgeInsets(top: myItemInset, leading: myItemInset, bottom: myItemInset, trailing: myItemInset)
let leadingGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.7), heightDimension: .fractionalHeight(1.0))
let leadingGroup = NSCollectionLayoutGroup.vertical(layoutSize: leadingGroupSize, subitem: leadingItem, count: 1)
let trailingGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.3), heightDimension: .fractionalHeight(1.0))
let trailingGroup = NSCollectionLayoutGroup.vertical(layoutSize: trailingGroupSize, subitem: leadingItem, count: 5)
let fullGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
let fullGroup = NSCollectionLayoutGroup.horizontal(layoutSize: fullGroupSize, subitems: [leadingGroup, trailingGroup])
let section = NSCollectionLayoutSection(group: fullGroup)
section.orthogonalScrollingBehavior = .groupPagingCentered
section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0)
return section
}
return layout
}
}
The image "MEN..." is portrait while the rest are landscape, and as i scroll back and forth, i see overlapping images in the items.
the code for QuickCell is empty - I'm not sure what to put ther, some kind of initalization? But it should work anyways, right?
import UIKit
class QuickCell: UICollectionViewCell {
}

Answer 1

A subview of type UIImageView is added to your custom Cell (QuickCell) each time your collection view cell is resued. It happens in cellForRowAt delegate method.
So, you have to remove previously added image views from your cell first before adding a new one.
I suggest you move your cell configuration code to QuickCell.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath)
if let quickCell = quickCell as? QuickCell {
quickCell.backgroundColor = self.dataColors[indexPath.row]
quickCell.setImage(self.theImages[indexPath.row], insetBy: self.myInset)
return quickCell
}
return cell
}
Do your custom cell configurations here!
class QuickCell: UICollectionViewCell {
func setImage(_ image: UIImage, insetBy inset: CGFloat) {
// Remove previously added image views first if any
for subview in self.subviews where subview.isKind(of: UIImageView.self) {
subview.removeFromSuperview()
}
let imageView = UIImageView()
imageView.image = image
imageView.clipsToBounds = true
imageView.contentMode = .scaleAspectFit
self.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: inset),
imageView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: inset),
imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: inset * (-1)),
imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: inset * (-1))
])
self.layoutIfNeeded()
}
}

Answer 2

To remove image from UIImageView do the following.
yourImageView.image = nil

Answer 3

The problem here is that you are adding a new UIImageView every time the cell is reused. The ones added in previous interations of the cellForItemAtIndexPath: method do not go away, so others are added on top.
These are the problem lines:
let mySubView = UIImageView()
mySubView.image = UIImage(named: theImages[indexPath.row])
cell.addSubview(mySubView)
It would be better to add the image view once when a cell is initialised (or in storyboard with an outlet) then just set the image in the cellForItemAtIndexPath: method.

Answer 4

You keep adding subviews inside cellForItemAt and this causes the overlapping as cells are dequeued , you need to create an outlet for the imageview or create it programmatically inside the cell like
class QuickCell: UICollectionViewCell {
let mySubView = UIImageView()
override init(frame: CGRect) {
super.init(frame: frame)
let myInset: CGFloat = 4.0
self.contentView.addSubview(mySubView)
mySubView.translatesAutoresizingMaskIntoConstraints = false
mySubView.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: myInset).isActive = true
mySubView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: myInset).isActive = true
mySubView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: myInset * (-1)).isActive = true
mySubView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: myInset * (-1)).isActive = true
mySubView.clipsToBounds = true
// mySubView.layer.cornerRadius = 8
mySubView.contentMode = .scaleAspectFit
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
With
cell.mySubView.image = UIImage(named: theImages[indexPath.row])
or
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? QuickCell {
cell.subviews.forEach {
if $0.tag == 333 {
$0.removeFromSuperview()
}
}
cell.backgroundColor = dataColors[indexPath.row]
let mySubView = UIImageView()
mySubView.tag = 333

Answer 5

This is checked by default for UICollectionView, try to uncheck it. It should work for you.