TableViewCell Swift 中的动态 CollectionViewCell

Question

问题：

如何UITableViewCell根据高度动态化UICollectionViewCell？

查看层次结构：

UI视图控制器

UI表格视图

UITableViewCell

UI集合视图

UICollectionViewCell1

标签1

UICollectionViewCell2

标签2

UICollectionViewCell3

标签3

[很快]

解释：

这里Label1、Label2、label 3都有动态高度，并且numberOfRowsinUICollectionView也是动态的。我需要UITableViewCell根据 的高度UICollectionViewCell。

Answer 1

查看层次结构UIViewController

脚步：

1. 绑定委托和数据源

• 将UITableView委托和数据源绑定到UIViewController.

• 使用here绑定UICollectionView委托和数据源。UITableViewCellTblCell

2. 在UIViewController

    class CollectionVC: UIViewController, UITableViewDataSource, UITableViewDelegate {
   
    :
    :
   
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableViewAutomaticDimension // For tableCell Dynamic Height
    }
   
    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200 // For tableCell Estimated Height
    }
    // Above two delegates must be necessary or you can use property for same.
   
   
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1 // returning 1, as per current single cell
    }
   
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TblCell") as! TblCell
   
        return cell
    }
    }
   

3. 在TblCell

    class TblCell: UITableViewCell , UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
   
    @IBOutlet var colViewObj: UICollectionView!
   
    // Array for Label
    var arrData = ["Hello", "How re you?", "rock the world", "Nice to meet you.", "Hey! It is awsome."]
   
   
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
   
        self.colViewObj.isScrollEnabled = false
    }
   
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
   
        // Configure the view for the selected state
    }
   
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
   
         // Get width of Label As per String characters.
        let aWidth : CGFloat = arrData[indexPath.row].width(withConstraintedHeight: 40, font: UIFont.systemFont(ofSize: 17.0))
   
        return CGSize(width: aWidth + 40 , height: 40)
    }
   
    // THIS IS THE MOST IMPORTANT METHOD
    //
    // This method tells the auto layout
    // You cannot calculate the collectionView content size in any other place, 
    // because you run into race condition issues.
   
    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
   
        // If the cell's size has to be exactly the content 
        // Size of the collection View, just return the
        // collectionViewLayout's collectionViewContentSize.
   
        self.colViewObj.frame = CGRect(x: 0, y: 0,
                                       width: targetSize.width, height: 600)
        self.colViewObj.layoutIfNeeded() 
   
        // It Tells what size is required for the CollectionView
        return self.colViewObj.collectionViewLayout.collectionViewContentSize
   
    }
   
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrData.count
    }
   
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ColViewCell", for: indexPath) as! ColViewCell
   
        cell.lblTitle.text = arrData[indexPath.item]
   
        cell.lblTitle.layer.borderColor = UIColor.black.cgColor
        cell.lblTitle.layer.borderWidth = 1.0
   
        return cell
    }
   
    }
   
    extension String {
   
    func width(withConstraintedHeight height: CGFloat, font: UIFont) -> CGFloat {
        let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
        let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil)
   
        return ceil(boundingBox.width)
    }
    }
   

输出：

• 红色边框： UITableViewCell
• 黄色边框： UICollectionViewCell
• 黑色轮廓：标签

与 UICollectionViewDelegateFlowLayout

没有 UICollectionViewDelegateFlowLayout

参考：

UITableViewCell 内的 UICollectionView ——动态高度？

笔记 ：

TableViewCell高度基于collectionview内容大小，即如果相同的UI 组件除了顶部底部边距之外还有tableCell任何其他 UI 组件，则不会计算高度。为此，您可以创建多个单元格，其中一个单元格仅包含（目前最佳方法），或者您可以通过计算返回实际高度。collectionviewcollectionViewcollectionviewtableViewCellsystemLayoutSizeFitting