点击时展开UICollectionView及其单元格 [英] Expanding UICollectionView and its cell when tapped

问题描述

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

I am trying to make a transition animation like the demonstration in the link here. So when I clicked the cell, it expands and covers the whole screen.

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

Here are my codes(I have to admit that I am not familiar with 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'会有所帮助，但结果就像这个

So I thought use 'didSelectItemAtIndexPath' would help, however it turns out like this

想法？任何帮助都将受到高度赞赏！

thoughts? Any help would be highly appreciated!

推荐答案

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

You cannot just use didSelectItemAtIndexPath or any similar methods to update the size of a UICollectionViewCell once the UICollectionView is done performing the view layout.

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

To update cell height, You can first capture which cell had been tapped in didSelectItemAtIndexPath. Then, you can either reload the entire collection view with the new cell frame being passed in the sizeForItemAtIndexpath. Or, you can just reload the specific cell with reloadItemsAtIndexPaths, but you still need to pass the updated size of the cell via sizeForItemAtIndexpath.

更新
我现在看到问题详细信息已被您想要的动画更新。

UPDATE I now see the question details have been updated by an animation which you desire to have.

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

I had performed a similar animation by:-

1. 捕获已经在中选中的单元格didSelectItemAtIndexPath 。


2. 将副本视图添加到UIViewContrller，但其框架与已点击的单元格完全一致。


3. 然后，动画制作这个观点已被添加。因此给人的印象是细胞是动画的。

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

Any additional functionality which has to be given can also be written in this view. Thus the code of the cell and the animated view is separated too.

这篇关于点击时展开UICollectionView及其单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！