carabina / ktmosaiclayout

A Swift UICollectionViewLayout to layout items on different columns.

KTMosaicLayout

KTMosaicLayout is a Swift UICollectionViewLayout being able to display UICollectionView items on different columns.

Features

In case at least 3 columns is defined for a section, KTMosaicLayout can display the first item of this section in a big style. When a section displays the first item as big, it means that the first row of this section displays all the last items on a single column, to layout the first as a big.

💡 In case you don't really need to display big styled items in sections as illustrated above, this layout can be replaced by a usual UICollectionViewFlowLayout.

📱Example

💡 To run the example project, clone the repo, pod install, and run the iOS application.

Installation

CocoaPods

The preferred installation method is with CocoaPods. Add the following to your Podfile:

pod 'KTMosaicLayout'

Carthage

For Carthage, add the following to your Cartfile:

github "iKiKi/KTMosaicLayout"

Usage

You just need to set a KTMosaicLayout to your UICollectionView layout (using IB or code), set a MosaicLayoutDelegate to this layout and implement the necessary methods:

public protocol MosaicLayoutDelegate: class {
  func collectionView(_ collectionView: UICollectionView, numberOfColumnsInSection section: Int) -> Int
  func collectionView(_ collectionView: UICollectionView, shouldShowBigInSection section: Int) -> Bool
  func collectionView(_ collectionView: UICollectionView, heightForItemInSection section: Int) -> CGFloat // Called in case more than 1 column
  func collectionView(_ collectionView: UICollectionView, heightForItemAt indexPath: IndexPath) -> CGFloat // Called in case only 1 column

  func collectionView(_ collectionView: UICollectionView, insetForSectionAt section: Int) -> UIEdgeInsets
  func collectionView(_ collectionView: UICollectionView, minimumLineSpacingForSectionAt section: Int) -> CGFloat
  func collectionView(_ collectionView: UICollectionView, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat

  func collectionView(_ collectionView: UICollectionView, referenceSizeForHeaderInSection section: Int) -> CGSize
  func collectionView(_ collectionView: UICollectionView, referenceSizeForFooterInSection section: Int) -> CGSize
}

💡 heightForItemInSection is called in case a section has more than 1 column. heightForItemAt is called in case the section has only 1 column (to layout items with different heights).

License

KTMosaicLayout is released under the MIT license. See LICENSE for details.