UICollectionViewFlowLayout 的替代品 ─ UICollectionViewFlexLayout

UICollectionViewFlexLayout is a drop-in replacement for UICollectionViewFlowLayout. Currently in development.

Features

• Section Spacing
• Section Margin
• Section Padding
• Section Background
• Item Spacing
• Item Margin
• Item Padding
• Item Size

Basic Concept

Don't let cells have margins and paddings. Cell metrics are now set outside of the cell. Just focus on contents.

Usage

UICollectionViewDelegateFlexLayout

protocol UICollectionViewDelegateFlexLayout {
  // section vertical spacing
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, verticalSpacingBetweenSectionAt section: Int, and nextSection: Int) -> CGFloat

  // section margin
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, marginForSectionAt section: Int) -> UIEdgeInsets

  // section padding
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, paddingForSectionAt section: Int) -> UIEdgeInsets

  // item horizontal spacing
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, horizontalSpacingBetweenItemAt indexPath: IndexPath, and nextIndexPath: IndexPath) -> CGFloat

  // item vertical spacing
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, verticalSpacingBetweenItemAt indexPath: IndexPath, and nextIndexPath: IndexPath) -> CGFloat

  // item margin
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, marginForItemAt indexPath: IndexPath) -> UIEdgeInsets

  // item padding
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, paddingForItemAt indexPath: IndexPath) -> UIEdgeInsets

  // item size
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewFlexLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
}

Section Background

// register
collectionView.register(MyBackgroundView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionBackground, withReuseIdentifier: "myBackgroundView")

// configure
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
  let backgroundView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionBackground, withReuseIdentifier: "myBackgroundView", for: indexPath)
  if indexPath.section == 0 {
    backgroundView.backgroundColor = .white
  } else {
    backgroundView.backgroundColor = .clear
  }
  return backgroundView
}

Tips and Tricks

• Using with RxCocoa

  If you're using UICollectionView with RxSwift and RxCocoa, you should create an extension of RxCollectionViewDelegateProxy to support delegate proxy.

  import RxCocoa
  import UICollectionViewFlexLayout
  
  extension RxCollectionViewDelegateProxy: UICollectionViewDelegateFlexLayout {
  }

Contributing

$ TEST=1 swift package generate-xcodeproj

License

UICollectionViewFlexLayout is under MIT license. See the LICENSE file for more info.