UICollectionView didSelectItemAt() and adding/removing a view based on state - swift

Question

I would like to add a checkmark to a selected cell. If the cell is then deselected (and thus another is selected), I would like to remove the checkmark. The top image view is independent from the collection view and represents the selected cell from a user's Camera Roll. The collection view's data source is the list of images fetched from PHAssets.
The problem is that if I don't reload the item at the indexPath, the deselected cell checkmark doesn't get removed. Also, if I scroll through the collection view, I'll see random checkmarks from cells I didn't even tap. I'm assuming it has to do with the reusing of the cells. Can anyone please help me?
Below is snippets of my code from the view controller and the cell...
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
let requestOptions = PHImageRequestOptions()
requestOptions.isSynchronous = true
requestOptions.isNetworkAccessAllowed = true
requestOptions.deliveryMode = .highQualityFormat
photoManager.requestImage(for: photoAssets![indexPath.row], targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFill, options: requestOptions, resultHandler: { (image, nil) in
cell.photoView.image = image
})
if cell.isSelected {
cell.setupCheckmarkBanner()
}
else {
cell.removeCheckmarkBanner()
}
if indexPath.row == 0 && self.isFirstLoad {
self.selectedImageView.image = cell.photoView.image
collectionView.selectItem(at: indexPath, animated: false, scrollPosition: UICollectionViewScrollPosition.bottom)
cell.setupCheckmarkBanner()
self.isFirstLoad = false
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
previousIndexPath = indexPath
collectionView.reloadItems(at: [indexPath])
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if previousIndexPath != indexPath {
collectionView.reloadItems(at: [indexPath])
guard let cell = collectionView.cellForItem(at: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
selectedImageView.image = cell.photoView.image
}
}
class PhotosCell: UICollectionViewCell {
let photoView = UIImageView()
var checkmarkBannerImageView: UIImageView?
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(photoView)
photoView.anchor(top: topAnchor, left: leadingAnchor, bottom: bottomAnchor, right: trailingAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupCheckmarkBanner() {
checkmarkBannerImageView = UIImageView(image: #imageLiteral(resourceName: "check").withRenderingMode(.alwaysTemplate))
checkmarkBannerImageView?.contentMode = .center
checkmarkBannerImageView?.contentScaleFactor = 4.0
checkmarkBannerImageView?.tintColor = .white
checkmarkBannerImageView?.setBottomBorder(for: .white)
checkmarkBannerImageView?.convertToCircle(value: 12)
photoView.addSubview(checkmarkBannerImageView!)
checkmarkBannerImageView?.anchor(top: photoView.topAnchor, left: nil, bottom: nil, right: photoView.trailingAnchor, paddingTop: 4, paddingLeft: 0, paddingBottom: 0, paddingRight: 4, width: 24, height: 24)
}
func removeCheckmarkBanner() {
checkmarkBannerImageView?.removeFromSuperview()
checkmarkBannerImageView?.constraints.forEach{$0.isActive = false }
checkmarkBannerImageView = nil
}
}

Answer 1

to avoid unwanted content in reused cell, you can override the prepareForReuse() method and, in there, do all the setup work (e.g. hide the checkmark)

Answer 2

You have to save the indexpath of the selected cell (create a property and assign during the DidSelect and DidDescelect, and during cellForRow you check to see if the indexpath is the same, if yes, put the checkmark, if not remove the checkmark.
That way when the cell gets reused the ui setup will be refreshed.
Also, during deselect/select, do a reloadCellAtIndexPath/reloadItems only for the rows that changed to avoid reloading all the cells again.
EDIT:
Well, first thing I would change is, all the logic you have inside the block for photoManager.requestImage I would move outside as this is probably an async method.
Second, you are not setting up or removing the checkmark in every cell when you should since when it gets reused this method gets called.
This is just an example:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
let requestOptions = PHImageRequestOptions()
requestOptions.isSynchronous = true
requestOptions.isNetworkAccessAllowed = true
requestOptions.deliveryMode = .highQualityFormat
photoManager.requestImage(for: photoAssets![indexPath.row], targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFill, options: requestOptions, resultHandler: { (image, nil) in
cell.photoView.image = image
if indexPath.row == 0 && self.isFirstLoad {
self.selectedImageView.image = image
}
})
if indexPath.row == 0 && self.isFirstLoad {
collectionView.selectItem(at: indexPath, animated: false, scrollPosition: UICollectionViewScrollPosition.bottom)
self.isFirstLoad = false
}
if cell.isSelected { // dont remember if this is the correct method
cell.setupCheckmarkBanner()
} else {
cell.removeCheckmarkBanner()
}
return cell
}

Answer 3

I figured it out! It has to be done after dequeueing...
import UIKit
import Photos
class PhotosViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
let selectedImageView = UIImageView()
var photoAssets: PHFetchResult<PHAsset>?
let photoManager = PHImageManager.default()
var selectedIndexPath: IndexPath = IndexPath(row: 0, section: 0)
let collectionView: UICollectionView = {
let collectionViewFlowLayout = UICollectionViewFlowLayout()
collectionViewFlowLayout.sectionInset = UIEdgeInsetsMake(0, 2, 0, 2)
collectionViewFlowLayout.minimumInteritemSpacing = 0
collectionViewFlowLayout.minimumLineSpacing = 2
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewFlowLayout)
collectionView.backgroundColor = .white
return collectionView
}()
private let photoCellReuseIdentifier = "photoCell"
var photos = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
view.addSubview(selectedImageView)
view.addSubview(collectionView)
collectionView.dataSource = self
collectionView.delegate = self
fetchAssets()
selectedImageView.anchor(top: view.topAnchor, left: view.leadingAnchor, bottom: collectionView.topAnchor, right: view.trailingAnchor, paddingTop: 0, paddingLeft: 2, paddingBottom: 2, paddingRight: 2, width: 0, height: view.bounds.height/1.5)
collectionView.anchor(top: nil, left: view.leadingAnchor, bottom: view.bottomAnchor, right: view.trailingAnchor, paddingTop: 5, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
collectionView.register(PhotosCell.self, forCellWithReuseIdentifier: photoCellReuseIdentifier)
}
private func fetchAssets() {
guard let cameraRollPhotoCollection = PHAssetCollection.fetchAssetCollections(with: .smartAlbum, subtype: .smartAlbumUserLibrary, options: nil).firstObject else { return }
let assetOptions = PHFetchOptions()
let sortDescriptor = NSSortDescriptor(key: "creationDate", ascending: false)
assetOptions.sortDescriptors = [sortDescriptor]
photoAssets = PHAsset.fetchAssets(in: cameraRollPhotoCollection, options: assetOptions)
let requestOptions = PHImageRequestOptions()
requestOptions.isSynchronous = true
requestOptions.isNetworkAccessAllowed = true
requestOptions.deliveryMode = .highQualityFormat
guard let photoAssets = photoAssets else { return }
let photoAssetsCount = photoAssets.count - 1
for assetIndex in 0..<photoAssetsCount {
photoManager.requestImage(for: photoAssets[assetIndex], targetSize: CGSize(width: 100, height: 100), contentMode: .aspectFill, options: requestOptions, resultHandler: { (image, nil) in
guard let image = image else { return }
self.photos.append(image)
})
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return photos.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
cell.photoView.image = photos[indexPath.row]
if indexPath == selectedIndexPath {
cell.setupCheckmarkBanner()
}
else {
cell.removeCheckmarkBanner()
}
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width = view.bounds.size.width/3 - 3
let height = view.bounds.size.height/5
return CGSize(width: width, height: height)
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if collectionView.indexPathsForVisibleItems.contains(indexPath) {
guard let deselectedCell = collectionView.cellForItem(at: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
deselectedCell.removeCheckmarkBanner()
}
else {
collectionView.deselectItem(at: indexPath, animated: false)
}
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard let selectedCell = collectionView.cellForItem(at: indexPath) as? PhotosCell else { fatalError("Couldn't return a photo cell") }
selectedIndexPath = indexPath
selectedCell.setupCheckmarkBanner()
}
}
extension PhotosViewController: ImageDismissalDelegate {
func sendProfilePictureImage(picture: UIImage) {
}
}