yacir / collectionviewslantedlayout

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 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.

collectionviewslantedlayout's Issues

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

Compute the exclusion paths for the text containers

Description

Add a func which compute the exclusions paths for a given content size. It will be useful to render a text content like below:

YOUR COLLECTIONVIEWSLANTEDLAYOUT DOES NOT RELOAD DATA.

can you add a feature that reloads your collectionviewslantedlayout data. We have cells that get added and when the cell is added it seems like the collection view doesn't know and it offsets all the other cells. I would appreciate if you could help us figure this out. whenever we append to the collection view the collection view has trouble reloading the data properly. I see theres issues like this mentioned earlier but you have not offered any solutions. i think its a great collection and we really want to use it on an app were developing so any help would be greatly appreciated.

After enabling your UIScrollViewDelegate function the images from cells are gone

New issue checklist

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

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

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

CollectionView won't reload new data

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

New issue checklist

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

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.

Doesn't work with auto layout.

I can't add subviews with auto layout.

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

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!

[typo] Fix the isFistCellExcluded property name

• Introduce the isFirstCellExcluded property and deprecate the isFistCellExcluded
• Update the tests
• Update the README
• Update the examples

Section Support

New issue checklist

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

Identifier Name Violation

New issue checklist

• [ X] I have reviewed the README
• [ ]X I have searched existing issues and this is not a duplicate

⚠️ 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

When Compiling I am getting an error:

Identifier Name Violation: Variable name should be between 3 and 40 characters long: 'o' (identifier_name)

What did you do?

• Embedded the framework as a submodule
• Try to compile

What did you expect to happen?

Compiling

What happened instead?

Not Compiling

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.

Can't Slant the cells.

Changing the value of collectionViewLayout.slantingSize is not working as expected, it is causing the cells of the collection view to be bigger or smaller.
collectionViewLayout.lineSpacing is not causing any effect.
I am changing the values in viewdidload.

Example project displays black screen

list items not show correctly

New issue checklist

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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

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?

Thread 1: EXC_BAD_ACCESS (code=1, address=0x0) when I segue to my collection view controller.

So this is basically what I wrote to you last time:

Hello Yassir Barchi,

I am currently working on a project that displays a collection of photos via the Flickr API when you click on a Pin in a mapView. I came across your CollectionViewSlantedLayout on cocoapod.org, and I thought it was super neat and wanted to implement it into my project.
I was able to get the collection view and scroll view set up but unable to get the collection view to appear slanted. Also when I call:

    collectionViewLayout.isFirstCellExcluded = true

    collectionViewLayout.isLastCellExcluded = true

The app crashes when I segue to the collection view controller, and I get the error: Thread 1: EXC_BAD_ACCESS (code=1, address=0x0). When I comment out those two lines of code I am able to access the collection view controller. But, the issue is that the layout of the collection view does not appear slanted.

I figured I'd go straight to the source for help on the issue. If you don't mind, could you look at my project and see if I am implementing it correctly based on my set up. I import the CollectionViewSlantedLayout in my TouristMapViewController.swift and PhotoAlbumViewController.swift files

Please add a link to a project we can download that reproduces the bug.
https://github.com/RobertoEfrainHernandez/Virtual-Tourist-Udacity

About pagination

New issue checklist

Hi ,

I m using it in one in my app in this during pagination when i got more data i append it to same array and reload data.

But in this case i m stuck in somewhere in middle.

Thanks in advance

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

Is iOS also set at will?

New issue checklist

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.

how can i change the size of a cell

something like

layout.itemSizeOptions.VerticalSize = 200

OR

layout.itemSizeOptions.VerticalSize = YBSlantedCollectionViewLayout(VerticalSize:200, HorizonSize: 200)

always made errors like "YBSlantedCollectionViewLayout has no member VerticalSize" or
"YBSlantedCollectionViewLayoutOptions cannot be constructed because it has no accessible initializers"

so whats the right way to change the size of a cell
thanks a lot !!

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

• I have reviewed the README
• I have searched existing issues and this is not a duplicate

⚠️ 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.