Awesome Open Source
Awesome Open Source

uicollectionview-layouts-kit Awesome

Platform Language CustomLayouts Last Commit NLOC Contributors Repo Size License

If you like the project, please give it a star ⭐ It will show the creator your appreciation and help others to discover the repo.

✍️ About

📐 A set of custom layouts for UICollectionView with examples. All the layouts support both portrait and landscape UI orientations as well as support for all iOS-related size classes (iPhone & iPad).

⚠️ Warning

The assets used in this project were taken from the Web. Do not use them for commertial purposes and proprietary projects. They are used just for demostration only.

🏗 Setup

In order to add layouts to your project, simply copy-paste corresponding Layout file (each of the targets has folder called Layout that contains all the related sources). There is no point in adding any dependency manager, since each custom UICollectionViewLayout can be more easily added just by dropping the corresponding layout source file into your project.

✈️ Usage

The next step is to either programmatically or via Storyboard/Nib file connect the layout and override the default one.

Programmatic Setup

If you choose programmatic approach, all you need to do is to set the instance of a layout using the following scheme:

let verticalSnapCollectionFlowLayout = VerticalSnapCollectionFlowLayout()
// Use custom properties that are available for each layout
verticalSnapCollectionFlowLayout.minLineSpacing = 30
verticalSnapCollectionFlowLayout.spacingMultiplier = 8

collectionView.collectionViewLayout = verticalSnapCollectionFlowLayout

// or 

collectionView.setCollectionViewLayout(verticalSnapCollectionFlowLayout, animated: true)

Storyboard/Nib Setup

Setting up the layouts via Storyboard/Nib is very easy as well. All you need to do is the following:

  1. Find your Collection View in Xcode's visual editor
  2. Select it
  3. Open Attributes Inspector
  4. Find and change UI menu called Layout to Custom
  5. Set the class to the one that you wish to use

In your view controller you need to provide a valid reference to the UIViewController from Storyboard/Nib file where you overriden the default layout class.

For cases when you need to tell your custom layout what class is going to delegate the layout handling, use the following code:

if let layout = collectionView?.collectionViewLayout as? PinterestLayout {
    layout.delegate = self

For cases when you simply need to change properties for custom layouts that were set via visual editor, use the following code:

if let layout = collectionView?.collectionViewLayout as? InstagridLayout {
    layout.itemSpacing = 10
    layout.fixedDivisionCount = 4
    layout.scrollDirection = .vertical

If you use Storyboard/Nib approach, consider creating an IBOutlet to the custom layout and directly set it up, instead of casting layout using the collection view reference:

@IBOutlet weak var instagridLayout: InstagridLayout!

override func viewDidLoad() {
    // InstagridLyout setup
    instagridLayout.delegate = self
    instagridLayout.itemSpacing = 10
    instagridLayout.fixedDivisionCount = 4
    instagridLayout.scrollDirection = .vertical

📚 Contents

Please wait while the .gif files are loading (each of them is around 10Mb)

Safari iPhone

It's a custom layout that mimics UICollectionView layout that can be seen on iPhones in portrait orientation. The layout only supports portrait orientation, but can be adjusted for landscape orientation and even for n-column layout, that can be used, for example on wider screens, such as iPads.

  • [x] Perspective transformation that reveal cell's content while scrolling up and down
  • [x] Automatically adjusts contents to fit the current screen
  • [x] Portrait orientation
  • [x] Only for iPhones
  • [x] Adjustable: various properties can be changed
  • [x] Scalable: can be adopted to support iPad and various, sophisticated perspective transformation while scrolling


Is a custom layout that places the collection view items on top of each other - just as a stack of books on a table, observed from the top-to-bottom perspective.

  • [x] Snapping behavior when swiping between items
  • [x] Automatically adjusts the cell sizes
  • [x] Portrait & landscape orientations
  • [x] Customizable


Is a custom flow layout that adds snapping behavior to single column collection view. Landscape layout changes the number of columns to two - in order to more ergonomically fill in the horizontal space.

  • [x] Snapping behavior when scrolling
  • [x] Automatically adjusts the cell sizes
  • [x] Supports both scrolling directions e.g. .vertical and .horizontal
  • [x] Portrait & landscape orientations, with customizable horizontalOrientationDevider property, which adds an additional row of in the collection view layout
  • [x] Has customazable properties

Vertical Scrolling

Horizontal Scrolling


Is a custom layout that mimics Pinterest layout. Can be customized with a variable number of rows and custom cells.

  • [x] Automatically adjusts the cell sizes
  • [x] Supports both scrolling directions e.g. .vertical and .horizontal
  • [x] Portrait & landscape orientations
  • [x] Has customazable properties


Is a custom layout that places collection view cells in a circular fashion with a snapping behavior. The spinning circle radius, cell size and cell decoration view can be customized. Supports both landscape and portrait layouts.

  • [x] Snapping behavior
  • [x] Automatically adjusts the cell sizes
  • [x] Supports both scrolling directions e.g. .vertical and .horizontal
  • [x] Portrait & landscape orientations
  • [x] Has customazable properties


Is a custom layout similar to Instagram's feed layout. Has several customization points and a delegate protocol for cell size runtime customization.

  • [x] Snapping behavior
  • [x] Automatically adjusts the cell sizes
  • [x] Supports both scrolling directions e.g. .vertical and .horizontal
  • [x] Portrait & landscape orientations
  • [x] Has customazable properties




👨‍💻 Author

Astemir Eleev

🔖 Licence

The project is available under MIT Licence

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
swift (7,620) 
ios (3,544) 
ui (1,009) 
uikit (262) 
layout (176) 
custom-view (98) 
uicollectionview (90) 
autolayout (50) 
constraints (45) 
safari (45) 
uicollectionviewlayout (29) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210