UICollectionViewCell with dynamic height and Auto Layout

Question

I would like to create a custom UICollectionView able to react in a different way based on its configuration.

I created a custom subclass of UICollectionViewFlowLayout and I set its estimatedItemSize to UICollectionViewFlowLayout.automaticSize. This component is also able to compute different layout width based on its configuration.

ColumnFlowLayout.swift

import UIKit

class ColumnFlowLayout: UICollectionViewFlowLayout {
    let columns: Int

    init(columns: Int, insets: UIEdgeInsets) {
        self.columns = columns
        
        super.init()

        self.sectionInsetReference = .fromContentInset
        self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        self.minimumInteritemSpacing = insets.top
        self.minimumLineSpacing = insets.bottom
        self.sectionInset = insets
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    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 layoutAttributes = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes else {
            return nil
        }

        layoutAttributes.frame.size.width = self.estimatedWidth()

        return layoutAttributes
    }
    
    private func estimatedWidth() -> CGFloat {
        guard let collectionView = collectionView else { return 0.0 }
        let marginsAndInsets = sectionInset.left + sectionInset.right + collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right + minimumInteritemSpacing * CGFloat(columns - 1)
        return ((collectionView.bounds.size.width - marginsAndInsets) / CGFloat(columns)).rounded(.down)
    }
}

Then I used it for UICollectionView configuration.

CollectionViewController.swift

private func prepareCollectionView() {
    let columnLayout = ColumnFlowLayout(columns: Layout.COLUMNS, insets: Layout.INSETS)
    
    self.collectionView!.collectionViewLayout = columnLayout
    self.collectionView!.contentInsetAdjustmentBehavior = .always
            
    ...
    
}

In order to make it work, each UICollectionViewCell has preferredLayoutAttributesFitting

BaseCollectionViewCell.swift

import UIKit

class BaseCollectionCell: UICollectionViewCell {
    ...

    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
    }

    ...
}

The output is near to the desired result, except for the top spacing:

What I'd like to expect is to align each cell on top like that:

Do you have any suggestions?

Answer 1

Yes, you can use custom subclass of UICollectionViewFlowLayout.

Here is my suggestion:

every item is of const max frame, you need calculate the height of each column yourself

dynamic height and Auto Layout is a subview on the item

do layout calculation

private var cache = [IndexPath: UICollectionViewLayoutAttributes]()
private var contentHeight = CGFloat.zero
override public func prepare(){
     guard let collectionView = collectionView else {
         return
     }
    
     prepareCache()
     contentHeight = 0
     
      var cellX: CGFloat = 0
      let count = collectionView.numberOfItems(inSection: 0)
      for item in 0 ..< count {
          let cellIndexPath = IndexPath(item: item, section: 0)
          let attributes = UICollectionViewLayoutAttributes(forCellWith: cellIndexPath)
           // itemSize.width is estimatedWidth()

          // itemSize.height, is max height, 
          // you need calculate the height of each column yourself

          // y: contentHeight, this is what you concerned

          attributes.frame = CGRect( x: cellX, y: contentHeight, width: itemSize.width, height: itemSize.height )
          
          if cellX + itemSize.width * 2 < collectionViewWidth + 1{
              cellX = itemSize.width
          }
          else{
              cellX = 0
              contentHeight += itemSize.height
          }
          cache[cellIndexPath] = attributes
      }
      if count % 2 == 1{
          contentHeight += itemSize.height
      }

      contentHeight += 30 // bottom margin
  }


private func prepareCache() {
    cache.removeAll(keepingCapacity: true)
    cache = [IndexPath: UICollectionViewLayoutAttributes]()

  }

common pattern

override public func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
    return cache[indexPath]
  }
  

  override public func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let _ = collectionView else { return nil }
    
    visibleLayoutAttributes.removeAll(keepingCapacity: true)
    for (_, attributes) in cache {
        attributes.transform = .identity
        if attributes.frame.intersects(rect) {
            visibleLayoutAttributes.append(attributes)
        }
    }
    return visibleLayoutAttributes
  }

Answer 2

I ended up with a solution following this thread.

I don't know yet if there would be corner cases but I think it could be right direction. I changed layoutAttributesForElements as follows:

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let attributes = super.layoutAttributesForElements(in: rect)?
        .map { $0.copy() } as? [UICollectionViewLayoutAttributes]
    
    attributes?
        .reduce([CGFloat: (CGFloat, [UICollectionViewLayoutAttributes])]()) {
            guard $1.representedElementCategory == .cell else { return $0 }
            return $0.merging([ceil($1.center.y): ($1.frame.origin.y, [$1])]) {
                ($0.0 < $1.0 ? $0.0 : $1.0, $0.1 + $1.1)
            }
        }
        .values.forEach { minY, line in
            line.forEach {
                $0.frame = $0.frame.offsetBy(
                    dx: 0,
                    dy: minY - $0.frame.origin.y
                )
                $0.frame.size.width = self.estimatedWidth()
            }
        }
    
    return attributes
}

It seems it's working fine: