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

Question

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

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

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

修改你的单元格类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中的Image

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

然后在collectioncell文件（这是cell文件的类型，在主viewcontroller中调用）声明scrollview和image view的outlets 这是我在我的单元格文件中声明为 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

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