如何在 didSelect 上向 UICollectionViewCell 添加边框并在选择另一个 UICollectionViewCell 时删除该边框？答案

【问题标题】：How to add border to UICollectionViewCell on didSelect and remove that border on select another UICollectionViewCell?如何在 didSelect 上向 UICollectionViewCell 添加边框并在选择另一个 UICollectionViewCell 时删除该边框？
【发布时间】：2016-06-12 15:16:31
【问题描述】：

例如，我的 UICollectionView 有 10 个单元格。我想为选定的单元格添加边框，稍后，在选择另一个单元格时，想要删除以前的边框并为新的选定单元格添加边框。

我怎样才能做到这一点？

我试过这个：

var selected = [NSIndexPath]()
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    self.imageView.image = applyFilter(self.colorCubeFilterFromLUT("\(self.LUTs[indexPath.row])")!, image: self.image!)

    self.selected.append(indexPath)
}

func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath) {
    let cell = self.filtersCollectionView.cellForItemAtIndexPath(indexPath) as! FiltersCollectionViewCell
    cell.imageView.layer.borderWidth = 3.0
    cell.imageView.layer.borderColor = UIColor.brownColor().CGColor
}

func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath) {

    if self.selected.count > 1 && indexPath == self.selected[self.selected.count - 1] {            
        let cell = self.filtersCollectionView.cellForItemAtIndexPath(indexPath) as! FiltersCollectionViewCell
        cell.imageView.layer.borderWidth = 0.0
        cell.imageView.layer.borderColor = UIColor.clearColor().CGColor
    }
}

但它不起作用。我做错了什么？

【问题讨论】：

标签： ios swift uicollectionview uicollectionviewcell

【解决方案1】：

有一个更简单的解决方案，您已经可以使用 UICollectionView 自身提供的功能。此外，它的性能更好，因为您不必每次选择单个单元格时都重新加载 collectionView。 Apple 建议您只能在模型实际更改时才使用 reloadData()。

您可以覆盖 UICollectionViewCell 的属性isSelected，然后您只需使用属性观察器自定义其外观：

override var isSelected: Bool {
    didSet {
        if isSelected {
            layer.borderWidth = 2
        } else {
            layer.borderWidth = 0
        }
    }
}

请提醒您必须在单元格初始化程序中或您认为方便的地方设置layer.borderColor

PS：如果以后要进行多选，只需在 collectionView 中启用属性allowsMultipleSelection

【讨论】：

【解决方案2】：

您可以将选定的indexPath 保存到一个变量中，并在cellForItemAtIndexPath 中检查当前的indexPath 是否等于选定的索引路径（每次选定时都需要重新加载collectionView）

var selectedIndexPath: NSIndexPath{
    didSet{
        collectionView.reloadData()
    }
}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
selectedIndexPath = indexPath
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    var borderColor: CGColor! = UIColor.clearColor().CGColor
    var borderWidth: CGFloat = 0

    if indexPath == selectedIndexPath{
        borderColor = UIColor.brownColor().CGColor
        borderWidth = 1 //or whatever you please
    }else{
       borderColor = UIColor.clearColor().CGColor
        borderWidth = 0
    }

    cell.imageView.layer.borderWidth = borderWidth
    cell.imageView.layer.borderColor = borderColor
}

【讨论】：

【解决方案3】：

Swift 3 版本：

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

        var borderColor: CGColor! = UIColor.clear.cgColor
        var borderWidth: CGFloat = 0

        if indexPath == selectedIndexPath{
            borderColor = UIColor.brown.cgColor
            borderWidth = 1 //or whatever you please
        }else{
            borderColor = UIColor.clear.cgColor
            borderWidth = 0
        }

        cell.imageView.layer.borderWidth = borderWidth
        cell.imageView.layer.borderColor = borderColor 

   }

【讨论】：

【解决方案4】：

SWIFT 5

   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    
         cell.imageView.layer.borderWidth = 2
         cell.imageView.layer.borderColor = UIColor.blue.cgColor
    
    }
    
    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
     
         cell.imageView.layer.borderWidth = 2
         cell.imageView.layer.borderColor = UIColor.clear.cgColor
    }

【讨论】：