A CollectionView Layout displaying a slanted cells

Overview

CollectionViewSlantedLayout

Swift 5.1 SMP ready Carthage compatible
codacy badge

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

CollectionViewSlantedLayout

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.

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.

Comments
  • list items not show correctly

    list items not show correctly

    a b

    New issue checklist

    ⚠️ The more information you provide, the faster we can help you. Select what you want - a feature request or report a bug. Please remove the section you aren't interested in.


    Report a bug

    What did you do?

    I added the possibility to select an element of the list.

    in your example project just add: performSegue(withIdentifier: "ShowSettings", sender: self) to didSelectItemAt method

    What did you expect to happen?

    when dismiss viewcontroller the list items should show correctly

    What happened instead?

    list items not show correctly

    Your Environment

    • CollectionViewSlantedLayout version: 3.1.1
    • Langage: Swift
    • Swift version: 4.2
    • iOS version(s): 12.1.4
    • CocoaPods version: 1.5.3
    • Xcode version: 10.1
    • Devices/Simulators affected: Device iPhone 6s plus
    • Reproducible in the demo project? : Yes
    awaiting input stale 
    opened by dariolr 6
  • How to display the text in slanted style?

    How to display the text in slanted style?

    Well, I have tried the demo. The demo used CustomCollectionCell as the slanted cell, but there is no any UILabel in this cell. Simply adding a UILabel to the cell can't display the text in slanted style obviously. So how does the gif showed "Highway" "AC/DC" in slanted style? Thanks for helping me out!

    help wanted 
    opened by YifanDengWHU 4
  • Section Support

    Section Support

    New issue checklist

    ⚠️ The more information you provide, the faster we can help you. Select what you want - a feature request or report a bug. Please remove the section you aren't interested in.


    A feature request

    Section support

    What do you want to add?

    Looks like there is some explicit assumptions for the number of sections this collection view layout supports : 1 - Section 0 is hard coded.

    Please describe what you want to add to the component.

    Support for more than 1 section

    Thanks for the project, its quite nice. I may put a PR but just opening this for record/discussion.

    feature request stale 
    opened by vade 4
  • Cell's gradient color change in real time

    Cell's gradient color change in real time

    Not an Issue but a complicated question.

    is there any way to change all the cell's gradient color in real time? im making black/white themes and i found the only way to make changes to the color of gradient is to leave view controller or close/open app again, so the collection view is loading from start, but i have just few view controllers in app and all af them opens from collection view, and does not stops it so it doesnt need to update alot of information every time i open something. the theme change action is happens on main screen with cv so it will be good to have some animation to it too.

    help wanted awaiting input 
    opened by diretix 3
  • After enabling your UIScrollViewDelegate function the images from cells are gone

    After enabling your UIScrollViewDelegate function the images from cells are gone

    New issue checklist

    ⚠️ The more information you provide, the faster we can help you. Select what you want - a feature request or report a bug. Please remove the section you aren't interested in.


    A feature request

    What do you want to add?

    Please describe what you want to add to the component.

    How should it look like?

    Please add images.


    Report a bug

    What did you do?

    Please replace this with what you did.

    What did you expect to happen?

    Please replace this with what you expected to happen.

    What happened instead?

    Please replace this with what happened instead.

    Your Environment

    • CollectionViewSlantedLayout version:
    • Langage: Swift or Objective-C
    • Swift version:
    • iOS version(s):
    • CocoaPods/Carthage version:
    • Xcode version:
    • Devices/Simulators affected:
    • Reproducible in the demo project? : Yes or No

    Project that demonstrates the bug

    Please add a link to a project we can download that reproduces the bug.

    stale 
    opened by omi9430 2
  • Update SwiftPM file to 5.0.

    Update SwiftPM file to 5.0.

    Fix compilation issue by adding import for UIBezierPath

    This allow to open project in Xcode 11 by opening Package.swift To have build and test available

    Using command line, build could be checked by executing

    sdk=`xcrun -sdk iphonesimulator -show-sdk-path`
    sdkVersion=`echo $sdk | sed -E 's/.*iPhoneSimulator(.*)\.sdk/\1/'`
    swift build  -Xswiftc "-sdk" -Xswiftc "$sdk" -Xswiftc "-target" -Xswiftc "x86_64-apple-ios$sdkVersion-simulator"
    

    could be added to a CI like travis or github workflow like this

    opened by phimage 2
  • Crashing on collectionview layout change with core data

    Crashing on collectionview layout change with core data

    Using collectionview.reloaddata() and collectionView.collectionViewLayout.invalidatelayout() but crashes when I delete data. Adding data does not crash the app but the collectionview does not update. Is there something I’m missing?

    stale 
    opened by rainald 2
  • Hey Developer, I want to change the slanting angle of the collection cell, kindly help; the method in the description is not working

    Hey Developer, I want to change the slanting angle of the collection cell, kindly help; the method in the description is not working

    New issue checklist

    ⚠️ The more information you provide, the faster we can help you. Select what you want - a feature request or report a bug. Please remove the section you aren't interested in.


    A feature request

    What do you want to add?

    Please describe what you want to add to the component.

    How should it look like?

    Please add images.


    Report a bug

    What did you do?

    Please replace this with what you did.

    What did you expect to happen?

    Please replace this with what you expected to happen.

    What happened instead?

    Please replace this with what happened instead.

    Your Environment

    • CollectionViewSlantedLayout version:
    • Langage: Swift or Objective-C
    • Swift version:
    • iOS version(s):
    • CocoaPods/Carthage version:
    • Xcode version:
    • Devices/Simulators affected:
    • Reproducible in the demo project? : Yes or No

    Project that demonstrates the bug

    Please add a link to a project we can download that reproduces the bug.

    stale 
    opened by vrySantosh 2
  • Crashes : CALayer Position contains nan & iPhone X,XS Layout Issue

    Crashes : CALayer Position contains nan & iPhone X,XS Layout Issue

    Issue: 1) I am running into a crash when loading the cells dynamically, upon scroll crashes with:

    Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan -inf]'

    Happens on all simulators and also in test devices.

    I checked for existing issues and found nothing relating to it.

    This happens with other images and the images shipped in the example project, if loaded dynamically.

    For anybody having this issue: Solution: Knowing that It was related to the cell size being laid out I assumed that it needed a placeholder image to set it up, and that fixes it, while the thumbnail gets fetched the placeholder should be first added.

    I have not checked whether it would be an issue if the image loaded was a different size from the placeholder image however.

    Issue 2) On the iPhone X,XS,XS Max when scrolling the cells leave space at the bottom revealing the background. ( This happens with the images found on the example project ) Expected Behavior: Fill the whole cell as in the example project when ran on the iPhone 8,7 (4.7 inch displays)

    For this I haven't looked much, maybe someone with more knowledge on the project can jump in?

    Swift: 4.0 Xcode: 10

    awaiting input stale 
    opened by sambing 2
  • CollectionView Won't Reload Correctly

    CollectionView Won't Reload Correctly

    I have an issue where the CollectionView won't add new index path once you add your initial material.

    New issue checklist

    ⚠️ The more information you provide, the faster we can help you. Select what you want - a feature request or report a bug. Please remove the section you aren't interested in.


    A feature request

    What do you want to add?

    Please describe what you want to add to the component.

    How should it look like?

    Please add images.


    Report a bug

    What did you do?

    Please replace this with what you did.

    What did you expect to happen?

    Please replace this with what you expected to happen.

    What happened instead?

    Please replace this with what happened instead.

    Your Environment

    • CollectionViewSlantedLayout version:
    • Langage: Swift or Objective-C
    • Swift version:
    • iOS version(s):
    • CocoaPods/Carthage version:
    • Xcode version:
    • Devices/Simulators affected:
    • Reproducible in the demo project? : Yes or No

    Project that demonstrates the bug

    Please add a link to a project we can download that reproduces the bug.

    awaiting input stale 
    opened by EriFisher 2
  • Support for RxDataSources

    Support for RxDataSources

    Hi,

    I just tried out this layout in my project, which is using RxSwift and RxDataSource for collection views. I realised that the application crashes on binding the sections. This is how I initialise datasource and bind it to the collection view items:

    let animationConfiguration = AnimationConfiguration(insertAnimation: .bottom, reloadAnimation: .bottom, deleteAnimation: .bottom)
    
    let dataSource = RxCollectionViewSectionedAnimatedDataSource<TopListSectionModel>(animationConfiguration: animationConfiguration, configureCell: { _, collectionView, indexPath, item  in
                
                let cell: TopListCell = collectionView.dequeueReusableCell(forIndexPath: indexPath)
                cell.configure(with: item)
                
                if let layout = collectionView.collectionViewLayout as? CollectionViewSlantedLayout {
                    cell.contentView.transform = CGAffineTransform(rotationAngle: layout.slantingAngle)
                }
                
                return cell
            })
              
    sections
          .bind(to: collectionView.rx.items(dataSource: dataSource))
          .disposed(by: disposeBag)
    

    Crash on binding:

    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'request for number of items in section 0 when there are only 0 sections in the collection view'

    It seems like the number of sections is not set when the prepare() function in CollectionViewSlantedLayout is called. I managed to fix this by checking the number of sections in the helper numberOfItems:

    var numberOfItems: Int {
        guard let collectionView = collectionView, collectionView.numberOfSections > 0 else { return 0 }
        return collectionView.numberOfItems(inSection: 0)
    }
    

    This fixes the crash, however it lead to another crash:

    Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer bounds contains NaN: [0 0; nan nan]. Layer: <CALayer:0x600000e47f60; position = CGPoint (187.5 40); bounds = CGRect (0 0; 375 80); delegate = <UIView: 0x7fa76ed7e830; frame = (-8.98847e+307 -8.98847e+307; 1.79769e+308 1.79769e+308); transform = [nan, nan, nan, nan, 0, 0]; gestureRecognizers = <NSArray: 0x6000002f3030>; layer = <CALayer: 0x600000e47f60>>; sublayers = (<CALayer: 0x600000f41de0>, <CATransformLayer: 0x600000e41bc0>); opaque = YES; allowsGroupOpacity = YES; transform = CATransform3D (nan nan 0 0; nan nan 0 0; 0 0 1 0; 0 0 0 1)>'

    I tried to debug the issue, but I haven't gotten to a conclusion yet. Could you think of a reason for this crash? Thanks for your help

    stale 
    opened by danielhogl 1
  • Layout attributes were received from the layout but are not valid for the data source counts. Attributes will be ignored.

    Layout attributes were received from the layout but are not valid for the data source counts. Attributes will be ignored.

    Hello,

    First of all, apologize for my level of English language. I have setup a view collection with a search bar and filters. The layout being made with your package.

    When i perform a reload on this with this method : self.collectionView.collectionViewLayout.invalidateLayout().

    I obtain this error on the debugger :

    [CollectionView] Layout attributes <CollectionViewSlantedLayout.CollectionViewSlantedLayoutAttributes: 0x7ff1035113c0> index path: (<NSIndexPath: 0xbcd26c36f94746f0> {length = 2, path = 0 - 3}); frame = (0 603; 414 275); zIndex = 3;  were received from the layout <CollectionViewSlantedLayout.CollectionViewSlantedLayout: 0x7ff1035148a0> but are not valid for the data source counts. Attributes will be ignored.
    

    After research i solved it by adding this method to your class CollectionViewSlantedLayout.swift

    The method to add is :

    override open func invalidateLayout() {
        super.invalidateLayout()
        self.cachedAttributes.removeAll()
    }
    

    I can put this code and make a pull request if you want and if you are ok.

    opened by WestFR 4
Releases(3.1.1)
Owner
Yassir Barchi
Passionate software developer. I love to experiment with new technologies.
Yassir Barchi
Easy way to integrate pagination with dummy views in CollectionView, make Instagram "Discover" within minutes.

AZCollectionView Controller Features Automatic pagination handling No more awkward empty CollectionView screen AZ CollectionVIew controller give you a

Afroz Zaheer 95 May 11, 2022
A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Jan 6, 2023
Aplicativo simples demonstrando como implementar ContextMenu em uma CollectionView

Aplicativo simples demonstrando como implementar ContextMenu em uma CollectionView Ambiente de desenvolvimento Estas são as versões das ferramentas qu

Junior Silva 0 Nov 26, 2021
CardsLayout is a lightweight Collection Layout.

CardsLayout is a lightweight Collection Layout. Installation CocoaPods

Filipp Fediakov 798 Dec 28, 2022
An easy-to-use Collection View Layout for card-like animation.

CarLensCollectionViewLayout An easy-to-use Collection View Layout for card-like animation ?? CarLensCollectionViewLayout was created out of the implem

Netguru 530 Dec 16, 2022
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.

GravitySliderFlowLayout Made by Applikey Solutions Find this project on Dribbble Table of Contents Purpose Supported OS & SDK Versions Installation Us

Applikey Solutions 958 Dec 23, 2022
Made in Swift - Tag layout for UICollectionView supporting 3 types of alignments - Left || Centre || Right

TagCellLayout About Its an ui-collection-view LAYOUT class that takes care of all the logic behind making tags like layout using UICollectionView. It

Ritesh Gupta 346 Jan 1, 2023
Declaretive UICollectionViewCompositionalLayout interface to implement complex collection view layout.

CompositionalLayoutViewController Example To run the example project, clone the repo, and run pod install from the Example directory first. Requiremen

ONEinc 19 Dec 2, 2022
A CollectionView Layout displaying a slanted cells

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

Yassir Barchi 2.2k Dec 27, 2022
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.2k Jan 5, 2023
Cusom CollectionView card layout

MMCardView Example To run the example project, clone the repo, and run pod install from the Example directory first. Demo 1.Card Requirements iOS 8.0+

Millman Yang 556 Dec 5, 2022
:star: Custom card-designed CollectionView layout

CardsLayout CardsLayout is a lightweight Collection Layout. Installation CocoaPods You can use CocoaPods to install CardsLayout by adding it to your P

Filipp Fediakov 798 Dec 28, 2022
UICollectionView layout for presenting of the overlapping cells.

StickyCollectionView UICollectionView layout for presenting of the overlapping cells. Objective-C version here Checkout demo Overview Installation Man

Bogdan Matveev 325 Oct 11, 2022
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.2k Jan 3, 2023
A fancy hexagonal layout for displaying data like your Apple Watch

Hexacon is a new way to display content in your app like the Apple Watch SpringBoard Highly inspired by the work of lmmenge. Special thanks to zenly f

Gautier Gédoux 340 Dec 4, 2022
HoneycombView is the iOS UIView for displaying like Honeycomb layout written by swift

HoneycombView iOS UIView for Honeycomb layout include with photoBrowser. Requirements iOS 8.0+ Swift 2.0+ ARC ##Installation ####CocoaPods HoneycombVi

keishi suzuki 200 May 16, 2022
Easy way to integrate pagination with dummy views in CollectionView, make Instagram "Discover" within minutes.

AZCollectionView Controller Features Automatic pagination handling No more awkward empty CollectionView screen AZ CollectionVIew controller give you a

Afroz Zaheer 95 May 11, 2022
A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Jan 6, 2023
Fancy news app that diwnloads data from new.com api and shows it in a paging collectionview.

Fancy news reader PAging collection view that shows latest news from techcurch.com and displays full content in a detail page, was built to practice t

Abdul-Mujeeb Aliu 31 Feb 10, 2022
a collectionView made for Sprite Kit

CollectionNode A collectionView made for Sprite Kit installation Carthage Carthage is a dependency manager that provides binary frameworks for your pr

Bruno Wide 104 Sep 21, 2022