具有UITableView且具有动态标头作为单元格的自定义UICollectionView

使用一个包含UITableView的单元格制作一个具有自定义大小的UICollectionView时遇到问题,该单元格的标头具有动态高度的标签。

有人可以指出我在所附示例项目中需要更改的内容吗?

您可以在屏幕截图上看到该表格不适合该视图,因为当前手动设置了单元格的高度。

具有UITableView且具有动态标头作为单元格的自定义UICollectionView

import UIKit

class ViewController: UIViewController {
    static let section1 = "section1"
        static let section2 = "section2"
        private weak var collectionView: UICollectionView!

        override func viewDidLoad() {
            self.navigationItem.title = "Collection View"
            super.viewDidLoad()
            self.setupCollectionView()
        }

        private func setupCollectionView() {
            let flowLayout = UICollectionViewFlowLayout()
            flowLayout.scrollDirection = .vertical
            flowLayout.minimumInteritemSpacing = 0.0
            flowLayout.minimumLinespacing = 0.0
            let collectionView = UICollectionView(frame: self.view.frame,collectionViewLayout: flowLayout)
            collectionView.alwaysBounceVertical = true
            collectionView.register(
                SectionHeaderView.self,forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,withReuseIdentifier: SectionHeaderView.sectionHeaderId
            )
            collectionView.register(Section1.self,forCellWithReuseIdentifier: ViewController.section1)
            collectionView.register(Section2.self,forCellWithReuseIdentifier: ViewController.section2)
            self.view.addSubview(collectionView)
            self.collectionView = collectionView
            self.collectionView.translatesAutoresizingMaskintoConstraints = false
            self.collectionView.topAnchor.constraint(equalTo: self.view.topAnchor).isactive = true
            self.collectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isactive = true
            self.collectionView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isactive = true
            self.collectionView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isactive = true
            self.collectionView.dataSource = self
            self.collectionView.delegate = self
        }
    }

    // MARK: - UICollectionViewDelegateFlowLayout
    extension ViewController: UICollectionViewDelegateFlowLayout {
        func collectionView(_ collectionView: UICollectionView,layout collectionViewLayout: UICollectionViewLayout,sizeForItemAt indexPath: IndexPath) -> CGSize {
            switch indexPath.section {
            case 0:
                return CGSize(width: self.view.frame.width,height: 210.0)
            case 1:
                return CGSize(width: self.view.frame.width,height: 5 * 51.0 + 130.0) // How to enable self-sizing cells for table view inside
            default:
                fatalError("Unsupported section index.")
            }
        }

        func collectionView(_ collectionView: UICollectionView,referenceSizeForHeaderInSection section: Int) -> CGSize {
            return CGSize(width: self.view.frame.width,height: 61)
        }
    }

    // MARK: - UICollectionViewDataSource
    extension ViewController: UICollectionViewDataSource {
        func numberOfSections(in collectionView: UICollectionView) -> Int {
            return 2
        }

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

        func collectionView(_ collectionView: UICollectionView,viewForSupplementaryElementOfKind kind: String,at indexPath: IndexPath) -> UICollectionReusableView {
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind,withReuseIdentifier: SectionHeaderView.sectionHeaderId,for: indexPath) as! SectionHeaderView
            switch indexPath.section {
            case 0:
                header.uiLabel.text = "Section 1"
            case 1:
                header.uiLabel.text = "Section 2"
            default:
                fatalError("Unsupported section index.")
            }
            return header
        }

        func collectionView(_ collectionView: UICollectionView,cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            switch indexPath.section {
            case 0:
                let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.section1,for: indexPath) as! Section1
                return cell
            case 1:
                let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.section2,for: indexPath) as! Section2
                return cell
            default:
                fatalError("OverviewController: Unsupported section index.")
            }
        }
}
redrex5 回答:具有UITableView且具有动态标头作为单元格的自定义UICollectionView

要实现自动调整collectionView单元的大小,您实际上只需要进行一些更改。

夫妇要点:

  • 单元必须满足其自身的约束。因此,请确保不要在sizeForItemAt中计算大小,而是要确保单元格具有宽度和高度限制。这些可以基于内容是动态的。

  • 将元素添加到集合视图单元格的contentView,而不是单元格本身。

  • 对于嵌入式非滚动表视图,请使用子类,该子类根据表的contentSize设置内部内容大小的高度。示例:


final class ContentSizedTableView: UITableView {
    override var contentSize:CGSize {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }
    override var intrinsicContentSize: CGSize {
        layoutIfNeeded()
        return CGSize(width: UIView.noIntrinsicMetric,height: contentSize.height)
    }
}

这里有一个很好的教程(不是我的):https://medium.com/@andrea.toso/uicollectionviewcell-dynamic-height-swift-b099b28ddd23,其中有更详细的说明。

我在您提供的项目中实现了这些概念,并将其放在GitHub存储库上(以便于查看更改):https://github.com/DonMag/ThunderCollectionView

结果:

enter image description here

enter image description here

本文链接:https://www.f2er.com/3152439.html

大家都在问