CollectionViewSlantedLayout
  • October 16, 2023

CollectionViewSlantedLayout

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

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


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.

GitHub


View Github

#collectionview #collectionviewcell #collectionviewlayout #ios #swift #swift4 #ui #uicollectionview #uicollectionviewcell #uicollectionviewlayout #uicomponents #uikit
YOU MIGHT ALSO LIKE...
PermissionsSwiftUI: A SwiftUI package to handle permissions

PermissionsSwiftUI displays and handles permissions in SwiftUI. It is largely inspired by SPPermissions. The UI is highly customizable and resembles an Apple style. ...

Pager tab strip view

Introduction PagerTabStripView is the first pager view built in pure SwiftUI. It provides a component to create interactive pager views ...

PageView

SwiftUI view enabling page-based navigation, imitating the behaviour of UIPageViewController in iOS.

Pages

    

How to take action when a property changes

1. Taking Action When a Property Changes: Property Observers Swift lets you observe and respond to changes in a property’s ...