{"id":15035921,"url":"https://github.com/yacir/collectionviewslantedlayout","last_synced_at":"2025-05-15T11:01:54.705Z","repository":{"id":38420782,"uuid":"52832181","full_name":"yacir/CollectionViewSlantedLayout","owner":"yacir","description":"A CollectionView Layout displaying a slanted cells","archived":false,"fork":false,"pushed_at":"2021-05-01T03:13:05.000Z","size":45109,"stargazers_count":2318,"open_issues_count":3,"forks_count":134,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-04-07T08:11:51.912Z","etag":null,"topics":["collection-view","collectionview","collectionviewcell","collectionviewlayout","ios","slanted","swift","swift4","ui","ui-components","ui-design","ui-kit","uicollectionview","uicollectionviewcell","uicollectionviewlayout","uikit"],"latest_commit_sha":null,"homepage":"https://yassir.dev/CollectionViewSlantedLayout/","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yacir.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"yacir"}},"created_at":"2016-02-29T23:20:17.000Z","updated_at":"2025-04-06T23:32:16.000Z","dependencies_parsed_at":"2022-08-09T04:00:23.385Z","dependency_job_id":null,"html_url":"https://github.com/yacir/CollectionViewSlantedLayout","commit_stats":null,"previous_names":["yacir/ybslantedcollectionviewlayout"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yacir%2FCollectionViewSlantedLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yacir%2FCollectionViewSlantedLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yacir%2FCollectionViewSlantedLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yacir%2FCollectionViewSlantedLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yacir","download_url":"https://codeload.github.com/yacir/CollectionViewSlantedLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248911383,"owners_count":21182079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection-view","collectionview","collectionviewcell","collectionviewlayout","ios","slanted","swift","swift4","ui","ui-components","ui-design","ui-kit","uicollectionview","uicollectionviewcell","uicollectionviewlayout","uikit"],"created_at":"2024-09-24T20:29:46.703Z","updated_at":"2025-04-14T15:53:11.413Z","avatar_url":"https://github.com/yacir.png","language":"Swift","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://cdn.rawgit.com/yacir/CollectionViewSlantedLayout/3b5e08c1/Resources/SlantedLayout.svg\" alt=\"CollectionViewSlantedLayout\" title=\"CollectionViewSlantedLayout\" width=\"700\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Swift-5.1-orange.svg\" alt=\"Swift 5.1\"/\u003e\n    \u003ca href=\"https://cocoapods.org/pods/CollectionViewSlantedLayout\"\u003e\n        \u003cimg src=\"https://img.shields.io/cocoapods/v/CollectionViewSlantedLayout.svg?style=flat)\"/\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/SPM-✔-blue.svg\" alt=\"SMP ready\"/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Carthage-✔-blue.svg\" alt=\"Carthage compatible\"/\u003e\n    \u003cimg src=\"https://img.shields.io/cocoapods/p/YBSlantedCollectionViewLayout.svg?style=flat\"/\u003e\n    \u003cimg src=\"https://img.shields.io/cocoapods/l/YBSlantedCollectionViewLayout.svg?style=flat\"/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://travis-ci.org/yacir/CollectionViewSlantedLayout\"\u003e\n        \u003cimg src=\"https://travis-ci.org/yacir/CollectionViewSlantedLayout.svg?branch=master\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://travis-ci.org/yacir/CollectionViewSlantedLayout\"\u003e\n        \u003cimg src=\"https://codecov.io/gh/yacir/CollectionViewSlantedLayout/branch/master/graph/badge.svg\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.codacy.com/app/yacir/CollectionViewSlantedLayout?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=yacir/CollectionViewSlantedLayout\u0026amp;utm_campaign=Badge_Grade\"\u003e\n        \u003cimg alt=\"codacy badge\" src=\"https://api.codacy.com/project/badge/Grade/e5ae5581b13245199eb7c39cf178adea\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n**CollectionViewSlantedLayout** is a subclass of the [UICollectionViewLayout](https://developer.apple.com/documentation/uikit/uicollectionviewlayout) allowing the display of slanted cells in a [UICollectionView](https://developer.apple.com/documentation/uikit/uicollectionview).\n\n\u003cp align=\"center\"\u003e\n  \t\u003cimg src=\"https://user-images.githubusercontent.com/2587473/34458447-9f434c8a-edd3-11e7-98b7-f32b4284268d.gif\" alt=\"CollectionViewSlantedLayout\" title=\"CollectionViewSlantedLayout\"\u003e \n\u003c/p\u003e\n\n## Features\n- [x] Pure Swift 5.\n- [x] Works with every UICollectionView.\n- [x] Horizontal and vertical scrolling support.\n- [x] Dynamic cells height\n- [x] Fully Configurable\n\n## Installation\n\n### CocoaPods\nCollectionViewSlantedLayout is available through [CocoaPods](http://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```ruby\nuse_frameworks!\npod 'CollectionViewSlantedLayout', '~\u003e 3.1'\n```\n\n### Carthage\n\nYou can also install it via [Carthage](https://github.com/Carthage/Carthage). To do so, add the following to your Cartfile:\n\n```terminal\ngithub 'yacir/CollectionViewSlantedLayout'\n```\n\n## Usage\n\n1. Import `CollectionViewSlantedLayout ` module to your controller\n\n    ```swift\n    import CollectionViewSlantedLayout\n    ```\n    \n2. Create an instance and add it to your `UICollectionView`.\n\n    ```swift\n\tlet slantedSayout = CollectionViewSlantedLayout()\n\tUICollectionView(frame: .zero, collectionViewLayout: slantedSayout)\n    ```\n    \n3. Use the `CollectionViewSlantedCell` class for your cells or subclass it.\n\n\nFind a demo in the Examples folder.\n\n## Properties\n\n- **slantingSize**:\n\n\t```swift\n\t@IBInspectable var slantingSize: UInt\n\t```\n\tThe slanting size. The default value of this property is `75`.\n\n- **slantingDirection**:\n\t\n\t```swift\n\tvar slantingDirection: SlantingDirection\n\t```\n\tThe slanting direction. The default value of this property is `upward`.\n\t\n- **slantingAngle**:\n\n\t```swift\n\tfileprivate(set) var slantingAngle: CGFloat\n\t```\n\tThe 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.\n\t     \n\t```swift\n\tif let layout = collectionView.collectionViewLayout as? CollectionViewSlantedLayout {\n\t\tcell.contentView.transform = CGAffineTransform(rotationAngle: layout.rotationAngle)\n\t}\n\t```\n- **scrollDirection**:\n\t\n\t```swift\n\tvar scrollDirection: UICollectionViewScrollDirection\n\t```\n\tThe 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`.\n\t\n- **isFirstCellExcluded**:\n\t\n\t```swift\n\t@IBInspectable var isFirstCellExcluded: Bool\n\t```\n\tSet it to `true` to disable the slanting for the first cell. The default value of this property is `false`.\n\t\n- **isLastCellExcluded**:\n\t\n\t```swift\n\t@IBInspectable var isLastCellExcluded: Bool\n\t```\n\tSet it to `true` to disable the slanting for the last cell. The default value of this property is `false`.\n\t\n- **lineSpacing**:\n\t\n\t```swift\n\t@IBInspectable var lineSpacing: CGFloat\n\t```\n\tThe spacing to use between two items. The default value of this property is `10.0`.\n\t\n- **itemSize**:\n\t\n\t```swift\n\t@IBInspectable var itemSize: CGFloat\n\t```\n\tThe 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`.\n\t\n- **zIndexOrder**:\n\t\n\t```swift\n\tvar zIndexOrder: ZIndexOrder\n\t```\n\tThe zIndex order of the items in the layout. The default value of this property is `ascending`.\n\n\t\n## Protocols\n\nThe `CollectionViewDelegateSlantedLayout` protocol defines methods that let you coordinate with a `CollectionViewSlantedLayout` object to implement a slanted layout. The `CollectionViewDelegateSlantedLayout` protocol has the following methods:\n\n```swift\noptional func collectionView(_ collectionView: UICollectionView,\n                             layout collectionViewLayout: CollectionViewSlantedLayout,\n                             sizeForItemAt indexPath: IndexPath) -\u003e CGFloat\n```\n\nThis method asks the delegate for the size of the specified item’s cell.\n     \nIf 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.\n\n## Author\n\n[Yassir Barchi](https://yassir.fr)\n\n## Acknowledgement\n\nThis framework is inspired by [this prototype](https://dribbble.com/shots/1727594-Slanted-Table-Cells-With-Parallax?_=1456679145403) released by [Matt Bridges](https://dribbble.com/rrridges).\n\n\n## License\n\n**CollectionViewSlantedLayout** is available under the MIT license. See the LICENSE file for more info.\n","funding_links":["https://github.com/sponsors/yacir"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyacir%2Fcollectionviewslantedlayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyacir%2Fcollectionviewslantedlayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyacir%2Fcollectionviewslantedlayout/lists"}