单击 UICollectionViewCell 时如何在它周围绘制一个圆圈并从先前选定的单元格中删除其他圆圈? [英] How to draw a circle around UICollectionViewCell when clicking on it and remove others circle from previous selected cells?

问题描述

我最近一直在使用 UICollectionView.需要实现如下要求:在多个 collectionview 单元格中有多个图像视图.当用户选择其中一个图像/单元格时，应用程序将在该图像/单元格周围绘制一个蓝色圆圈."目前，我可以在单元格上进行绘图.但现在的问题是我一次只能绘制所有单元格而不是一个单元格(如下图)

I've been working with UICollectionView lately. There is a requirement that needs to be implemented like: "There are several imageviews in several collectionview cell. When user selects one of the image/cell, the app will draw a blue circle around that image/cell." Currently, I'm able to do the draw on the cell. But the problem now is that I am able only to draw all cells but not one cell at the time (as screenshot below)

所以我的问题是:如何选择一个图像/单元格，应该删除前一个选定单元格的蓝色圆圈?

非常感谢您提前回答.

推荐答案

听起来你想要这个:

您没有说明如何将蓝色圆圈放入单元格中.以下是我认为您应该如何处理选择:尽可能使用集合视图的内置选择支持.

You didn't say how you're putting the blue circle in the cell. Here's how I think you should handle selection: use the collection view's built-in selection support as much as possible.

UICollectionView 已经支持选择单元格.默认情况下，它的 allowsSelection 属性为 true，allowsMultipleSelection 属性为 false，因此它允许用户通过点击项目一次选择一个项目.这听起来几乎正是您想要的.

A UICollectionView already has support for selecting cells. By default, its allowsSelection property is true and its allowsMultipleSelection property is false, so it allows the user to select one item at a time by tapping the item. This sounds like almost exactly what you want.

集合视图在其 indexPathsForSelectedItems 属性中提供当前选择，当没有选择单元格时，该属性为 nil 或为空，并且在选择一项时正好包含一个索引路径.

The collection view makes the current selection available in its indexPathsForSelectedItems property, which is either nil or empty when no cell is selected, and contains exactly one index path when one item is selected.

当一个项目被选中，并且该项目有一个可见的单元格时，该单元格通过使其selectedBackgroundView可见来表明它的项目被选中.因此，创建一个显示蓝色圆圈的 UIView 子类:

When an item is selected, and there is a visible cell for the item, the cell shows that its item is selected by making its selectedBackgroundView visible. So make a UIView subclass that shows a blue circle:

class CircleView: UIView {

    override class var layerClass: AnyClass { return CAShapeLayer.self }

    override func layoutSubviews() {
        super.layoutSubviews()

        let layer = self.layer as! CAShapeLayer
        layer.strokeColor = UIColor.blue.cgColor
        layer.fillColor = nil
        let width: CGFloat = 3
        layer.lineWidth = width
        layer.path = CGPath(ellipseIn: bounds.insetBy(dx: width / 2, dy: width / 2), transform: nil)
    }
}

然后使用CircleView 的一个实例作为单元格的selectedBackgroundView.您可以在第一次选择单元格时延迟创建实例:

Then use an instance of CircleView as the cell's selectedBackgroundView. You can create the instance lazily the first time the cell becomes selected:

class MyCell: UICollectionViewCell {
    override var isSelected: Bool {
        willSet {
            if newValue && selectedBackgroundView == nil {
                selectedBackgroundView = CircleView()
            }
        }
    }

    var title: String = "???" {
        didSet {
            label.text = title
        }
    }

    @IBOutlet private var label: UILabel!
}

有了这个代码，用户可以点击一个单元格来选择它的项目，当单元格被选中时，该单元格将显示一个蓝色圆圈.点击另一个单元格将取消选择先前选择的项目，蓝色圆圈将移动"到新选择项目的单元格.

With this code in place, the user can tap a cell to select its item, and the cell will show a blue circle when selected. Tapping another cell will deselect the previously-selected item, and the blue circle will "move" to the newly-selected item's cell.

您可能希望让用户再次点击所选项目以取消选择它.如果 allowsMultipleSelection 为 false，UICollectionView 默认不会这样做.启用再次点击取消选择的一种方法是在您的 UICollectionViewDelegate:

You might want to let the user deselect the selected item by tapping it again. UICollectionView doesn't do that by default if allowsMultipleSelection is false. One way to enable tap-again-to-deselect is by implementing collectionView(_:shouldSelectItemAt:) in your UICollectionViewDelegate:

    override func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
        if (collectionView.indexPathsForSelectedItems ?? []).contains(indexPath) {
            // Item is already selected, so deselect it.
            collectionView.deselectItem(at: indexPath, animated: false)
            return false
        } else {
            return true
        }
    }

这篇关于单击 UICollectionViewCell 时如何在它周围绘制一个圆圈并从先前选定的单元格中删除其他圆圈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！