如何在iOS应用中使集合视图的高度动态化 (How to make height of collection views dynamic in your iOS apps)

充满活力，就像生活一样… (Be dynamic, just like life…)

Table views and collection views have always been an integral part of iOS app development. We all might have came across various issues related to them. In this article, we’ll discuss one such problem statement related to collection views.

表格视图和集合视图一直是iOS应用程序开发的组成部分。我们大家可能都遇到过与他们有关的各种问题。在本文中，我们将讨论一种与集合视图相关的问题陈述。

问题陈述 (Problem Statement)

Let’s assume we’ve a UICollectionView in a UITableViewCell and around 20 UICollectionViewCells that we need to render in it vertically. We can definitely implement that in the blink of an eye with the given data source.

假设我们已经一个UICollectionView在UITableViewCell和周围20 UICollectionViewCells ，我们需要它垂直于渲染。我们一定可以在给定数据源的眨眼之间实现它。

Now comes the actual problem statement — we need the UITableViewCell to adjust its height dynamically according to its content. Also, the UICollectionView must be such that all the cells are displayed in one go, i.e. no scrolling allowed.

现在是实际的问题陈述-我们需要UITableViewCell根据其内容动态调整其高度。同样， UICollectionView必须确保UICollectionView显示所有单元格，即不允许滚动。

Long story short: make everything dynamic…

长话短说： 让一切充满活力…

让我们开始编码 (Let’s start coding)

A view in iOS calculates its height from its content, given there is no height constraint provided. Same goes for UITableViewCell.

鉴于没有提供高度限制，iOS中的视图根据其内容计算高度。 UITableViewCell 。

For now, we’ll keep a single collectionView inside our tableViewCell with its leading, top, trailing and bottom constraints set to 0.

现在，我们将在tableViewCell保留一个collectionView ，其leading, top, trailing and bottom constraints设置为0。

Since we haven’t provided any height constraint to the collectionView and neither do we know the its contentSize beforehand, then how will the tableViewCell calculate its height?

由于我们没有为collectionView提供任何高度限制，并且我们也不事先知道其contentSize ，那么tableViewCell将如何计算其高度？

解 (Solution)

Dynamically calculating the collectionView’s height as per its contentSize is simply a 3 step process.

动态计算collectionView's高度按照其contentSize是一个简单的3个步骤。

1. Subclass UICollectionView and override its layoutSubviews() and intrinsicContentSize , i.e.

1.子类化UICollectionView并覆盖其layoutSubviews()和intrinsicContentSize ，即

The above code will invalidate the intrinsicContentSize and will use the actual contentSize of collectionView. The above code takes into consideration the custom layout as well.

上面的代码将使intrinsicContentSize无效，并将使用collectionView的实际contentSize 。上面的代码也考虑了custom layout 。

2. Now, set DynamicHeightCollectionView as the collectionView’s class in storyboard.

2.现在，在storyboard中将DynamicHeightCollectionView设置为collectionView's类。

3. One last thing, for the changes to take effect: you need to call layoutIfNeeded() on collectionView, after reloading collectionView’s data, i.e.

3.最后一件事， layoutIfNeeded()更改生效：在重新加载collectionView's数据后，需要在collectionView上调用layoutIfNeeded() ，即

func configure(with arr: [String]) {   self.arr = arr   self.collectionView.reloadData()   self.collectionView.layoutIfNeeded() //Here..!!!}

And there you have it!

在那里，您拥有了！

样例项目 (Sample Project)

You can download the sample project from here.

您可以从此处下载示例项目。

进一步阅读 (Further reading)

Don’t forget to read my other articles:

不要忘记阅读我的其他文章：

Everything about Codable in Swift 4
Swift 4中有关Codable的一切
Everything you’ve always wanted to know about notifications in iOS
您一直想了解的有关iOS中通知的所有信息
Deep copy vs. shallow copy — and how you can use them in Swift
深层副本与浅层副本-以及如何在Swift中使用它们
Coding for iOS 11: How to drag & drop into collections & tables
iOS 11编码：如何拖放到集合和表格中
All you need to know about Today Extensions (Widget) in iOS 10
您需要了解的有关iOS 10中的Today Extensions(Widget)的所有信息
UICollectionViewCell selection made easy..!!
UICollectionViewCell选择变得简单.. !!

Feel free to leave comments in case you have any questions.

如有任何疑问，请随时发表评论。