在iOS中使用Swift 3的CollectionView动态高度 [英] CollectionView dynamic height with Swift 3 in iOS

问题描述

最近，我正在尝试做一些练习项目。所以我看了为iOS开发应用程序课程，斯坦福大学，CS193P，2017。

Recently, I'm trying to do some projects for practicing. So I watched the course "Developing Apps for iOS", Stanford University, CS193P, 2017.

现在，我正在做Smashtag项目，但我遇到了一些问题在里面。
我想使用带有两个UICollectionViewFlowLayout的CollectionView，通过SegmentedControl在每个xib中显示两个类型（一个像tableView，另一个在方块中显示图像）。

And now, I'm doing "Smashtag" project but I have some problems in it. I want to use a CollectionView with two UICollectionViewFlowLayout to show two types in each xib (one is like tableView, another is showing a image in square) of CollectionView by SegmentedControl.

我的问题如下：

1. 如何使CollectionViewCell显示在动态高度，就像TableView的UITableViewAutomaticDimension一样？

1. How to make CollectionViewCell showing in dynamic height just like TableView's UITableViewAutomaticDimension?

这就是我刚刚尝试过的：

And this is what I just tried below :

我尝试使用 UICollectionViewFlowLayoutAutomaticSize将CollectionView的autoResize设置与TableView的autoDimension一样。 （@available（iOS 10.0，*））

I tried to make CollectionView's autoResize setting as like TableView's autoDimension with using UICollectionViewFlowLayoutAutomaticSize. ( @available(iOS 10.0, *) )

enum CollectionViewType {
  case tweet
  case image
}

// MARK: - Decide What Kind Of FlowLayout
func decideFlowLayout(type: CollectionViewType) -> UICollectionViewFlowLayout {

    // just for .image type
    var howManyImageShowing = 3  
    var imageShowingWidth: Double {
        return Double(self.view.frame.width) / Double(howManyImageShowing)
    }

    // .tweet is a type showing like TableViewCell -> this make me confused !!
    // another type is just showing a image in square -> I have no problem here
    let estimatedItemSize = type == .tweet ? CGSize(width: self.view.frame.width, height: 155.0) :
                                                CGSize(width: imageShowingWidth, height: imageShowingWidth)

    let collectionViewLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    collectionViewLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

    // --------- Make this setting as TableView does --------- 
    // ------------ Somethis just like this below ------------
    /*
        tableView.estimatedRowHeight = 155.0
        tableView.rowHeight = UITableViewAutomaticDimension
    */

    collectionViewLayout.estimatedItemSize = estimatedItemSize
    collectionViewLayout.itemSize = UICollectionViewFlowLayoutAutomaticSize
    // ------------------------------------------------------- 

    collectionViewLayout.minimumLineSpacing = 0
    collectionViewLayout.minimumInteritemSpacing = 0

    return collectionViewLayout
}

我的CollectionViewCell xib的约束：

但是当我运行这个应用程序时它有错误

Constraint of my CollectionViewCell xib here : But it has bug when I run this app

我不知道我想念或误解了什么。

I don't know what I miss or misunderstand.

1. 为什么这个解决方案会起作用？

1. Why this solution will work ?

我已经在Stack Overflow中搜索了这个问题的很多解决方案，但我发现这个并让我真的很困惑:(

I already search so many solutions of this problem in Stack Overflow but I just find this and make me really confused :(

此解决方案为视图提供了一个 宽度约束 ，它位于CollectionViewCell xib中，并将此约束的常量设置为值，它可以正常工作！我无法解释为什么 宽度约束 会使单元格的高度变为动态？这让我很困惑，我觉得这很奇怪......

This solution give the view a Width Constraint which is in CollectionViewCell xib and set this constraint's constant a value and it works! I can not configure out why Width Constraint will make the cell's height in dynamic? This make me really confused, I think this is weird...

https://github.com/tttsunny/CollectionViewAutoSizingTest

class Cell: UICollectionViewCell {
    @IBOutlet weak var headerLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var widthConstraint: NSLayoutConstraint!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
        let screenWidth = UIScreen.main.bounds.size.width
        widthConstraint.constant = screenWidth - (2 * 12)
    }
}

1. 如何在不使用 UICollectionViewFlowLayoutAutomaticSize的情况下进行CollectionViewCell动态高度。 （@available（iOS 10.0，*）） ？

1. How to do CollectionViewCell dynamic height without using UICollectionViewFlowLayoutAutomaticSize. ( @available(iOS 10.0, *) ) ?

因为我不仅要在iOS 10中处理不同的iOS版本，还要在iOS 10以下处理。

Because I want to handle different iOS Versions not only in iOS 10 but also below iOS 10.

我真的想成为iOS开发专业人士和优秀的开发人员，但我还在学习和尝试。任何回复我将不胜感激。

I really want to be pro in iOS development and a great developer but I'm still learning and trying. Any replies I will be greatly appreciated.

谢谢!!

推荐答案

使用以下代码进行更改根据显示的文本高度：

Use the following code to change the height according to the text displayed:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    return CGSizeMake(view.frame.width , 64)
}
override func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
{
  let approximateWidthOfContent = view.frame.width - x
    // x is the width of the logo in the left 

  let size = CGSize(width: approximateWidthOfContent, height: 1000)

  //1000 is the large arbitrary values which should be taken in case of very high amount of content 

 let attributes = [NSFontAttributeName: UIFont.systemFont(ofSize: 15)]            
 let estimatedFrame = NSString(string: user.bioText).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attributes, context: nil)
 return CGSize(width: view.frame.width, height: estimatedFrame.height + 66)          
 }

这篇关于在iOS中使用Swift 3的CollectionView动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！