为什么 CollectionView 中的自定义按钮仅加载到最后一个单元格？ （迅速）

Question

为什么我在 CollectionView 中的自定义按钮只加载到最后一个单元格？

如何使该按钮加载到所有单元格中？

var editButton = UIButton()

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCellCard

    switch ColorSegment.selectedSegmentIndex {
      case 0:
        cell.CardView.backgroundColor = ColorArray[indexPath.row]
        cell.ColorName.text = ColorName[indexPath.row]
      case 1:
        cell.CardView.backgroundColor = CustomColorArray[indexPath.row]
        cell.ColorName.text = CustomColorName[indexPath.row]

        editButton.frame = CGRect(x:63, y:0, width:20,height:20)
        editButton.layer.cornerRadius = 10
        editButton.backgroundColor = UIColor.lightGray
        editButton.layer.setValue(indexPath.item, forKey: "index")
        editButton.setImage(UIImage(named: "CloseScan"), for: UIControlState.normal)
        editButton.addTarget(self, action: #selector(deleteCell), for: UIControlEvents.touchUpInside)
        cell.addSubview(editButton)
      default: print("error with switch statement for cell data")
    }
    return cell
}

编辑按钮功能

     if EditButton.currentTitle == "Edit" {
            EditButton.setTitle("Cancel", for: .normal)
            //DeleteButton.isHidden = false
     } else if EditButton.currentTitle == "Cancel" {
            EditButton.setTitle("Edit", for: .normal)
            //DeleteButton.isHidden = true
     }

Answer 1

问题是您在所有单元格中添加相同的editButton，您需要为所有单元格创建新的UIButton。

所以换行

editButton.frame = CGRect(x:63, y:0, width:20,height:20)

有

//Create new button instance every time
let editButton = UIButton(frame: CGRect(x:63, y:0, width:20,height:20))

cellForItemAt 也将重用单元格，因此每次您都可以尝试这样，而不是创建新的UIButton。

let editButton: UIButton 
if let btn = cell.viewWithTag(101) as? UIButton {
    editButton = btn
}
else  {
    editButton = UIButton(frame: CGRect(x:63, y:0, width:20,height:20))
}
editButton.layer.cornerRadius = 10
editButton.backgroundColor = UIColor.lightGray
editButton.layer.setValue(indexPath.item, forKey: "index")
editButton.setImage(UIImage(named: "CloseScan"), for: UIControlState.normal)
editButton.addTarget(self, action: #selector(deleteCell), for: UIControlEvents.touchUpInside)
//Set tag for reuse
editButton.tag = 101
cell.addSubview(editButton)

您可以像这样在按钮操作中获取单元格的 indexPath。

@objc func deleteCell(_ sender: UIButton) {
    let point = sender.superview?.convert(sender.center, to: self.collectionView) ?? .zero
    guard let indexPath = self.collectionView.indexPathForItem(at: point) else { return }
    //Use indexPath here
}

编辑：如果您想隐藏或显示按钮，最好在设计中添加按钮并在您的 CustomCollectionViewCell 中创建一个插座，然后在 cellForItemAt 中隐藏和显示按钮的基础上的条件。从您的代码中，如果选定的段索引为 1，您需要显示删除按钮。所以让您的 cellForItem 像这样。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCellCard

    cell.CardView.backgroundColor = ColorArray[indexPath.row]
    cell.ColorName.text = ColorName[indexPath.row]
    //Add delete button in the xib or storyboard collectionViewCell
    //Now hide this button if EditButton title is not "Edit"
    cell.editButton.isHidden = EditButton.currentTitle != "Edit"
    //Add action of button
    cell.editButton.addTarget(self, action: #selector(deleteCell), for: UIControlEvents.touchUpInside)
    return cell
}

然后在您的编辑按钮操作中，在您设置按钮标题后重新加载 collectionView。

if EditButton.currentTitle == "Edit" {
    EditButton.setTitle("Cancel", for: .normal)
} else if EditButton.currentTitle == "Cancel" {
    EditButton.setTitle("Edit", for: .normal)
}
//Reload your collectionView
self.collectionView.reloadData()

Answer 2

我认为你可以移动这条线：

var editButton = UIButton()

函数cellForItemAt：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCellCard

    switch ColorSegment.selectedSegmentIndex {
      case 0:
        cell.CardView.backgroundColor = ColorArray[indexPath.row]
        cell.ColorName.text = ColorName[indexPath.row]
      case 1:
        cell.CardView.backgroundColor = CustomColorArray[indexPath.row]
        cell.ColorName.text = CustomColorName[indexPath.row]

        // create editButton in here
        var editButton = UIButton()

        editButton.frame = CGRect(x:63, y:0, width:20,height:20)
        editButton.layer.cornerRadius = 10
        editButton.backgroundColor = UIColor.lightGray
        editButton.layer.setValue(indexPath.item, forKey: "index")
        editButton.setImage(UIImage(named: "CloseScan"), for: UIControlState.normal)
        editButton.addTarget(self, action: #selector(deleteCell), for: UIControlEvents.touchUpInside)
        cell.addSubview(editButton)

      default: print("error with switch statement for cell data")
    }
    return cell
}

Answer 3

像这样将按钮逻辑移到 switch 语句之外

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCellCard

switch ColorSegment.selectedSegmentIndex {
  case 0:
    cell.CardView.backgroundColor = ColorArray[indexPath.row]
    cell.ColorName.text = ColorName[indexPath.row]
  case 1:
    cell.CardView.backgroundColor = CustomColorArray[indexPath.row]
    cell.ColorName.text = CustomColorName[indexPath.row]

  default: print("error with switch statement for cell data")
}
    var editButton = UIButton.init(frame: CGRect.init(x: 63, y: 0, width: 20, height: 20))
    editButton.layer.cornerRadius = 10
    editButton.backgroundColor = UIColor.lightGray
    editButton.layer.setValue(indexPath.item, forKey: "index")
    editButton.setImage(UIImage(named: "CloseScan"), for: UIControlState.normal)
    editButton.addTarget(self, action: #selector(deleteCell), for: UIControlEvents.touchUpInside)
    cell.addSubview(editButton)
return cell

}