Slanted Layout

Features

•  Pure Swift 5.
•  Works with every UICollectionView.
•  Horizontal and vertical scrolling support.
•  Dynamic cells height
•  Fully Configurable

Installation

CocoaPods

CollectionViewSlantedLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

Usage

1. Import CollectionViewSlantedLayout module to your controller
   
   import CollectionViewSlantedLayout

   1	import CollectionViewSlantedLayout

2. Create an instance and add it to your UICollectionView.
   
   let slantedSayout = CollectionViewSlantedLayout() UICollectionView(frame: .zero, collectionViewLayout: slantedSayout)

   1	let slantedSayout = CollectionViewSlantedLayout() UICollectionView(frame: .zero, collectionViewLayout: slantedSayout)

3. Use the CollectionViewSlantedCell class either your cells or subclass it.

Properties

• slantingSize:
  
  @IBInspectable var slantingSize: UInt

  1	@IBInspectable var slantingSize: UInt

  
  The slanting size. The default value of this property is either 75 or 80.
• slantingDirection:
  
  var slantingDirection: SlantingDirection

  1	var slantingDirection: SlantingDirection

  
  The slanting direction. The default value of this property is upward.
• slantingAngle:
  
  fileprivate(set) var slantingAngle: CGFloat

  1	fileprivate(set) var slantingAngle: CGFloat

  
  The angle, in radians, of the slanting. The value of this property could be used to apply a rotation transform on the cell’s contentView in the collectionView(_:cellForItemAt:) method implementation, either horizontally or vertically.
  
  if let layout = collectionView.collectionViewLayout as? CollectionViewSlantedLayout { cell.contentView.transform = CGAffineTransform(rotationAngle: layout.rotationAngle) }

  1	if let layout = collectionView.collectionViewLayout as? CollectionViewSlantedLayout { cell.contentView.transform = CGAffineTransform(rotationAngle: layout.rotationAngle) }

• scrollDirection:
  
  var scrollDirection: UICollectionViewScrollDirection

  1	var scrollDirection: UICollectionViewScrollDirection

  
  In the scroll direction of the grid. The grid layout scrolls along one axis only, either horizontally or vertically. The default value of this property is vertical
• isFirstCellExcluded:
  
  @IBInspectable var isFirstCellExcluded: Bool

  1	@IBInspectable var isFirstCellExcluded: Bool

  
  Set it to true to disable the slanting for the first cell. The default value of this property is false.
• isLastCellExcluded:
  
  @IBInspectable var isLastCellExcluded: Bool

  1	@IBInspectable var isLastCellExcluded: Bool

  
  Set it to true to disable the slanting for the last cell. The default value of this property is false.
• lineSpacing:
  <span class="pl-k">@IBInspectable</span> <span class="pl-k">var</span> lineSpacing<span class="pl-k">:</span> CGFloat

  1	<span class="pl-k">@IBInspectable</span> <span class="pl-k">var</span> lineSpacing<span class="pl-k">:</span> CGFloat

  The spacing to use between two items. The default value of this property is 10.0.

• itemSize:
  @IBInspectable var itemSize: CGFloat

  1	@IBInspectable var itemSize: CGFloat

  The default size to use for cells. If the delegate does not implement the collectionView(_:layout:sizeForItemAt:) method, the slanted layout uses the value in this property to set the size of each cell. This results in cells that all have the same size. The default value of this property is 225.

• zIndexOrder:
  var zIndexOrder: ZIndexOrder

  1	var zIndexOrder: ZIndexOrder

  The zIndex order of the items in the layout. The default value of this property is ascending.
  The grid layout scrolls along one axis only, either horizontally or vertically

Protocols

The CollectionViewDelegateSlantedLayout protocol defines methods that let you coordinate with a CollectionViewSlantedLayout object to implement a slanted layout. The CollectionViewDelegateSlantedLayout protocol has the following methods:

This method asks the delegate for the size of the specified item’s cell, either horizontally or vertically

If you do not implement this method, the slanted layout uses the values in its itemSize property to set the size of items instead.

Your implementation of this method can return either a fixed set of sizes or dynamically adjust the sizes based on the cell’s content, either horizontally or vertically

For more blogs please click here.