如何使用 IOS 12 在 UITableViewCell 中正确添加 UICollectionView

Question

由于某些原因，在使用 Xcode 10 beta 时，我无法在 table 视图单元格中正确显示集合中的某些项目。在过去的 4 天里，我尝试了所有我知道的。

我制作了一个小项目示例，看看我的问题是什么。
如果有人想在本地运行完整代码在这里：https://github.com/adrianstanciu24/CollectionViewInsideUITableViewCell

我首先添加一个 table 视图，其中包含 2 个不同的可调整大小的单元格，第一个单元格具有集合视图和标签：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
        tableView.estimatedRowHeight = 44
        tableView.rowHeight = UITableView.automaticDimension
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell = tableView.dequeueReusableCell(withIdentifier: "collCell") as! CollectionTableViewCell
            cell.collectionView.collectionViewLayout.invalidateLayout()

            return cell
        } else {
            let cell = tableView.dequeueReusableCell(withIdentifier: "normalCell")!

            return cell
        }
    }
}

这是定义了集合视图的单元格。这也有一个高度限制，我在 layoutSubviews:

中更新了

class CollectionTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!


    override func awakeFromNib() {
        super.awakeFromNib()

        collectionView.delegate = self
        collectionView.dataSource = self

        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        collectionViewHeightConstraint.constant = collectionView.collectionViewLayout.collectionViewContentSize.height
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "taskCell", for: indexPath as IndexPath) as! TaskCollectionViewCell

        cell.name.text = "Task_" + String(indexPath.row)

        return cell
    }
}

下面是带有集合视图约束的屏幕截图以及故事板的外观：

这就是运行ning:

时的样子

单元格被压扁，顶部的标签消失。我想要的是集合视图应该增长以显示所有元素并使 table 视图单元格调整大小，但目前没有发生，我无法弄清楚问题出在哪里。

Answer 1

如果您想要的输出如下

然后用这个

替换你的 collectionview 代码

class CollectionTableViewCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!
    var arrForString:[String] = ["Task_0","Task_1","Task_3","Task_4","Task_5","Task_6","Task_7","Task_8","Task_9","Task_10"]

    override func awakeFromNib() {
        super.awakeFromNib()

        collectionView.delegate = self
        collectionView.dataSource = self

        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        }

    }


    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrForString.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "taskCell", for: indexPath as IndexPath) as! TaskCollectionViewCell

        cell.name.text = arrForString[indexPath.row]
        cell.layoutIfNeeded()
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        //we are just measuring height so we add a padding constant to give the label some room to breathe!
        var padding: CGFloat = 10.0
        var height = 10.0

        height = Double(estimateFrameForText(text: arrForString[indexPath.row]).height + padding)
        return CGSize(width: 50, height: height)


    }


    private func estimateFrameForText(text: String) -> CGRect {
        //we make the height arbitrarily large so we don't undershoot height in calculation
        let height: CGFloat = 120

        let size = CGSize(width: 50, height: height)
        let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
        let attributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 18, weight: UIFont.Weight.light)]

        return NSString(string: text).boundingRect(with: size, options: options, attributes: attributes, context: nil)
    }
}

欢迎提问。

Answer 2

如果你想要下面的输出：

代码 ViewController:

class ViewController: UIViewController {
    let list = [String](repeating: "Label", count: 10)
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
            ])
        tableView.reloadData()
    }

    public lazy var tableView: UITableView = { [unowned self] in
        let v = UITableView.init(frame: .zero)
        v.delegate = self
        v.dataSource = self
        v.estimatedRowHeight = 44
        v.rowHeight = UITableViewAutomaticDimension
        v.register(TableCell.self, forCellReuseIdentifier: "TableCell")
        return v
    }()
}
extension ViewController: UITableViewDelegate{

}
extension ViewController: UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableCell", for: indexPath) as! TableCell
        cell.label.text = "\(list[indexPath.row]) \(indexPath.row)"
        return cell
    }
}

表格单元格：

class TableCell: UITableViewCell{

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        commonInit()
    }

    func commonInit(){
        contentView.addSubview(label)
        contentView.addSubview(collectionView)
        updateConstraints()
    }

    override func updateConstraints() {
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: topAnchor),
            label.leadingAnchor.constraint(equalTo: leadingAnchor),
            label.trailingAnchor.constraint(equalTo: trailingAnchor)
            ])
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: label.bottomAnchor),
            collectionView.leadingAnchor.constraint(equalTo: leadingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: bottomAnchor),
            collectionView.trailingAnchor.constraint(equalTo: trailingAnchor),
            ])
        super.updateConstraints()
    }

    let list = [String](repeating: "Task_", count: 10)
    public let label: UILabel = {
        let v = UILabel()
        v.textAlignment = .center
        return v
    }()

    public lazy var collectionView: UICollectionView = { [unowned self] in
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        let v = UICollectionView(frame: .zero, collectionViewLayout: layout)
        v.register(CollectionCell.self, forCellWithReuseIdentifier: "CollectionCell")
        v.delegate = self
        v.dataSource = self
        v.isScrollEnabled = false
        return v
    }()

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        let collectionCellHeight = 50
        let rows = list.count / 5 // 5: items per row
        let labelHeight = 20 // you can calculate String height
        let height = CGFloat((collectionCellHeight * rows) + labelHeight)
        let width = contentView.frame.size.width
        return CGSize(width: width, height: height)
    }
}
extension TableCell: UICollectionViewDataSource{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return list.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as! CollectionCell
        cell.label.text = "\(list[indexPath.item])\(indexPath.item)"
        return cell
    }
}
extension TableCell: UICollectionViewDelegate{

}
extension TableCell: UICollectionViewDelegateFlowLayout{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width/5, height: 50)
    }
}

CollectionCell

class CollectionCell: UICollectionViewCell{
    let padding: CGFloat = 5
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit(){
        backgroundColor = .yellow
        contentView.addSubview(label)
        updateConstraints()
    }

    override func updateConstraints() {
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
           label.topAnchor.constraint(equalTo: topAnchor, constant: padding),
            label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding),
            label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding)
            ])
        super.updateConstraints()
    }

    public let label: UILabel = {
        let v = UILabel()
        v.textColor = .darkText
        v.minimumScaleFactor = 0.5
        v.numberOfLines = 1
        return v
    }()
}

Answer 3

用 Swift 5.3 制作并在 iOS 14 上测试，只需复制和粘贴即可执行以下操作：

TableViewController.swift

import UIKit
import SnapKit

class TableViewController: UIViewController {
    
    private let tableView: UITableView = UITableView()
    private let tableViewCellId = "TableViewCell"
 
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupUI()
    }
}

// MARK: - Setup UIs

extension TableViewController {
    
    private func setupUI() {
        
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(TableViewCell.self, forCellReuseIdentifier: tableViewCellId)
        
        view.addSubview(tableView)
        
        tableView.snp.makeConstraints {
            [=10=].edges.equalToSuperview()
        }
    }
}

// MARK: - Delegate & DataSource

extension TableViewController: UITableViewDelegate, UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: tableViewCellId) as! TableViewCell
        cell.backgroundColor = .white
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}

TableViewCell.swift

import UIKit
import SnapKit

class TableViewCell: UITableViewCell {
    
    private let list = [String](repeating: "Row ", count: 10)
    
    private let collectionViewLayout = UICollectionViewFlowLayout()
    lazy private var collectionView: UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewLayout)
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    }
    
    override func layoutSubviews() {
        setupUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

// MARK: - UI Setup

extension TableViewCell {
    
    private func setupUI() {
        
        // layout.minimumLineSpacing = 5
        // layout.minimumInteritemSpacing = 5
        collectionViewLayout.scrollDirection = .horizontal
        
        collectionView.backgroundColor = .clear
        collectionView.showsHorizontalScrollIndicator = false
        
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionCell")
        collectionView.delegate = self
        collectionView.dataSource = self
        
        addSubview(collectionView)
        
        collectionView.snp.makeConstraints {
            [=11=].edges.equalToSuperview()
        }
    }
}

extension TableViewCell: UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return list.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath) as! CollectionViewCell
        
        cell.titleLabel.text = "\(list[indexPath.item])\(indexPath.item)"
        return cell
    }
}

extension TableViewCell: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width / 5, height: 100)
    }
}

CollectionViewCell.swift

import UIKit

class CollectionViewCell: UICollectionViewCell {
    
    var titleLabel: UILabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        setupUI()
    }
}

// MARK: - UI Setup
extension CollectionViewCell {
    
    private func setupUI() {
        
        titleLabel.font = UIFont(name: "HelveticaNeue", size: 20)
        titleLabel.textColor = .white
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.backgroundColor = .systemGreen
        titleLabel.textAlignment = .center
        
        addSubview(titleLabel)
        
        titleLabel.snp.makeConstraints {
            [=12=].centerX.centerY.equalToSuperview()
            [=12=].height.equalTo(60)
            [=12=].width.equalTo(150)
        }
    }
}

如何使用 IOS 12 在 UITableViewCell 中正确添加 UICollectionView

How to properly add an UICollectionView inside UITableViewCell using IOS 12

ios

uicollectionview

swift

ios12

xcode10