如何在选择 Swift 3.0 时缩放 UICollectionViewCell？

Question

我在这里尝试突出显示选择的 UICollectionViewCell，如 image.I 所示，尝试将边框添加到所选单元格，并且边框位于单元格内容视图内。这是我的尝试：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let cell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    let borderWidth: CGFloat = 6
    cell?.contentView.frame = (cell?.labelBackground.frame.insetBy(dx: +borderWidth, dy: +borderWidth))!
    cell?.contentView.layer.borderColor = cell?.backgroundColor?.cgColor
    cell?.contentView.layer.borderWidth = borderWidth
}

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    let cell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    let borderWidth: CGFloat = 0
    cell?.contentView.frame = (cell?.labelBackground.frame.insetBy(dx: +borderWidth, dy: +borderWidth))!
    cell?.contentView.layer.borderColor = UIColor.clear.cgColor
    cell?.contentView.layer.borderWidth = borderWidth

}

如何操作？

Answer 1

不为所选单元格添加边框宽度，而是使用变换比例缩放所选单元格。在 didSelect 中写入此代码：

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let selectedCell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    priorityCollectionView.bringSubview(toFront: selectedCell!)

    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations: { 
        selectedCell?.transform = CGAffineTransform(scaleX: 1.2, y: 2)
        })  
}

并在 didDeselect 中：

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    let unselectedCell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations: {
        unselectedCell?.transform = .identity
    })
}

结果：

Answer 2

如果要跟踪选择，您需要执行以下操作：

修改您的单元格 class BCPriorityListCollectionViewCell 并添加选择属性:

var isSelected: Bool = false

然后在cellForItemAtIndexPath中加入if语句检测单元格是否被选中，如下：

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
if (cell.isSelected) {
    priorityCollectionView.bringSubview(toFront: cell)

    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations: { 
        cell.transform = CGAffineTransform(scaleX: 1.2, y: 2)
    })  
}

并在didSelectItemAt中添加一行设置选择属性:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let selectedCell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    priorityCollectionView.bringSubview(toFront: selectedCell!)

    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations: { 
        selectedCell?.transform = CGAffineTransform(scaleX: 1.2, y: 2)
    })  
    selectedCell?.isSelected = true
}

也在 didDeselectItemAt 中添加确切的行，但具有 false 值：

func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
    let unselectedCell = priorityCollectionView.cellForItem(at: indexPath)  as? BCPriorityListCollectionViewCell
    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations: {
        unselectedCell?.transform = .identity
})
    unselectedCell?.isSelected = false
}

这样，如果您滚动到集合视图的末尾，您将不会丢失选定的单元格状态！

Answer 3

collectionView中的图片可以使用滚动视图放大缩小

在您的 collectoinview 单元格中添加滚动视图并在滚动视图中添加图像视图..

然后在collectioncell文件中（这是cell文件的类型，在main中调用viewcontroller）声明scrollview和image view的出口这是我在我的单元文件中声明为 scr(scrollview) 和 zoomedImage(ImageView)....

class FinalImageCollectionViewCell: UICollectionViewCell , UIScrollViewDelegate {

@IBOutlet weak var zoomedImage: UIImageView!
@IBOutlet weak var scr: UIScrollView!  

override func awakeFromNib() {
    self.scr.delegate = self

    let doubleTapGest = UITapGestureRecognizer(target: self, action: #selector(handleDoubleTapScrollView(recognizer:)))
    doubleTapGest.numberOfTapsRequired = 2
    scr.addGestureRecognizer(doubleTapGest)
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return zoomedImage!
}
@objc func handleDoubleTapScrollView(recognizer: UITapGestureRecognizer) {
    if scr.zoomScale == 1 {
        scr.zoom(to: zoomRectForScale(scale: scr.maximumZoomScale, center: recognizer.location(in: recognizer.view)), animated: true)
    }
    else {
        scr.setZoomScale(1, animated: true)
    }
}
func zoomRectForScale(scale: CGFloat, center: CGPoint) -> CGRect {
    var zoomRect = CGRect.zero
    zoomRect.size.height = zoomedImage.frame.size.height / scale
    zoomRect.size.width  = zoomedImage.frame.size.width  / scale
    let newCenter = zoomedImage.convert(center, from: scr)
    zoomRect.origin.x = newCenter.x - (zoomRect.size.width / 2.0)
    zoomRect.origin.y = newCenter.y - (zoomRect.size.height / 2.0)
    return zoomRect
}}

通过这段代码，您可以通过捏合（无需手势）和双击来放大和缩小。

如果发生错误..请确保您已将滚动视图的委托连接到 ViewController

您可以对单图使用相同的代码ViewController（单图）只需将 override func awakeFromNib() 的代码粘贴到您的 viewDidLoad() 中，其余部分相同。

如何在选择 Swift 3.0 时缩放 UICollectionViewCell？

How to zoom a UICollectionViewCell on selection Swift 3.0?

xcode

ios

uicollectionview

uicollectionviewcell

swift3