在 Swift 中单击时为集合视图单元设置动画答案

【问题标题】：Animate Collection View Cell on Click in Swift在 Swift 中单击时为集合视图单元设置动画
【发布时间】：2019-04-28 18:00:18
【问题描述】：

我正在尝试像这样在点击时为集合视图的单元格设置动画，

我尝试了一些代码，但它没有给出完美的动画，这是我的代码

 func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.8) {
        if let cell = self.subCategoryCollectionView.cellForItem(at: indexPath) as? LawyerSubCategoryCVC {
            cell.transform = .init(scaleX: 1.5, y: 1.5)
        }
    }
}

这给了我这个结果，

如何在点击集合视图单元格时获得完美的动画？

【问题讨论】：

或许这篇文章对你有帮助stackoverflow.com/questions/46098693/…
我已经点击了这个链接，这就是我想要的，但是当我应用这个动画时，我在选择一个单元格时遇到了问题。单元格大小增加但不覆盖单元格的边界，如我的第二张图片所示。 @Bogdan Sasko

标签： swift uicollectionview

【解决方案1】：

import UIKit
extension UIColor {
    static var random: UIColor {
        return UIColor(red: .random(in: 0...1),
                       green: .random(in: 0...1),
                       blue: .random(in: 0...1),
                       alpha: 1.0)
    }
}
class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

@IBOutlet weak var collectionView: UICollectionView!
var selectedIndex = 2
override func viewDidLoad() {
    super.viewDidLoad()
 }


func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
    cell.contentView.backgroundColor = UIColor.random
    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    self.selectedIndex =  indexPath.row
    collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 4

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
    if selectedIndex == indexPath.row {
        return CGSize(width: size, height: size + 40)
     }
    return CGSize(width: size, height: size)
}

}

【讨论】：

所以你必须在 cellforrowatindexpath 中缩放选定的单元格

【解决方案2】：

我认为您可以为所选项目设置单元格高度，这会对您有所帮助。

【讨论】：

只是增加单元格的高度？ @Rakesh
是的，您可以尝试只创建选定的项目大小，然后重置项目大小将小于选定的单元格。或者您可以为所有人添加相同的单元格大小，您可以为所选项目缩放子视图。在 indexpath 处的行的单元格中。
怎么做的兄弟能用代码解释一下吗？拉克什

【解决方案3】：

要启动单元格，您应该更改单元格 zPosition。例如：

class MyCell: UICollectionViewCell {
    override var isSelected: Bool {
        didSet {
            UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseOut, animations: {
                self.layer.zPosition = self.isSelected ? 1 : -1
                self.transform = self.isSelected ? CGAffineTransform(scaleX: 1.2, y: 1.2) : CGAffineTransform.identity
            }, completion: nil)
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        layer.borderWidth = 1
        layer.cornerRadius = 4
        layer.borderColor = UIColor.clear.cgColor

        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowRadius = 4
        layer.shadowColor = UIColor.black.cgColor
        layer.masksToBounds = false
    }
}

请点击链接查看result

【讨论】：

代码工作正常，但是当我点击单元格时，我遇到了一个代码问题. @bohdans
@JunaidKhan 我没有看到您描述的问题。请打开我附上的链接。
你放置在集合视图中的单元格大小和视图大小是多少？我将单元格高度附加到集合视图，视图高度和宽度附加到单元格。 @bohdans