如何在编辑时将我的集合视图单元格设置为更小的动画？

Posted 2023-02-23

【中文标题】如何在编辑时将我的集合视图单元格设置为更小的动画？

【英文标题】：How can I animate my collection view cells smaller while editing?

【发布时间】：2017-01-12 04:05:54

【问题描述】：

所以我有一个集合视图，它每行布置 2 个单元格。当我进入编辑模式时，我希望单元格的大小变小。我尝试向它们添加填充以获得所需的效果，但我需要它们进行动画处理！我怎么能做到这一点。请看下面我的代码：

视图加载时的初始设置：

 override func viewDidLoad() 
    super.viewDidLoad()

    navigationItem.leftBarButtonItem = editButtonItem
    navigationController?.isToolbarHidden = true

    // Does not allow to move items around innitialy
    installsStandardGestureForInteractiveMovement = false

    // set collectionView item size
    //let width = collectionView!.frame.width/2
    let layout = collectionViewLayout as! UICollectionViewFlowLayout
    let itemsPerRow: CGFloat = 2.0
    let paddingSpace: CGFloat = 2.0 * itemsPerRow
    let availableWidth = view.frame.width - paddingSpace
    let widthPerItem = availableWidth / itemsPerRow
    layout.minimumLineSpacing = 4.0
    layout.itemSize = CGSize(width: widthPerItem, height: widthPerItem)

这就是点击“编辑”时调用的内容

func reduceCellSize() 

    if isEditing 
        let layout = self.collectionViewLayout as! UICollectionViewFlowLayout

        let itemsPerRow: CGFloat = 2.0
        let paddingSpace: CGFloat = 8.0 * itemsPerRow
        let availableWidth = self.view.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        layout.minimumLineSpacing = 6.0
        layout.sectionInset.left = 5
        layout.sectionInset.right = 5
        layout.itemSize = CGSize(width: widthPerItem, height: widthPerItem)
     else 
        let layout = collectionViewLayout as! UICollectionViewFlowLayout
        let itemsPerRow: CGFloat = 2.0
        let paddingSpace: CGFloat = 2.0 * itemsPerRow
        let availableWidth = view.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        layout.minimumLineSpacing = 4.0
        layout.sectionInset.left = 0
        layout.sectionInset.right = 0
        layout.itemSize = CGSize(width: widthPerItem, height: widthPerItem)
    

【参考方案1】：

您需要的是CGAffineTransform。所以你可以像这样设置它们的整体大小：

    private func transformCell() 
            var offset : Float = 0.0

            for cell in numberCollectionView.visibleCells as! [MyCell] 


                offset = 0.07
                cell.transform = CGAffineTransform.identity
                cell.transform = CGAffineTransform(scaleX: CGFloat(offset), y: CGFloat(offset))

            
     

它将根据偏移值将可见单元格转换为不同的大小，您可以从scrollViewDidScroll调用它

func scrollViewDidScroll(_ scrollView: UIScrollView) 


            transformCell()

    

【讨论】：

感谢您的帮助！所以这行得通，但是当我点击“编辑”时我还需要单元格动画，并且当我点击“完成”时也需要动画恢复正常。对此有什么建议吗？谢谢！

在您的编辑和完成点击时实现 scrolltoitem，它将调用 scrollViewDidScroll

另外，当我将 UIViewAnimation 添加到您提供的代码块中时，当我向下滚动集合视图时，每个新单元格都会被动画化，这不是预期的效果 - 所有新单元格都应该只是与其他单元格的动画大小相同

在我的代码中它说 visibleCells。如果您想为所有这些设置动画，则不需要 numberCollectionView.visibleCells 而是所有单元格

除了我相信调整我的代码是你的解决方案:)

【参考方案2】：

在你的 reduceCellSize 方法结束时试试这个：

UIView.animate(duration: 0.3) 
  self.collectionView.layoutIfNeeded()

（将“collectionView”替换为集合视图的实际名称。）

这应该会导致集合视图对其子视图的大小调整进行动画处理。

【讨论】：

感谢您的帮助，但执行此操作时单元格上似乎有“白色闪光”。虽然它是动画

你好杜肯！我是 Swift 新手，不太明白你说的意思：Where you replace "collectionView" with the actual name of your collection view. - 你能澄清一下吗？

如果它编译，那么你不需要做任何事情