TableViewCell Swift中的动态CollectionViewCell [英] Dynamic CollectionViewCell In TableViewCell Swift

问题描述

如何根据UICollectionViewCell使UITableViewCell高度动态化?

How To Make UITableViewCell Height Dynamic according the UICollectionViewCell?

UIViewController

UIViewController

UITableView

UITableView

UITableViewCell

UITableViewCell

UICollectionView

UICollectionView

UICollectionViewCell1

UICollectionViewCell1

标签 1

UICollectionViewCell2

UICollectionViewCell2

标签 2

UICollectionViewCell3

UICollectionViewCell3

标签 3

[等等]

解释:

这里Label1、Label2、label 3在UICollectionView<中有动态高度和numberOfRows/code> 也是动态的.我需要 UITableViewCell 根据 UICollectionViewCell 的高度.

Explanation:

Here Label1, Label2, label 3 are have dynamic height and numberOfRows in UICollectionView is also dynamic. I need Height of UITableViewCell according to the UICollectionViewCell.

推荐答案

View Hierarchy In UIViewController

1. 绑定委托和数据源

• 绑定UItableView委托和数据源与UIViewController.

  绑定 UICollectionView 与 UItableViewCell 在这里 TblCell 的委托和数据源.

  Bind UICollectionView Delegate and datasource with the UItableViewCell here TblCell.

  1. 在 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
   }
   }
  

• 在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
• 黑色轮廓:标签

Output:

• Red Border : UITableViewCell
• Yellow Border : UICollectionViewCell
• Black Outline : Label

使用 UICollectionViewDelegateFlowLayout

没有 UICollectionViewDelegateFlowLayout

UITableViewCell 内的 UICollectionView -- 动态高度?

TableViewCell 高度基于 collectionview 内容大小，即如果相同的 tableCell 具有除 collectionview 或 collectionView 有上下边距，则不会计算.为此，您可以创建多个单元格，其中一个单元格仅包含 collectionview (目前最好的方法)，或者您可以在 systemLayoutSizeFittingtableViewCell 高度代码>通过计算.

TableViewCell height is based on collectionview content size i.e. if same tableCell have any other UI component other than collectionview or there is top bottom margin for collectionView then it won't be calculated. For this, you can create multiple cells in which one cell only contain collectionview (Best Approach for now) or you can return your actual tableViewCell height in systemLayoutSizeFitting by calculation.

这篇关于TableViewCell Swift中的动态CollectionViewCell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！