Как правильно добавить UICollectionView внутри UITableViewCell с помощью IOS 12 - PullRequest
0 голосов
/ 30 августа 2018

По некоторым причинам я не могу правильно отображать некоторые элементы из коллекции в ячейке табличного представления при использовании бета-версии Xcode 10. Я перепробовал все, что знаю за последние 4 дня.

Я сделал небольшой пример проекта, чтобы понять, в чем заключается моя проблема.
Полный код здесь, если кто-то хочет запустить его локально: https://github.com/adrianstanciu24/CollectionViewInsideUITableViewCell

Сначала я добавляю табличное представление с 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
    }
}

Ниже приведен скриншот с ограничением представления коллекции и тем, как выглядит раскадровка:

enter image description here

А вот как это выглядит при запуске:

enter image description here

Ячейки сдавлены, и ярлык сверху исчезает. Я хочу, чтобы представление коллекции увеличивалось, чтобы отображались все элементы, а также делалось изменение размера ячейки табличного представления, но в данный момент этого не происходит, и я не могу понять, где проблема.

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Если вы хотите следующий вывод:

enter image description here

Код 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
    }
}

TableCell:

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
    }()
}
0 голосов
/ 31 августа 2018

Если желаемый результат соответствует enter image description here

Затем замените ваш код коллекции на этот

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)
    }
}

Не стесняйтесь спрашивать.

...