CollectionView 中的复选框在滚动时改变位置 [英] Check Boxes in CollectionView are changing positions when scrolling

问题描述

我有 collectionView (3*3) 和我从服务器加载的图像，我在每个单元格的左上角放置了一个复选框，以便我可以选择单元格，并根据选定的单元格获得 ID各自的单元格图像(来自服务器的 ID)，我能够做正确的一切.但是，问题是如果有 20 张图像，如果我检查第一次加载的 5 个随机单元格，当我向下滚动以选择其他单元格时，其他 5 个随机复选框已经被选中，如果我再次向上滚动其他一些检查 5 个随机单元格.由于 UICollectionView DataSource 方法的 cellForItemAtIndexPath 中的出队可重用属性，选中的复选框似乎正在改变位置..

I have collectionView (3*3) with Images I am loading from server and I placed a checkBox in the top left corner of each cell so that I can select the cells and based on the selected cells I will get ids for the respective cells images(ids coming from server) and I am able do everything right. But, the problem is if there is are 20 images and if I check the 5 random cells which are loaded for the first time and when I scroll down to select other cells 5 other random checkBoxes are already checked and if I scroll up again some other 5 random cells are checked. It appears that the checked checkBoxes are changing positions because of the dequeue reusable property in the cellForItemAtIndexPath of UICollectionView DataSource method..

我不知道如何克服这个问题.如果有人知道如何做到这一点，请帮助我.我在我到目前为止编写的代码和一些模拟器屏幕截图下面张贴，以便更好地理解问题...

I have no Idea how to overcome this problem. Please help me If any one knows how to do this. I am posting below the code I wrote so far and some simulator screenshots for better understanding of the problem...

import UIKit
import Alamofire

protocol CheckBoxState {
    func saveCheckBoxState(cell: EditCertificateCell)
}

class EditCertificatesViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var certificatesCollectionView: UICollectionView!

    var certificatesArray = [Certificates]()

     override func viewDidLoad() {
         super.viewDidLoad()
         self.title = "Delete Certificates"
         navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
     }

     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

         return certificatesArray.count
     }

     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "editCertificate", for: indexPath)  as! EditCertificateCell
         if let certificateURL = URL(string: certificatesArray[indexPath.item].imagePath) {
             cell.certificateImage.af_setImage(withURL: certificateURL)
         }
         cell.certificateId.text = "\(certificatesArray[indexPath.item].imageId)"
         cell.selectCertificate.customBox()
         if selectedCellIndex.contains(indexPath.item) {
             cell.selectCertificate.on = true
         } 
         else {
             cell.selectCertificate.on = false
         }
         cell.selectCertificate.tag = indexPath.item
         cell.checkState = self
         return cell
       }
}

extension EditCertificatesViewController: CheckBoxState {

    func saveCheckBoxState(cell: EditCertificateCell) {

        if cell.selectCertificate.on == true {
            cell.selectCertificate.on = false
        } 
        else {
            cell.selectCertificate.on = true
        }

        if selectedCellIndex.contains(cell.selectCertificate.tag) {
            selectedCellIndex = selectedCellIndex.filter{$0 != cell.selectCertificate.tag}
        } 
        else {
            selectedCellIndex.append(cell.selectCertificate.tag)
        }
        print("Status1 \(selectedCellIndex.sorted { $0 < $1 })")
        //        certificatesCollectionView.reloadData()
    }
}

EditCertificateCell:

import UIKit

class EditCertificateCell: UICollectionViewCell {

    @IBOutlet weak var certificateImage: UIImageView!
    @IBOutlet weak var selectCertificate: BEMCheckBox!
    @IBOutlet weak var certificateId: UILabel!
    @IBOutlet weak var selectCertificateBtn: UIButton!

    var checkState: CheckBoxState?

    override func awakeFromNib() {
        super.awakeFromNib()
        self.selectCertificateBtn.addTarget(self, action: #selector(btnTapped(_:event:)), for: .touchUpInside)
    }

    @objc func btnTapped(_ sender: UIButton,event: UIEvent) {
        self.checkState?.saveCheckBoxState(cell: self)
    } 
}

推荐答案

CollectionView 使您的单元格出队.为了摆脱这种情况，您需要维护一系列选定的证书.请按照以下步骤操作.

CollectionView dequeue's your cell. To rid of this you need to maintain array of selected certificates. Follow below procedure.

1. 创建一个数组 arrSelectedIndex : [Int] = []

在cellForRow中，

• 首先检查 arrSelectedIndex 中的当前索引是否可用?如果是，则将您的单元格设为选中状态，否则不要选中它.

• First check either current index in available in arrSelectedIndex or not? If yes, then make your cell as selected otherwise keep it uncheck.

像这样为您的检查按钮添加标签 buttonCheck.tag = indexPath.item

Give tag to your check button as like this buttonCheck.tag = indexPath.item

如果您想在检查按钮操作时选择图像，请执行以下操作.

If you wanted to select images on check button action, do below.

• 获取按钮标签 let aTag = sender.tag
• 现在检查这个索引是否在 arrSelectedIndex 中可用?如果是，则从 arrSelectedIndex 中删除该索引，否则追加该数组.
• 立即重新加载您的手机.

• Get the button tag let aTag = sender.tag
• Now check wther this index is available in arrSelectedIndex or not? If yes then remove that index from from the arrSelectedIndex otherwise append that array.
• reload your cell now.

如果您想在 didSelectItem 上选择图像而不是检查按钮操作，请执行以下操作.

If you wanted to select images on didSelectItem instaead check button action, do below.

• 现在检查这个选定的索引 (indexPath.item) 在 arrSelectedIndex 中是否可用?如果是，则从 arrSelectedIndex 中删除该索引，否则追加该数组.
• 立即重新加载您的手机.

• Now check wther this selected index (indexPath.item) is available in arrSelectedIndex or not? If yes then remove that index from from the arrSelectedIndex otherwise append that array.
• reload your cell now.

<小时>

由于此过程很长，所以我只能向您解释如何执行此操作.如果需要进一步的帮助，那么您可以询问.

---

As this procedure is lengthy so I can only explain you how to do this. If need further help then you can ask.

这篇关于CollectionView 中的复选框在滚动时改变位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！