Question

我正在尝试像链接here中的演示一样制作过渡动画。所以当我点击单元格时，它会扩展并覆盖整个屏幕。

这是我的代码（我必须承认我不熟悉CollectionView）`

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

@IBOutlet weak var mainDesLabel: UILabel!
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var secDesLabel: UILabel!
let searchBar = UISearchBar()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.collectionView.delegate   = self
    self.collectionView.dataSource = self
    self.collectionView.backgroundColor = UIColor.clearColor()
    ////////////////////////////////////////////////////////////////////////
    self.searchBar.frame = CGRect(x: 175, y: 0, width: 200, height: 50)
    self.searchBar.searchBarStyle = UISearchBarStyle.Minimal
    self.searchBar.backgroundColor = UIColor.whiteColor()
    self.view.addSubview(searchBar)
    ////////////////////////////////////////////////////////////////////////
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

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

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as UICollectionViewCell

    cell.layer.cornerRadius = 5

    return cell
}



func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}

//Use for size
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    self.collectionView.frame = self.view.bounds
    let cell = collectionView.cellForItemAtIndexPath(indexPath)
    cell!.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
}


}

所以我认为使用'didSelectItemAtIndexPath'会有所帮助，但结果却像this

想法？任何帮助将非常感谢！

Answer 1

完成 UICollectionView 执行视图布局后，您不能只使用 didSelectItemAtIndexPath 或任何类似的方法来更新 UICollectionViewCell 的大小。

要更新单元格高度，您可以先捕获 didSelectItemAtIndexPath 中已挖掘的单元格。然后，您可以使用在 sizeForItemAtIndexpath 中传递的新单元格框重新加载整个集合视图。或者，您可以使用 reloadItemsAtIndexPaths 重新加载特定单元格，但仍需要通过 sizeForItemAtIndexpath 传递更新的单元格大小。

<强>更新我现在看到问题的细节已经被你想要的动画更新了。

我通过以下方式执行了类似的动画： -

捕获已在中点击的单元格didSelectItemAtIndexPath 。
将副本视图添加到UIViewContrller，但其框架与已点击的单元格完全一致。
然后，动画添加了这个视图。因此给人的印象是细胞是动画的。

还必须在此视图中编写必须提供的任何其他功能。因此，单元格的代码和动画视图也是分开的。

Answer 2

或者您可以做的是展开项目并使用UIAnimation更改其框架。

当他的单元格被点击时，你还可以使用自动布局获取要扩展的单元格内部的视图，并且我会向（剪辑到边界）暗示。

类似的东西：

override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

    let item = collectionView.cellForItemAtIndexPath(indexPath) as! cellCollectionViewExpress  // or whatever you collection view cell class name is.

    UIView.animateWithDuration(1.0, animations: {
        self.view.bringSubviewToFront(collectionView)
        collectionView.bringSubviewToFront(item)
        item.frame.origin = self.view.frame.origin   /// this view origin will be at the top of the scroll content, you'll have to figure this out
        item.frame.size.width = self.view.frame.width
        item.frame.size.height = self.view.frame.height
    })
}

我建议您使用UICollectionView控制器，因此使用它时通常很容易。

Answer 3

当在单元格中轻按一个单元格或一个按钮或任何可轻敲的东西时，您将收到来自 didSelectItemAtIndexPath或通过委托，然后为单元提供所需的大小，您必须使当前collectionview的布局无效。之后，将调用商品的尺寸并为其指定新的尺寸，

这将更新收集单元的大小，而无需重新加载它。您也可以制作动画。

override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.invalidateLayout()
    }

}

Answer 4

extension UICollectionView {
            func transactionAnimation(with duration: Float, animateChanges: @escaping () -> Void) {
        
                UIView.animate(withDuration: TimeInterval(duration)) {
                    CATransaction.begin()
                    CATransaction.setAnimationDuration(CFTimeInterval(duration))
                    CATransaction.setAnimationTimingFunction(.init(name: .default))
                    animateChanges()
                    CATransaction.commit()
        
                }
            }
        }
    
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

     collectionView.transactionAnimation(with: 0.3) {
                self.carInfoCollectionView?.performBatchUpdates({}, completion: { _ in })
        
   }
}

点击时展开UICollectionView及其单元格

4 个答案: