Как мне получить более равномерное вертикальное расстояние между ячейками?

Question

Я динамически создавал ячейки с использованием автоматического макета (без раскадровки или xib), но, похоже, менеджер макета спаривание клеток таким образом, чтобы короткая и высокая клетка рядом друг с другом составляли ряд.

То, что я хочу, - это иметь ячейки с одинаковым расстоянием между ними (сложенные вертикально) вместо больших пустых промежутков. Таким образом, три последовательные короткие ячейки, идущие вниз слева, могут быть равны по высоте и положению одной большой ячейке справа. Другими словами: равномерное расстояние по вертикали между всеми клетками.

  /// Everything is a side effect.  Configure the cell passed in
    ///
    /// - Parameters:
    ///   - cell: cell to format
    ///   - indexPath: index of cell
    func formatAutolayoutCell(cell: AutoResizingTextCell, at indexPath: IndexPath) {
        let event = eventsSource[indexPath.row]
        cell.layer.borderColor = event.calendar.cgColor
        cell.contentView.backgroundColor =  UIColor(cgColor: event.calendar.cgColor).withAlphaComponent(0.1)

        cell.titleLabel.text = event.title

        cell.contentView.addSubview(cell.titleLabel)
        cell.titleLabel.topAnchor.constraint(equalTo: cell.contentView.topAnchor).isActive = true
        cell.titleLabel.widthAnchor.constraint(equalToConstant: cellWidth).isActive = true
        cell.titleLabel.textColor = UIColor(cgColor: event.calendar.cgColor)
        cell.titleLabel.textAlignment = .center

        cell.contentView.addSubview(cell.bodyLabel)
        cell.bodyLabel.text = event.notes ?? ""
        cell.bodyLabel.widthAnchor.constraint(equalToConstant: cellWidth).isActive = true
        cell.bodyLabel.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor).isActive = true
        cell.titleLabel.bottomAnchor.constraint(equalTo: cell.bodyLabel.topAnchor).isActive = true
    }

EDIT:

Используя предложение Galo Torres Sevilla, я попытался использовать UICollectionViewLayout. Это приближает меня к моей цели, но похоже, что количество ячеек делится поровну по столбцам, поэтому, если в крайнем левом столбце есть короткие ячейки, у него заканчиваются ячейки «рано», а на левой стороне много места. низ. Вероятно, мне нужно отсортировать ячейки по размеру, чтобы получить лучшее распределение.

Answer 1

по коду от https://www.raywenderlich.com/392-uicollectionview-custom-layout-tutorial-pinterest

Вы можете создать подкласс UICollectionViewFlowLayout, чтобы получить то, что вам нужно.

Вот основной код для него. Примечание: код с сайта выше

import UIKit

protocol PinterestLayoutDelegate: class {
  // 1. Method to ask the delegate for the height of the image
  func collectionView(_ collectionView:UICollectionView, heightForPhotoAtIndexPath indexPath:IndexPath) -> CGFloat
}

class PinterestLayout: UICollectionViewLayout {
  //1. Pinterest Layout Delegate
  weak var delegate: PinterestLayoutDelegate!

  //2. Configurable properties
  fileprivate var numberOfColumns = 2
  fileprivate var cellPadding: CGFloat = 6

  //3. Array to keep a cache of attributes.
  fileprivate var cache = [UICollectionViewLayoutAttributes]()

  //4. Content height and size
  fileprivate var contentHeight: CGFloat = 0

  fileprivate var contentWidth: CGFloat {
    guard let collectionView = collectionView else {
      return 0
    }
    let insets = collectionView.contentInset
    return collectionView.bounds.width - (insets.left + insets.right)
  }

  override var collectionViewContentSize: CGSize {
    return CGSize(width: contentWidth, height: contentHeight)
  }

  override func prepare() {
    // 1. Only calculate once
    guard cache.isEmpty == true, let collectionView = collectionView else {
      return
    }
    // 2. Pre-Calculates the X Offset for every column and adds an array to increment the currently max Y Offset for each column
    let columnWidth = contentWidth / CGFloat(numberOfColumns)
    var xOffset = [CGFloat]()
    for column in 0 ..< numberOfColumns {
      xOffset.append(CGFloat(column) * columnWidth)
    }
    var column = 0
    var yOffset = [CGFloat](repeating: 0, count: numberOfColumns)

    // 3. Iterates through the list of items in the first section
    for item in 0 ..< collectionView.numberOfItems(inSection: 0) {

      let indexPath = IndexPath(item: item, section: 0)

      // 4. Asks the delegate for the height of the picture and the annotation and calculates the cell frame.
      let photoHeight = delegate.collectionView(collectionView, heightForPhotoAtIndexPath: indexPath)
      let height = cellPadding * 2 + photoHeight
      let frame = CGRect(x: xOffset[column], y: yOffset[column], width: columnWidth, height: height)
      let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)

      // 5. Creates an UICollectionViewLayoutItem with the frame and add it to the cache
      let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
      attributes.frame = insetFrame
      cache.append(attributes)

      // 6. Updates the collection view content height
      contentHeight = max(contentHeight, frame.maxY)
      yOffset[column] = yOffset[column] + height

      column = column < (numberOfColumns - 1) ? (column + 1) : 0
    }
  }

  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

    var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()

    // Loop through the cache and look for items in the rect
    for attributes in cache {
      if attributes.frame.intersects(rect) {
        visibleLayoutAttributes.append(attributes)
      }
    }
    return visibleLayoutAttributes
  }

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

}