在 viewDidLayoutSubviews上，将 estimatedItemSize设置为全宽(布局指的是 UICollectionViewFlowLayout 对象) :

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: collectionView.bounds.size.width, height: 120)
}

在单元格中，确保约束同时触及单元格的顶部和底部(下面的代码使用 Cartography 来简化约束的设置，但如果需要，也可以使用 NSLayoutConstraint 或 IB) :

constrain(self, nameLabel, valueLabel) { view, name, value in
name.top == view.top + 10
name.left == view.left
name.bottom == view.bottom - 10
value.right == view.right
value.centerY == view.centerY
}

瞧，你们的细胞现在可以在高度上自动生长了！

所有的解决方案都不适合我，因为我需要动态宽度来适应不同的 iPhone 宽度。

    class CustomLayoutFlow: UICollectionViewFlowLayout {
override init() {
super.init()
minimumInteritemSpacing = 1 ; minimumLineSpacing = 1 ; scrollDirection = .horizontal
}


required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
minimumInteritemSpacing = 1 ; minimumLineSpacing = 1 ; scrollDirection = .horizontal
}


override var itemSize: CGSize {
set { }
get {
let width = (self.collectionView?.frame.width)!
let height = (self.collectionView?.frame.height)!
return CGSize(width: width, height: height)
}
}
}


class TextCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var textView: UITextView!


override func prepareForReuse() {
super.prepareForReuse()
}
}








class IntroViewController: UIViewController, UITextViewDelegate, UICollectionViewDataSource, UICollectionViewDelegate, UINavigationControllerDelegate {
@IBOutlet weak var collectionViewTopDistanceConstraint: NSLayoutConstraint!
@IBOutlet weak var collectionViewTopDistanceConstraint: NSLayoutConstraint!
@IBOutlet weak var collectionView: UICollectionView!
var collectionViewLayout: CustomLayoutFlow!


override func viewDidLoad() {
super.viewDidLoad()


self.collectionViewLayout = CustomLayoutFlow()
self.collectionView.collectionViewLayout = self.collectionViewLayout
}


override func viewWillLayoutSubviews() {
self.collectionViewTopDistanceConstraint.constant = UIScreen.main.bounds.height > 736 ? 94 : 70


self.view.layoutIfNeeded()
}
}

根据我对 Eric 答案的评论，我的解决方案与他的非常相似，但是我必须在 preredSizeFor... 中添加一个约束，以便约束到固定维度。

    override func systemLayoutSizeFitting(
_ targetSize: CGSize, withHorizontalFittingPriority
horizontalFittingPriority: UILayoutPriority,
verticalFittingPriority: UILayoutPriority) -> CGSize {


width.constant = targetSize.width


let size = contentView.systemLayoutSizeFitting(
CGSize(width: targetSize.width, height: 1),
withHorizontalFittingPriority: .required,
verticalFittingPriority: verticalFittingPriority)


print("\(#function) \(#line) \(targetSize) -> \(size)")
return size
}

这个问题有很多重复的 我在这里详细地回答了, 并在这里提供了一个工作样本应用程序。

对于这个问题，我找到了一个相当简单的解决方案: 在 CollectionViewCell 中，我得到了一个 UIView () ，它实际上只是一个背景。要获得全宽度，我只需设置以下锚点

bgView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.size.width - 30).isActive = true // 30 is my added up left and right Inset
bgView.topAnchor.constraint(equalTo: topAnchor).isActive = true
bgView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
bgView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
bgView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

“魔术”发生在第一行。我动态地将 widthAnchor 设置为屏幕的宽度。同样重要的是减去 CollectionView 的插入。否则那个手机就不会出现了。如果你不想有这样的背景视图，只要让它不可见。

FlowLayout 使用以下设置

layout.itemSize = UICollectionViewFlowLayoutAutomaticSize
layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize

结果是一个具有动态高度的全宽单元格。

必须向 CollectionViewCell 添加宽度约束

class SelfSizingCell: UICollectionViewCell {


override func awakeFromNib() {
super.awakeFromNib()
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true
}
}

1. 设置流程布局的 estimatedItemSize:

   collectionViewLayout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
   

2. Define a width constraint in the cell and set it to be equal to superview's width:

   class CollectionViewCell: UICollectionViewCell {
   private var widthConstraint: NSLayoutConstraint?
   
   
   ...
   
   
   override init(frame: CGRect) {
   ...
   // Create width constraint to set it later.
   widthConstraint = contentView.widthAnchor.constraint(equalToConstant: 0)
   }
   
   
   override func updateConstraints() {
   // Set width constraint to superview's width.
   widthConstraint?.constant = superview?.bounds.width ?? 0
   widthConstraint?.isActive = true
   super.updateConstraints()
   }
   
   
   ...
   }
   

Full example

Tested on iOS 11.

1. iOS 13 + 解决方案

有了 Swift 5.1和 iOS 13，你可以使用 组合布局对象来解决你的问题。

下面完整的示例代码显示了如何在全宽 UICollectionViewCell内显示多行 UILabel:

CollectionViewController Swift

import UIKit


class CollectionViewController: UICollectionViewController {


let items = [
[
"Lorem ipsum dolor sit amet.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
],
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
],
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
]
]


override func viewDidLoad() {
super.viewDidLoad()


let size = NSCollectionLayoutSize(
widthDimension: NSCollectionLayoutDimension.fractionalWidth(1),
heightDimension: NSCollectionLayoutDimension.estimated(44)
)
let item = NSCollectionLayoutItem(layoutSize: size)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)


let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
section.interGroupSpacing = 10


let headerFooterSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .absolute(40)
)
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
layoutSize: headerFooterSize,
elementKind: "SectionHeaderElementKind",
alignment: .top
)
section.boundarySupplementaryItems = [sectionHeader]


let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout
collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView")
}


override func numberOfSections(in collectionView: UICollectionView) -> Int {
return items.count
}


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items[section].count
}


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
cell.label.text = items[indexPath.section][indexPath.row]
return cell
}


override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView", for: indexPath) as! HeaderView
headerView.label.text = "Header"
return headerView
}


override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
coordinator.animate(alongsideTransition: { context in
self.collectionView.collectionViewLayout.invalidateLayout()
}, completion: nil)
}


}

HeaderView.swift

import UIKit


class HeaderView: UICollectionReusableView {


let label = UILabel()


override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .magenta


addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}


required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}


}

CustomCell Swift

import UIKit


class CustomCell: UICollectionViewCell {


let label = UILabel()


override init(frame: CGRect) {
super.init(frame: frame)


label.numberOfLines = 0
backgroundColor = .orange
contentView.addSubview(label)


label.translatesAutoresizingMaskIntoConstraints = false
label.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}


required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}


}

预期展品:

2. iOS 11 + 解决方案

使用 Swift 5.1和 iOS 11，您可以子类化 UICollectionViewFlowLayout并将其 estimatedItemSize属性设置为 UICollectionViewFlowLayout.automaticSize(这将告诉系统您希望处理自动调整大小的 UICollectionViewCell)。然后必须覆盖 layoutAttributesForElements(in:)和 layoutAttributesForItem(at:)以设置单元格宽度。最后，必须重写单元格的 preferredLayoutAttributesFitting(_:)方法并计算它的高度。

以下完整的代码显示了如何在全宽 UIcollectionViewCell内显示多行 UILabel(受 UICollectionView的安全区域和 UICollectionViewFlowLayout的插图限制) :

CollectionViewController Swift

import UIKit


class CollectionViewController: UICollectionViewController {


let items = [
[
"Lorem ipsum dolor sit amet.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
],
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
],
[
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
]
]
let customFlowLayout = CustomFlowLayout()


override func viewDidLoad() {
super.viewDidLoad()


customFlowLayout.sectionInsetReference = .fromContentInset // .fromContentInset is default
customFlowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
customFlowLayout.minimumInteritemSpacing = 10
customFlowLayout.minimumLineSpacing = 10
customFlowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
customFlowLayout.headerReferenceSize = CGSize(width: 0, height: 40)


collectionView.collectionViewLayout = customFlowLayout
collectionView.contentInsetAdjustmentBehavior = .always
collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "CustomCell")
collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView")
}


override func numberOfSections(in collectionView: UICollectionView) -> Int {
return items.count
}


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items[section].count
}


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
cell.label.text = items[indexPath.section][indexPath.row]
return cell
}


override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "HeaderView", for: indexPath) as! HeaderView
headerView.label.text = "Header"
return headerView
}


}

CustomFlowLayout.swift

import UIKit


final class CustomFlowLayout: UICollectionViewFlowLayout {


override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let layoutAttributesObjects = super.layoutAttributesForElements(in: rect)?.map{ $0.copy() } as? [UICollectionViewLayoutAttributes]
layoutAttributesObjects?.forEach({ layoutAttributes in
if layoutAttributes.representedElementCategory == .cell {
if let newFrame = layoutAttributesForItem(at: layoutAttributes.indexPath)?.frame {
layoutAttributes.frame = newFrame
}
}
})
return layoutAttributesObjects
}


override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
guard let collectionView = collectionView else {
fatalError()
}
guard let layoutAttributes = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes else {
return nil
}


layoutAttributes.frame.origin.x = sectionInset.left
layoutAttributes.frame.size.width = collectionView.safeAreaLayoutGuide.layoutFrame.width - sectionInset.left - sectionInset.right
return layoutAttributes
}


}

HeaderView.swift

import UIKit


class HeaderView: UICollectionReusableView {


let label = UILabel()


override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .magenta


addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}


required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}


}

CustomCell Swift

import UIKit


class CustomCell: UICollectionViewCell {


let label = UILabel()


override init(frame: CGRect) {
super.init(frame: frame)


label.numberOfLines = 0
backgroundColor = .orange
contentView.addSubview(label)


label.translatesAutoresizingMaskIntoConstraints = false
label.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}


required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}


override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
let layoutAttributes = super.preferredLayoutAttributesFitting(layoutAttributes)
layoutIfNeeded()
layoutAttributes.frame.size = systemLayoutSizeFitting(UIView.layoutFittingCompressedSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
return layoutAttributes
}


}

以下是 preferredLayoutAttributesFitting(_:)的一些替代实现:

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
let targetSize = CGSize(width: layoutAttributes.frame.width, height: 0)
layoutAttributes.frame.size = contentView.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
return layoutAttributes
}

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
label.preferredMaxLayoutWidth = layoutAttributes.frame.width
layoutAttributes.frame.size.height = contentView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).height
return layoutAttributes
}

预期展品:

在 IOS 上测试: 12.1 Swift 4.1

我有一个非常简单的解决方案，不需要打破约束。

我的 ViewControllerClass

class ViewController: UIViewController {


@IBOutlet weak var collectionView: UICollectionView!


let cellId = "CustomCell"


var source = ["nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,","nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,","nomu", "when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ", "t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,"]


override func viewDidLoad() {
super.viewDidLoad()


self.collectionView.delegate = self
self.collectionView.dataSource = self
self.collectionView.register(UINib.init(nibName: cellId, bundle: nil), forCellWithReuseIdentifier: cellId)


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


}


}




extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {


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


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as? CustomCell else { return UICollectionViewCell() }
cell.setData(data: source[indexPath.item])
return cell
}




}

CustomCell 类别:

class CustomCell: UICollectionViewCell {


@IBOutlet weak var label: UILabel!
@IBOutlet weak var widthConstraint: NSLayoutConstraint!


override func awakeFromNib() {
super.awakeFromNib()
self.widthConstraint.constant = UIScreen.main.bounds.width
}


func setData(data: String) {
self.label.text = data
}


override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
return contentView.systemLayoutSizeFitting(CGSize(width: self.bounds.size.width, height: 1))
}


}

主要成分是在 Customcell 的 ABc0功能。我们还必须在 Cell 中设置视图的宽度。

AutoLayout 可以用于 CollectionView 中单元格的自动大小调整，只需简单的两步:

1. 启用动态单元大小调整

flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

2. 拥有一个容器视图并设置来自 collectionView(:cellForItemAt:)的 conterView.widthAnchor.約束，以将 contentView 的宽度限制为 CollectionView 的宽度。

class ViewController: UIViewController, UICollectionViewDataSource {
...


func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! MultiLineCell
cell.textView.text = dummyTextMessages[indexPath.row]
cell.maxWidth = collectionView.frame.width
return cell
}


...
}

class MultiLineCell: UICollectionViewCell{
....


var maxWidth: CGFloat? {
didSet {
guard let maxWidth = maxWidth else {
return
}
containerViewWidthAnchor.constant = maxWidth
containerViewWidthAnchor.isActive = true
}
}


....
}

就是这样，你会得到你想要的结果。 完整代码请参考以下要点:

• SelfSizingCollectionViewCellDemo + UILabel.swift
• SelfSizingCollectionViewCellDemo + UITextView.swift

参考/学分:

• V8tr 的博客文章-< a href = “ https://www.vadibulavin.com/Collection-View-Cells-self-size/”rel = “ nofollow noReferrer”> Collection View Cell Self-Size: Step by Step 教程
• 另一个堆栈溢出的答案

截图:

我还面临着动态单元的高度问题，可以解决这个问题使用自动布局和手动高度计算。不需要使用估计的大小，实例化或创建单元格。

此外，这个解决方案还提供了对多行标签的处理。它基于计算单元格中所有子视图的子视图高度。

extension CollectionViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
let contentHorizontalSpaces = collectionLayout.minimumInteritemSpacing
+ collectionLayout.sectionInset.left
+ collectionLayout.sectionInset.right
let newCellWidth = (collectionView.bounds.width - contentHorizontalSpaces) / 2
let newHeight = Cell.getProductHeightForWidth(props: data[indexPath.row], width: newCellWidth)
return CGSize(width: newCellWidth, height: newHeight)
}
}

UICollectionViewgenerateFlowLayout 使用单元格的大小，这是用 getProductHeightForWidth方法计算出来的:

extension Cell {


class func getProductHeightForWidth(props: Props, width: CGFloat) -> CGFloat {
// magic numbers explanation:
// 16 - offset between image and price
// 22 - height of price
// 8 - offset between price and title
var resultingHeight: CGFloat = 16 + 22 + 8
// get image height based on width and aspect ratio
let imageHeight = width * 2 / 3
resultingHeight += imageHeight


let titleHeight = props.title.getHeight(


font: .systemFont(ofSize: 12), width: width
)
resultingHeight += titleHeight


return resultingHeight
}
}

我在这里创造了一个故事: https://volodymyrrykhva.medium.com/uicollectionview-cells-with-dynamic-height-using-autolayout-a4e346b7bd2a

解决方案的完整代码在 GitHub: https://github.com/ascentman/DynamicHeightCells上

我遵循 这个答案，简单，达到了目标。另外，它还能让我在 iPad 上调整视角，而不是像 选择答案那样。

然而，我希望单元格的宽度可以根据设备宽度来改变，所以我没有添加宽度限制，而是像这样调整了 preferredLayoutAttributesFitting方法:

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
let targetSize = CGSize(width: UIScreen.main.bounds.size.width / ((UIDevice.current.userInterfaceIdiom == .phone) ? 1 : 2), height: 0);
layoutAttributes.frame.size = contentView.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel);
    

return layoutAttributes;
}

如果您使用的是 IOS14或更新的版本，那么您可以使用 UICollectionLayoutListConfiguration API，这使得将 UICollectionView用作单列表视图成为可能，包括水平滑动上下文菜单和自动高度单元格等特性。

var collectionView: UICollectionView! = nil


override func viewDidLoad() {
super.viewDidLoad()


let config = UICollectionLayoutListConfiguration(appearance: .plain)
let layout = UICollectionViewCompositionalLayout.list(using: config)
collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(collectionView)
}

关于如何配置单元格和数据源的更多信息，包括一个示例项目，可以在这篇 Apple: 实践现代收藏观的文章中找到，特别是以 创建简单列表布局开头的部分。

示例项目包含一个名为 控制器的控制器，该控制器演示如何基于自动布局配置自动高度单元格。

我的解决方案是从 https://www.advancedswift.com/autosizing-full-width-cells/提取的

在自定义单元格类中添加以下内容:

class MyCustomCell: UICollectionViewCell {


...


override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
            

var targetSize = targetSize
targetSize.height = CGFloat.greatestFiniteMagnitude
            

let size = super.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
            

return size
}
}

以下是包含集合视图的 ViewController 的 ViewDidLoad:

override func viewDidLoad() {
super.viewDidLoad()
    

...


let cellWidth = 200 // whatever your cell width is
    

let layout = myCustomCollectionView.collectionViewLayout
if let flowLayout = layout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = CGSize(
width: cellWidth,
height: 200 //an estimated height, but this will change when the cell is created
)
}
}

这是我找到的最简单/最短的解决方案。

我已经看到了许多动态高度细胞的复杂答案。然而，经过几次谷歌搜索，我找到了这个简单的答案。

collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(UINib(nibName: "LabelOnlyCell", bundle: nil), forCellWithReuseIdentifier: "LabelOnlyCell")
if let collectionViewLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
collectionViewLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
}

重要部分

collectionViewLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

类 LabelOnlyCell 作为参考

class LabelOnlyCell: UICollectionViewCell {


@IBOutlet weak var labelHeading: UILabel!
@IBOutlet weak var parentView: UIView!




override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
    

self.parentView.translatesAutoresizingMaskIntoConstraints = false
self.parentView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true
}

}

参考截图。

使用 UICollectionViewCompositionalLayout时，请确保将 itemSize和 groupSize的高度都设置为 .estimated:

我的问题是，我使用 .fractional(1)的项目 height和 .estimated(44)的 group，它不工作。

extension TasksController {
static func createLayout() -> UICollectionViewLayout {
UICollectionViewCompositionalLayout { (sectionIndex: Int, _ NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
let height: CGFloat = 44


let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(height))
let item = NSCollectionLayoutItem(layoutSize: itemSize)




let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(height))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: columns)


let section = NSCollectionLayoutSection(group: group)
return section
}
}
}