点击时展开 UICollectionView 及其单元格

Question

我正在尝试像link 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 中捕获哪个单元格被点击。然后，您可以使用在 sizeForItemAtIndexpath 中传递的新单元格框架重新加载整个集合视图。或者，您可以使用 reloadItemsAtIndexPaths 重新加载特定单元格，但您仍然需要通过 sizeForItemAtIndexpath.[=10 传递单元格的更新大小=]

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

我曾通过以下方式制作过类似的动画：-

正在捕获在 didSelectItemAtIndexPath.
向 UIViewController 添加一个副本视图，但其框架与被点击的单元格完全重合。
然后，动画这个已经添加的视图。因此给人一种细胞是动画的印象。

任何必须提供的额外功能也可以写在这个视图中。因此单元格的代码和动画视图也是分开的。

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 Controller，这样使用它通常会很轻松。

Answer 3

当一个单元格被点击或一个按钮或任何可点击的东西在单元格内被点击时，你就会接到来自 didSelectItemAtIndexPath 或通过委托，然后为单元格提供所需的大小，您必须使当前 collectionview 的布局无效。在此之后，项目的大小将被调用并给出新的大小，

这将更新 collectioncell 的大小而无需重新加载它。也可以给动画

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 及其单元格

Expanding UICollectionView and its cell when tapped

ios

uicollectionview

uicollectionviewcell

uicollectionviewlayout

swift