可扩展的UICollectionViewCell [英] Expandable UICollectionViewCell

问题描述

我正在尝试编写可扩展的UICollectionViewCell。
如果用户按下顶部按钮，则单元格应扩展到不同的高度并显示基础内容。

I'm trying to program an expandable UICollectionViewCell. If the user presses the topbutton, the cell should expand to a different height and reveal the underlying content.

我的第一个实现具有自定义UICollectionViewCell，它可以通过单击顶部按钮进行扩展，但collectionview也不会扩展。自动取款机。单元格是collectionview中的最后一个单元格，只需向下滑动，就可以看到展开的内容。如果你停止触摸，滚动视图会跳起来，看不到扩展单元格。

My first implementation features a custom UICollectionViewCell, which can be expanded by clicking the topbutton, but the collectionview does not expand too. Atm. the cell is the last one in the collectionview and just by swiping down enough, you can see the expanded content. If you stop touching, the scrollview jumps up and nothing of the expanded cell could be seen.

这是我的代码：

import Foundation
import UIKit

class ExpandableCell: UICollectionViewCell {

  @IBOutlet weak var topButton: IconButton!

  public var expanded : Bool = false

  private var expandedHeight : CGFloat = 200

  private var notExpandedHeight : CGFloat = 50

  @IBAction func topButtonTouched(_ sender: AnyObject) {
    if (expanded == true) {
      self.deExpand()
    } else {
      self.expand()
    }
  }

  public func expand() {
   UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
      self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.expandedHeight)
    }, completion: { success in
      self.expanded = true
    })
  }

  public func deExpand() {
    UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
      self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: self.notExpandedHeight)
    }, completion: { success in
      self.expanded = false
    })
  }
}

我也无法正确实现以下方法，因为我没有直接引用该单元格：

I also have problems implementing the following method correctly, because I haven't got a direct reference to the cell:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize

基本上一切都应该是动画的。

Basicly everything should be animated.

屏幕截图显示了扩展而未扩展的单元格。希望有所帮助！

The screenshot shows an expanded and not expanded cell. Hope that helps!

谢谢！

推荐答案

如果在集合视图单元格内触摸按钮时有多个单元格需要扩展到不同的高度，那么，这是代码。

If you have more than cell that needs to be expanded to different height when a button is touched inside the collection view cell, then, here is the code.

我已经使用委托模式让控制器知道，使用indexPath触摸了哪个单元格的按钮。
创建单元格时需要将单元格的索引路径传递给单元格。

I have used the delegate pattern to let the controller know, button of which cell was touched using the indexPath. You need to pass the indexpath of the cell to the cell when creating the cell.

当触摸按钮时，单元格调用委托（ViewController），相应地更新isExpandedArray并重新加载特定单元格。

when the button is touched the cell calls the delegate(ViewController), which updates the isExpandedArray accordingly and reloads the particular cell.

CollectionViewCell

CollectionViewCell

 protocol ExpandedCellDelegate:NSObjectProtocol{
    func topButtonTouched(indexPath:IndexPath)
}

class ExpandableCell: UICollectionViewCell {

    @IBOutlet weak var topButton: UIButton!
    weak var delegate:ExpandedCellDelegate?

    public var indexPath:IndexPath!

    @IBAction func topButtonTouched(_ sender: UIButton) {
        if let delegate = self.delegate{
            delegate.topButtonTouched(indexPath: indexPath)
        }
    }
}

查看控制器类

View Controller Class

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    var expandedCellIdentifier = "ExpandableCell"

    var cellWidth:CGFloat{
        return collectionView.frame.size.width
    }
     var expandedHeight : CGFloat = 200
     var notExpandedHeight : CGFloat = 50

     var dataSource = ["data0","data1","data2","data3","data4"]
     var isExpanded = [Bool]()

    override func viewDidLoad() {
        super.viewDidLoad()
        isExpanded = Array(repeating: false, count: dataSource.count)
    }
}


extension ViewController:UICollectionViewDataSource{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return dataSource.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
          let cell = collectionView.dequeueReusableCell(withReuseIdentifier: expandedCellIdentifier, for: indexPath) as! ExpandableCell
            cell.indexPath = indexPath
            cell.delegate = self
            //configure Cell
            return cell

    }
}

extension ViewController:UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if isExpanded[indexPath.row] == true{
             return CGSize(width: cellWidth, height: expandedHeight)
        }else{
            return CGSize(width: cellWidth, height: notExpandedHeight)
        }

    }

}

extension ViewController:ExpandedCellDelegate{
    func topButtonTouched(indexPath: IndexPath) {
        isExpanded[indexPath.row] = !isExpanded[indexPath.row]
        UIView.animate(withDuration: 0.8, delay: 0.0, usingSpringWithDamping: 0.9, initialSpringVelocity: 0.9, options: UIViewAnimationOptions.curveEaseInOut, animations: {
              self.collectionView.reloadItems(at: [indexPath])
            }, completion: { success in
                print("success")
        })
    }
}

这篇关于可扩展的UICollectionViewCell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！