如何突出顯示選定的UICollectionView單元格？ （Swift）

Question

我有一個UICollectionView，用戶可以選擇多個單元格。跟蹤哪些單元格已被選中是有點困難的，所以當單元格被點擊時，我需要一些方法來突出顯示/創建邊框。

代碼：

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

    let cell: CardsCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as! CardsCollectionViewCell 

    parseObjects[indexPath.row].getDataInBackgroundWithBlock{ 

     (imageData: NSData?, error: NSError?) -> Void in 

     if error == nil { 

      let image = UIImage(data: imageData!) 

      cell.cardsImg.image = image 

     } 

    } 
    //cell.cardLabel.text = imageNames[indexPath.row] 
    return cell 
} 

func collectionView(collectionView: UICollectionView, shouldSelectItemAtIndexPath indexPath: NSIndexPath) -> Bool { 

    addToList.append(objectsArray[indexPath.row]) 

    return true 

} 

Answer 1

您可以在didSelectItemAtIndexPath覆蓋事件上使用邊框更改，如下面的代碼並在單元格上分配新的設置。

斯威夫特3.X：

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { 
    addToList.append(objectsArray[indexPath.row]) 
    let cell = collectionView.cellForItem(at: indexPath) 
    cell?.layer.borderWidth = 2.0 
    cell?.layer.borderColor = UIColor.gray.cgColor 
} 

Answer 2

使用

collectionView.reloadItemsAtIndexPaths([indexPath]) 

重新加載當前單元格，或

collectionView.reloadData() 

重新加載所有細胞shouldSelectItemAtIndexPath

然後在cellForItemAtIndexPath設置您的邊框或背景顏色，如果單元格被標記爲選中（您可能需要一個新的數組與優選indexPaths的選中單元格。

Answer 3

這裏是我的解決方案，我敢肯定它的工作原理。

我的解決方案包括3個高亮效果，UICollectionCell的selectedBackgroundView，cell.contentView.backgroundColor或您自己的specialHighlightedArea。

如何使用？只是繼承BaseCollectionViewCell。如果需要，請配置單元的init或collectionView的委託方法。

如果您不需要高亮效果，只需在UICollectionViewDelegate發現一個名爲「shouldHighlightItemAtIndexPath」的方法，並返回false或只設置cell.shouldTintBackgroundWhenSelected = false。

extension UIColor { 
    convenience init(rgb: Int, alpha: CGFloat = 1.0) { 
     self.init(red: CGFloat((rgb & 0xFF0000) >> 16)/255.0, green: CGFloat((rgb & 0xFF00) >> 8)/255.0, blue: CGFloat(rgb & 0xFF)/255.0, alpha: alpha) 
    } 
} 
/// same with UITableViewCell's selected backgroundColor 
private let highlightedColor = UIColor(rgb: 0xD8D8D8) 

class BaseCollectionViewCell: UICollectionViewCell { 

    var shouldTintBackgroundWhenSelected = true // You can change default value 
    var specialHighlightedArea: UIView? 

    // make lightgray background show immediately(使灰背景立即出現) 
    override var isHighlighted: Bool { 
     willSet { 
      onSelected(newValue) 
     } 
    } 
    // keep lightGray background until unselected (保留灰背景) 
    override var isSelected: Bool { 
     willSet { 
      onSelected(newValue) 
     } 
    } 
    func onSelected(_ newValue: Bool) { 
     guard selectedBackgroundView == nil else { return } 
     if shouldTintBackgroundWhenSelected { 
      contentView.backgroundColor = newValue ? cellHighlightedColor : UIColor.clear 
     } 
     if let sa = specialHighlightedArea { 
      sa.backgroundColor = newValue ? UIColor.black.withAlphaComponent(0.4) : UIColor.clear 
     } 
    } 
} 

Answer 4

儘量使邊框厚度足以覆蓋整個小區

代碼：

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { 
    addToList.append(objectsArray[indexPath.row]) 
    let cell = collectionView.cellForItem(at: indexPath) 
    cell?.layer.borderWidth = 200.0 
    cell?.layer.borderColor = UIColor.init(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.4).cgColor 
}