Awesome
<p align="center"> <img src="https://cdn.rawgit.com/yacir/CollectionViewSlantedLayout/3b5e08c1/Resources/SlantedLayout.svg" alt="CollectionViewSlantedLayout" title="CollectionViewSlantedLayout" width="700"/> </p> <p align="center"> <img src="https://img.shields.io/badge/Swift-5.1-orange.svg" alt="Swift 5.1"/> <a href="https://cocoapods.org/pods/CollectionViewSlantedLayout"> <img src="https://img.shields.io/cocoapods/v/CollectionViewSlantedLayout.svg?style=flat)"/> </a> <img src="https://img.shields.io/badge/SPM-✔-blue.svg" alt="SMP ready"/> <img src="https://img.shields.io/badge/Carthage-✔-blue.svg" alt="Carthage compatible"/> <img src="https://img.shields.io/cocoapods/p/YBSlantedCollectionViewLayout.svg?style=flat"/> <img src="https://img.shields.io/cocoapods/l/YBSlantedCollectionViewLayout.svg?style=flat"/> <br/> <a href="https://travis-ci.org/yacir/CollectionViewSlantedLayout"> <img src="https://travis-ci.org/yacir/CollectionViewSlantedLayout.svg?branch=master"/> </a> <a href="https://travis-ci.org/yacir/CollectionViewSlantedLayout"> <img src="https://codecov.io/gh/yacir/CollectionViewSlantedLayout/branch/master/graph/badge.svg"/> </a> <a href="https://www.codacy.com/app/yacir/CollectionViewSlantedLayout?utm_source=github.com&utm_medium=referral&utm_content=yacir/CollectionViewSlantedLayout&utm_campaign=Badge_Grade"> <img alt="codacy badge" src="https://api.codacy.com/project/badge/Grade/e5ae5581b13245199eb7c39cf178adea" /> </a> </p>CollectionViewSlantedLayout is a subclass of the UICollectionViewLayout allowing the display of slanted cells in a UICollectionView.
<p align="center"> <img src="https://user-images.githubusercontent.com/2587473/34458447-9f434c8a-edd3-11e7-98b7-f32b4284268d.gif" alt="CollectionViewSlantedLayout" title="CollectionViewSlantedLayout"> </p>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:
use_frameworks!
pod 'CollectionViewSlantedLayout', '~> 3.1'
Carthage
You can also install it via Carthage. To do so, add the following to your Cartfile:
github 'yacir/CollectionViewSlantedLayout'
Usage
-
Import
CollectionViewSlantedLayout
module to your controllerimport CollectionViewSlantedLayout
-
Create an instance and add it to your
UICollectionView
.let slantedSayout = CollectionViewSlantedLayout() UICollectionView(frame: .zero, collectionViewLayout: slantedSayout)
-
Use the
CollectionViewSlantedCell
class for your cells or subclass it.
Find a demo in the Examples folder.
Properties
-
slantingSize:
@IBInspectable var slantingSize: UInt
The slanting size. The default value of this property is
75
. -
slantingDirection:
var slantingDirection: SlantingDirection
The slanting direction. The default value of this property is
upward
. -
slantingAngle:
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.if let layout = collectionView.collectionViewLayout as? CollectionViewSlantedLayout { cell.contentView.transform = CGAffineTransform(rotationAngle: layout.rotationAngle) }
-
scrollDirection:
var scrollDirection: UICollectionViewScrollDirection
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
Set it to
true
to disable the slanting for the first cell. The default value of this property isfalse
. -
isLastCellExcluded:
@IBInspectable var isLastCellExcluded: Bool
Set it to
true
to disable the slanting for the last cell. The default value of this property isfalse
. -
lineSpacing:
@IBInspectable var lineSpacing: CGFloat
The spacing to use between two items. The default value of this property is
10.0
. -
itemSize:
@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 is225
. -
zIndexOrder:
var zIndexOrder: ZIndexOrder
The zIndex order of the items in the layout. The default value of this property is
ascending
.
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:
optional func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: CollectionViewSlantedLayout,
sizeForItemAt indexPath: IndexPath) -> CGFloat
This method asks the delegate for the size of the specified item’s cell.
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 a fixed set of sizes or dynamically adjust the sizes based on the cell’s content.
Author
Acknowledgement
This framework is inspired by this prototype released by Matt Bridges.
License
CollectionViewSlantedLayout is available under the MIT license. See the LICENSE file for more info.