ios - iOS 中使用 Swift 3 的 CollectionView 动态高度

Question

最近在尝试做一些练习项目。所以我看了类(class)“Developing Apps for iOS”，斯坦福大学，CS193P，2017。

现在，我正在做“Smashtag”项目，但我遇到了一些问题。 我想使用带有两个 UICollectionViewFlowLayout 的 CollectionView 通过 SegmentedControl 在 CollectionView 的每个 xib 中显示两种类型(一种类似于 tableView，另一种以正方形显示图像)。

我的问题如下:

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

   And this is what I just tried below :

   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 在这里的约束: 但是当我运行这个应用程序时它有错误

我不知道我错过了什么或误解了什么。

2. Why this solution will work ?

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

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

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

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

我真的很想成为 iOS 开发专家和优秀的开发人员，但我仍在学习和尝试。任何答复我将不胜感激。

谢谢!!

Answer 1

Provide estimatedSize to your UICollectionViewLayout.

The estimated size should be the size shown in the size inspector of your xib.

collectionViewLayout.estimatedItemSize = CGSize(width: collectionView.frame.width, height: 50)

Override the method preferredLayoutAttributesFitting(_:) in your UICollectionViewCell

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
    setNeedsLayout()
    layoutIfNeeded()
        
    let size = contentView.systemLayoutSizeFitting(layoutAttributes.size)
        
    var frame = layoutAttributes.frame
    frame.size.height = ceil(size.height)
        
    layoutAttributes.frame = frame
        
    return layoutAttributes
}

Your collection view cell will now have dynamic size as per the content.