images in UICollectionViewCell of UICollectionView created programatically overlap after scrolling - ios

Question

enter code hereI tried creating a UICollectionView programatically in swift, Then added some images to the UICollectionViewCell (s). The display works fine but when i scroll down the view and come back up again the cells start showing images superimposed on one another(the newer ones overlap on the older ones). I read that recycling of the views happen which causes this problem. I tried a lot but could not find a solution.
I request you all to please help me find a solution
thanks
(this code can be run by adding some images with the names)
//
// ViewController1.swift
// Gridtest
import UIKit
class ViewController1: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
var collectionView: UICollectionView!
var tapStatusHolderArray: Array<Bool> = [Bool]()
var cellCaptureArray: Array<UICollectionViewCell> = [UICollectionViewCell]()
var accountsIdHohderArray: Array<Int16> = [Int16]()
var accountsNameHolderArray: Array<String> = [String]()
var providerNameHolderArray: Array<String> = [String]()
var accountStatusHolderArray: Array<String> = [String]()
var accountsImageNameHolder: Array<String> = [String]()
override func viewDidLoad() {
super.viewDidLoad()
//data loader open
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(100)
accountsNameHolderArray.append("account 1")
providerNameHolderArray.append("twitter")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(101)
accountsNameHolderArray.append("account 2")
providerNameHolderArray.append("facebook")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(102)
accountsNameHolderArray.append("account 3")
providerNameHolderArray.append("linkedin")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(100)
accountsNameHolderArray.append("account 1")
providerNameHolderArray.append("twitter")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(101)
accountsNameHolderArray.append("account 2")
providerNameHolderArray.append("facebook")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(102)
accountsNameHolderArray.append("account 3")
providerNameHolderArray.append("linkedin")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(100)
accountsNameHolderArray.append("account 1")
providerNameHolderArray.append("twitter")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(101)
accountsNameHolderArray.append("account 2")
providerNameHolderArray.append("facebook")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
tapStatusHolderArray.append(false)
accountsIdHohderArray.append(102)
accountsNameHolderArray.append("account 3")
providerNameHolderArray.append("linkedin")
accountStatusHolderArray.append("enabled")
accountsImageNameHolder.append("default_user_image")
//data loader close
// Do any additional setup after loading the view.
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
layout.itemSize = CGSize(width: 70, height: 70)
collectionView = UICollectionView(frame: CGRect(x: self.view.frame.origin.x, y: self.view.frame.origin.y, width: 200, height: 200), collectionViewLayout: layout)
collectionView.dataSource = self
collectionView.delegate = self
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
collectionView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(collectionView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.tapStatusHolderArray.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! UICollectionViewCell
cell.backgroundColor = UIColor.yellowColor()
//create views here
let accountsImageView = UIImageView()
accountsImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
accountsImageView.image = UIImage(named: "default_user_image")
//tap listener for the accounts image view
let tapAccountsImageView = UITapGestureRecognizer(target: self, action: Selector("tapGesture:"))
accountsImageView.tag = indexPath.row
accountsImageView.addGestureRecognizer(tapAccountsImageView)
accountsImageView.userInteractionEnabled = true
let providerImageView = UIImageView()
providerImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
providerImageView.image = UIImage(named: translateProviderNameToImageName(providerNameHolderArray[indexPath.row]))
let checkboxImageView = UIImageView()
checkboxImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
checkboxImageView.image = UIImage(named: "checkbox_unchecked")
//tap listener for the checkbox image view
let tapCheckbox = UITapGestureRecognizer(target: self, action: Selector("tapGesture:"))
checkboxImageView.tag = indexPath.row
checkboxImageView.addGestureRecognizer(tapCheckbox)
checkboxImageView.userInteractionEnabled = true
/************************************************************/
//add subviews here
cell.addSubview(accountsImageView)
cell.addSubview(providerImageView)
cell.addSubview(checkboxImageView)
/************************************************************/
//view dictionary
let viewsDictionary = [
"accountsImageView":accountsImageView,
"providerImageView":providerImageView,
"checkboxImageView":checkboxImageView
]
/************************************************************/
//apply size constraints
//accountsImageView
//1
let accountsImageView_constraint_H = NSLayoutConstraint.constraintsWithVisualFormat(
"H:[accountsImageView(50)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: viewsDictionary)
let accountsImageView_constraint_V = NSLayoutConstraint.constraintsWithVisualFormat(
"V:[accountsImageView(50)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
accountsImageView.addConstraints(accountsImageView_constraint_H)
accountsImageView.addConstraints(accountsImageView_constraint_V)
//2
let providerImageView_constraint_H = NSLayoutConstraint.constraintsWithVisualFormat(
"H:[providerImageView(20)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: viewsDictionary)
let providerImageView_constraint_V = NSLayoutConstraint.constraintsWithVisualFormat(
"V:[providerImageView(20)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
providerImageView.addConstraints(providerImageView_constraint_H)
providerImageView.addConstraints(providerImageView_constraint_V)
//3
let checkboxImageView_constraint_H = NSLayoutConstraint.constraintsWithVisualFormat(
"H:[checkboxImageView(20)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil,
views: viewsDictionary)
let checkboxImageView_constraint_V = NSLayoutConstraint.constraintsWithVisualFormat(
"V:[checkboxImageView(20)]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
checkboxImageView.addConstraints(checkboxImageView_constraint_H)
checkboxImageView.addConstraints(checkboxImageView_constraint_V)
/**************************************************************/
//position constraints
//views
//1
let view_constraint_H = NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-[accountsImageView]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
let view_constraint_V = NSLayoutConstraint.constraintsWithVisualFormat(
"V:|-[accountsImageView]",
options: NSLayoutFormatOptions.AlignAllLeading,
metrics: nil, views: viewsDictionary)
cell.addConstraints(view_constraint_H)
cell.addConstraints(view_constraint_V)
//2
let view_constraint_H1 = NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-45-[providerImageView]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
let view_constraint_V1 = NSLayoutConstraint.constraintsWithVisualFormat(
"V:[providerImageView]-50-|",
options: NSLayoutFormatOptions.AlignAllLeading,
metrics: nil, views: viewsDictionary)
cell.addConstraints(view_constraint_H1)
cell.addConstraints(view_constraint_V1)
//3
let view_constraint_H2 = NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-0-[checkboxImageView]",
options: NSLayoutFormatOptions(rawValue:0),
metrics: nil, views: viewsDictionary)
let view_constraint_V2 = NSLayoutConstraint.constraintsWithVisualFormat(
"V:[checkboxImageView]-5-|",
options: NSLayoutFormatOptions.AlignAllLeading,
metrics: nil, views: viewsDictionary)
cell.addConstraints(view_constraint_H2)
cell.addConstraints(view_constraint_V2)
/***************************************************************/
//set initial status for the cell checkbox
if(tapStatusHolderArray[indexPath.row] == true){
//set the checkbox as checked
checkboxImageView.image = UIImage(named: "checked_checkbox")
}else{
//set checkbox as unchecked
checkboxImageView.image = UIImage(named: "checkbox_unchecked")
}
//load the cell into the array
cellCaptureArray.append(cell)
return cell
}
func tapGesture(sender: UITapGestureRecognizer)
{
/*var index: Int = sender.view!.tag
if(checkedStatusHolderArray[index] == false){
checkedStatusHolderArray[index] = true
(sender.view as! UIImageView).image = UIImage(named: "checked_checkbox")
}else{
checkedStatusHolderArray[index] = false
(sender.view as! UIImageView).image = UIImage(named: "checkbox_unchecked")
}*///old code
/*
this code extracts the index from the tag attached to the sender
In this case the sender could be either the checkboxIV or the accountIV
both have the same tag. The tag is the indexpath.row for the corresponding cell.
The indexpath.row is used to signal the tap gesture recognizer about the view being tapped.
The tap gesture recognizer is asigned to both the views checkboxIV and the accountIV
so that the user can tap on either to allow check and uncheck the checkbox. Both the tap
gestures reconizers do the same function.
The cell inflated are saved inside the checkedStatusHolderArray so that using the index
extracted above we can change the status of the checkboxIV of the corresponding cell.
*/
var index: Int = sender.view!.tag
var cell: UICollectionViewCell = cellCaptureArray[index]
if(tapStatusHolderArray[index] == false){
tapStatusHolderArray[index] = true
let subViews = cell.subviews
//assuming that the order in which the views were added will be maintained
let checkboxIV = subViews[3] as! UIImageView
checkboxIV.image = UIImage(named: "checked_checkbox")
}else{
tapStatusHolderArray[index] = false
let subViews = cell.subviews
//assuming that the order in which the views were added will be maintained
let checkboxIV = subViews[3] as! UIImageView
checkboxIV.image = UIImage(named: "checkbox_unchecked")
}
/*the reson for choosing [3] for the subvies is that at
index 0 the superview is present
index 1 the accountsImageView is present
index 2 the providerImageView is present
index 3 the checkboxImageView is present*/
}
func translateProviderNameToImageName(var provider: String) -> String{
switch provider{
case "twitter":
return "twitter_transparent"
case "facebook":
return "facebook_transparent"
case "linkedin":
return "linkedin-follow"
default:
return "twitter_transparent"
}
}
}

Answer 1

first reset imageview and then try to load
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.imageView.image = nil;
cell.imageView.image = [UIImage imagewithNamed:#"imagename"];