Skip to content
UICollectionViewLayout to display slanted content
Swift Objective-C Ruby Shell
Branch: master
Clone or download
Latest commit 807a0c8 Oct 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add the stale.yml Jan 17, 2018
CollectionViewSlantedLayout.xcodeproj Bump version to 3.1.1 Sep 30, 2018
Examples Bump version to 3.1.1 Sep 30, 2018
Resources update the screenshot Dec 31, 2017
Sources
Tests Fix linter issues Sep 29, 2018
docs update the docs Oct 1, 2018
.codebeatignore Add the codebeatignore file Jan 17, 2018
.codecov.yml fix .codecov.yml Jan 4, 2018
.gitignore rename and reorganize the project Dec 30, 2017
.jazzy.yaml Updates to build specs with Xcode10 / Swift 4.2 Sep 25, 2018
.swift-version Updates to build specs with Xcode10 / Swift 4.2 Sep 25, 2018
.swiftlint.yml add .swiftlint and fix the warnings Jan 10, 2018
.travis.sh Move the travis.sh to the root directory Jan 4, 2018
.travis.yml Updates to build specs with Xcode10 / Swift 4.2 Sep 25, 2018
CHANGELOG.md Bump version to 3.1.1 Sep 30, 2018
CODE_OF_CONDUCT.md Add the CODE_OF_CONDUCT.md Jan 4, 2018
CONTRIBUTING.md Update CONTRIBUTING.md Jan 4, 2018
CollectionViewSlantedLayout.podspec Bump version to 3.1.1 Sep 30, 2018
LICENSE Update the LICENSE Jan 18, 2018
Package.swift Rename it to CollectionViewSlantedLayout Dec 30, 2017
README.md Bump version to 3.1.0 Sep 29, 2018

README.md

CollectionViewSlantedLayout

Swift 4.2 SMP ready Carthage compatible
codacy badge Score Me

CollectionViewSlantedLayout is a subclass of the UICollectionViewLayout allowing the display of slanted cells in a UICollectionView.

CollectionViewSlantedLayout

Features

  • Pure Swift 4.
  • 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

  1. Import CollectionViewSlantedLayout module to your controller

    import CollectionViewSlantedLayout
  2. Create an instance and add it to your UICollectionView.

    let slantedSayout = CollectionViewSlantedLayout()
    UICollectionView(frame: .zero, collectionViewLayout: slantedSayout)
  3. 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 is false.

  • isLastCellExcluded:

     @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:

     @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 is 225.

  • 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

Yassir Barchi

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.

You can’t perform that action at this time.