在点击时突出显示 uicollectionview 单元格

Posted 2023-02-24

【中文标题】在点击时突出显示 uicollectionview 单元格

【英文标题】：highlighting uicollectionview cell on tap

【发布时间】：2018-08-30 14:21:38

【问题描述】：

我有一个作为 UICollectionViewController 实现的滑出式菜单。我也为集合视图创建了自定义单元格。导航和一切都按预期工作。当我单击实际单元格时，我遇到的问题是更改单元格的外观。

我已经尝试了几种基于解决方案的方法(1)(2) 我在这里看到过堆栈，但没有什么令我满意。

解决方案 1：实现 UICollectionViewController 委托方法：

class SlideOutMenuViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout
   //Setup code and other delegate methods….

    override func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SlideOutMenuCells

        cell.backgroundColor = .white
    

    override func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SlideOutMenuCells

        cell.backgroundColor = UIColor.mainGreen()
    

当我尝试此解决方案时，没有任何反应。单元格背景颜色不会改变颜色。

解决方案 2：此解决方案会产生更好的结果，但当我握住单元格时，单元格会改变颜色。我希望单元格的背景颜色在 tap 上快速闪烁或突出显示，而不仅仅是用户按住单元格时。

class SlideOutMenuCells: UICollectionViewCell 

    //Setup code...

    override var isHighlighted: Bool 
        didSet 
            if self.isHighlighted 
                backgroundColor = UIColor.darkGreen()
             else 
                backgroundColor = UIColor.mainGreen()
            
        
    

这两种解决方案都没有真正按预期工作。我在这里看到了几篇尝试解决这个问题的帖子，但还没有找到一个真正有效的解决方案。我希望单元格通过点击闪烁突出显示，而不仅仅是当用户单击并按住单元格时......

【问题讨论】：

您可以尝试更改 contentView 的背景颜色吗？

@AbhishekHarsha 这不起作用。我已经尝试过，因为我在其他一些解决方案中看到了它，但没有运气。

@mufc 请检查我的回答也许它会解决你的问题。

您已在某些地方管理所选项目，因为集合视图重用了可能出现问题的单元格

【参考方案1】：

这是突出显示的工作代码 UICollectionViewCell 点击（swift 4 | swift 5）

解决方案 1

class StoreCollViewCell:UICollectionViewCell

    override var isSelected: Bool 
        didSet 
            self.contentView.backgroundColor = isSelected ? UIColor.red : UIColor.clear
        
    

解决方案 2

在你的UICollectionViewCell 类中不需要做任何事情。

class StoreListViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource 

    var previousSelected : IndexPath?
    var currentSelected : Int?

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

        // To set the selected cell background color here
        if currentSelected != nil && currentSelected == indexPath.row
        
            cell.backgroundColor = UIColor.green
        else
            cell.backgroundColor = UIColor.yellow
        
    
        return cell     
    

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 
    
        // For remove previously selection 
        if previousSelected != nil
            if let cell = collectionView.cellForItem(at: previousSelected!)
                cell.backgroundColor = UIColor.yellow
            
        
        currentSelected = indexPath.row
        previousSelected = indexPath

        // For reload the selected cell
        self.collVwStores.reloadItems(at: [indexPath]) 
    

输出

【参考方案2】：

我遇到了完全相同的问题，解决方案实际上比上面发布的要简单得多。

在您的视图控制器中，添加collectionView.delaysContentTouches = false。

然后你在单元格中的其他代码就可以了：

class SlideOutMenuCells: UICollectionViewCell 

    //Setup code...

    override var isHighlighted: Bool 
        didSet 
            if self.isHighlighted 
                backgroundColor = UIColor.green
             else 
                backgroundColor = UIColor.red
            
        
    

但是现在烦人的延迟已经消失了！

【参考方案3】：

可以尝试使用UILongPressGestureRecognizer表示选择：

override func awakeFromNib() 
    super.awakeFromNib()

    let tapGesture = UILongPressGestureRecognizer(target: self, action: #selector(didTap(recognizer:)))
    tapGesture.minimumPressDuration = 0
    tapGesture.cancelsTouchesInView = false
    addGestureRecognizer(tapGesture)


@objc func didTap(recognizer: UILongPressGestureRecognizer) 
    if recognizer.state == .began 
        backgroundColor = .red
    
    if recognizer.state == .ended 
        backgroundColor = .green
    

或者您可以将extension 设为UICollectionViewCell

extension UICollectionViewCell 
func makeSelectionIndicatable() 
    let tapGesture = UILongPressGestureRecognizer(target: self, action: #selector(didTap(recognizer:)))
    tapGesture.minimumPressDuration = 0
    tapGesture.cancelsTouchesInView = false
    addGestureRecognizer(tapGesture)


@objc private func didTap(recognizer: UILongPressGestureRecognizer) 
    if recognizer.state == .began 
        backgroundColor = .red
    
    if recognizer.state == .ended 
        backgroundColor = .green
    

然后对于awakeFromNib() 方法中的任何单元格，您只需添加makeSelectionIndicatable()

【参考方案4】：

如果单元格中的内容视图如下所示，您可以通过更改颜色来做到这一点：

class SlideOutMenuCells: UICollectionViewCell 

override var isSelected: Bool 
    didSet 
        self.contentView.backgroundColor = isSelected ? OLTheme.Colors.Selected_Voucher_Color : UIColor.clear