点击时展开UICollectionView及其单元格

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传递更新的单元格大小。

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

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

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

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

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或通过委托获得调用，然后为该单元格提供所需的大小，您必须使当前集合视图的布局无效。在此之后，将调用item的大小并为其提供新大小，

这将更新收集单元的大小而无需重新加载。你也可以给动画。

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

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

}