ios - UICollectionView 的 UICollectionViewCell 中的图像在滚动后以编程方式创建重叠

Question

在此处输入代码我尝试在 swift 中以编程方式创建一个 UICollectionView，然后将一些图像添加到 UICollectionViewCell (s)。显示效果很好，但是当我向下 ScrollView 并再次返回时，单元格开始显示彼此叠加的图像(较新的重叠在较旧的图像上)。我读到 View 的回收会导致这个问题。我尝试了很多但找不到解决方案。我请求大家帮我找到解决办法

谢谢
(此代码可以通过添加一些带有名称的图像来运行)

//
//  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

先重置imageview再尝试加载

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath]; 
cell.imageView.image = nil; 
cell.imageView.image = [UIImage imagewithNamed:@"imagename"];