Antondomashnev / ADMozaicCollectionViewLayout

ADMozaicCollectionViewLayout is yet another UICollectionViewLayout subclass that implements "brick", "mozaic" or Pinterest style layout.
MIT License
226 stars 35 forks source link
carthage cocoapods mozaic uicollectionview uicollectionviewlayout waterfall

ADMozaicCollectionViewLayout

Carthage compatible CocoaPods Compatible codebeat badge

What is it

ADMozaicCollectionViewLayout is yet another UICollectionViewLayout subclass that implements "brick" or "mozaic" layout.

example

Why do anybody need yet another one?

Because there are plenty of kind of the same layouts already:

But this project is pure swift implementation, so if you don't want to mess up objective-c code and swift you are on the right page. Also, as an advantage compares to another "mozaic" layout - you're not limited to predefined sizes of cells.

Usage

The idea behind this layout is to split UICollectionView bounds into some kind of "matrix". To do this ADMozaikCollectionViewLayout requires height for rows and width for columns in specific section.

/// Designated initializer for `ADMozaikLayout`
///
/// - Parameter delegate: delegate/datasource for the layout
public init(delegate: ADMozaikLayoutDelegate)

It requires the delegate object conforms to protocol ADMozaikLayoutDelegate. The first required method is to return the size of each item in layout:

/// Method should return `ADMozaikLayoutSize` for specific indexPath
///
/// - Parameter collectionView: collection view is using layout
/// - Parameter layout:         layout itself
/// - Parameter indexPath:      indexPath of item for the size it asks for
///
/// - Returns: `ADMozaikLayoutSize` struct object describes the size
func collectionView(_ collectionView: UICollectionView, mozaik layout: ADMozaikLayout, mozaikSizeForItemAt indexPath: IndexPath) -> ADMozaikLayoutSize

Where ADMozaikLayoutSize describes the size of each cell in terms of ADMozaikCollectionViewLayout

/**
 *  Defines the size of the layout item
 */
public struct ADMozaikLayoutSize {
  /// Columns number that item requires
  let columns: Int
  /// Rows number that item requires
  let rows: Int
}

The second method is to get the geometry information for each specific section of layout:

/// Method should return `ADMozaikLayoutSectionGeometryInfo` to describe specific section's geometry
///
/// - Parameters:
///   - collectionView: collection view is using layout
///   - layoyt:         layout itself
///   - section:        section to calculate geometry info for
///
/// - Returns: `ADMozaikLayoutSectionGeometryInfo` struct object describes the section's geometry
func collectonView(_ collectionView: UICollectionView, mozaik layoyt: ADMozaikLayout, geometryInfoFor section: ADMozaikLayoutSection) -> ADMozaikLayoutSectionGeometryInfo

Where ADMozaikLayoutSectionGeometryInfo describes the all geometry parameters of the section

/**
 *  Defines the layout's information
 */
public struct ADMozaikLayoutSectionGeometryInfo {
  /// array of `ADMozaikLayoutColumn` for the layout
  let columns: [ADMozaikLayoutColumn]

  /// height for each row in points
  let rowHeight: CGFloat

  /// minimum space between items
  let minimumInteritemSpacing: CGFloat

  /// minimum space between each row
  let minimumLineSpacing: CGFloat

  /// Insets for the section from top, left, right, bottom
  let sectionInset: UIEdgeInsets

  /// Height for header in section
  /// Width is currently limited to the collection view width
  let headerHeight: CGFloat

  /// Height for footer in section
  /// Width is currently limited to the collection view width
  let footerHeight: CGFloat
}

Content mode options

/// Method should return `ADMozaikLayoutSectionContentMode` to describe specific section's geometry
///
/// - Parameters:
///   - collectionView: collection view is using layout
///   - layout:         layout itself
///   - section:        section to return content mode for
///
/// - Returns: `ADMozaikLayoutSectionContentMode` enum describes the section's content mode and how to position cells
func collectonView(_ collectionView: UICollectionView, mozaik layout: ADMozaikLayout, contentModeFor section: ADMozaikLayoutSection) -> ADMozaikLayoutSectionContentMode

The contentMode option controls the way how the Mozaik layout is filled with items:

  1. fill - tries to fill vacant spaces with item;
  2. ordered - keeps order of the provided items, so empty space can appear in the collection view.

For the complete example please check the example project. Note that current example project is supposed to be run on iPhone 8 screen's size.

Install

CocoaPods

To integrate ADMozaicCollectionViewLayout into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'ADMozaicCollectionViewLayout', '~> 4.0'

Carthage

To integrate ADMozaicCollectionViewLayout into your Xcode project using Carthage, specify it in your Cartfile:

github "Antondomashnev/ADMozaicCollectionViewLayout" ~> 4.0

Run carthage update to build the framework and drag the built ADMozaikCollectionViewLayout.framework into your Xcode project.

Migration guide

License

ADMozaicCollectionViewLayout is available under the MIT license. See LICENSE for more information.