📏 A set of advanced compositional layouts for UICollectionView with examples

Related tags

Example Apps swift ios apple uikit collectionview uicollectionviewlayout uicollectionviewcell collectionviewlayout ipados ios13 ipados13 uicollectionviewcompositionallayout
Overview

compositional-layouts-kit Awesome

Platform Platform Language CustomLayouts API 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 advanced compositional layouts for UICollectionView with examples. All the layouts support both portrait and landscape orientations as well as support for all iOS and iPadOS related size classes.

📚 Contents

Please wait while the .gif files are loading (there are 12 files, that weight around 200Mb)...

🏗 Setup

There are no dependencies as well as any package managers involved. The project has more like a demo app setup e.g simply grab what you need for your needs. Each layout is wrapped into a separate UIViewController type for convenience (I could've create a separate layout factory and have just a single view controller, however, for the sake of simplicity I decided to make it possible to extract layouts with all the dependent code).

✈️ Usage

Simply grab a UIViewController type with a custom layout and adjust it for your needs. The layouts are in here.

🆘 Tips

  1. Not all layouts may look cool in landscape orientations. In order to make them look cooler and take advantage of different aspect ratio of a screen, you need to create an alternative layout that is basically the copy of the portrait layout, but has different set of fractional width and height.
  2. If you want to have different layouts in portrait and landscape device orientations, you need to use either one of the following approaches:
    • Use viewWillTransition(to size: , with coordinator:) method (of UIViewController class) and setCollectionViewLayout(, animated: completion:) method of UICollectionView class to properly animate changes of layout when changing orientation.
    • More advanced and preffered approach is to implement a custom UICollectionViewTransitionLayout, which is (a quote from Apple's Docs):

    A special type of layout object that lets you implement behaviors when changing from one layout to another in your collection view.

⚠️ Warning

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

👨‍💻 Author

Astemir Eleev

🔖 Licence

The project is available under MIT Licence

You might also like...
Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts.
Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts.

Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts. It comes

Christoffer Winterkvist 982 Dec 7, 2022
A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UICollectionViewCompositionalLayout.
A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UICollectionViewCompositionalLayout.

WWCompositionalLayout A simple integrated version of iOS 13 Compositional Layout, modified into a way similar to Functional Programming to generate UI

William-Weng 1 Jul 4, 2022
Enhanced transitioning between UICollectionView layouts in iOS.

TLLayoutTransitioning Enhanced transitioning between UICollectionView layouts in iOS. ##Overview TLLayoutTransitioning provides a TLLayoutTransition t

SwiftKick Mobile 359 Oct 30, 2022
This repo contains beginner examples to advanced in swift. Aim to create this for learning native iOS development.

iOS-learning-with-swift-22 This repo contains beginner examples to advanced in swift. Aim to create this for learning native iOS development. Oh, you

Umesh Jangid 0 Jan 9, 2022
A beautiful set of predefined colors and a set of color methods to make your iOS/OSX development life easier.
A beautiful set of predefined colors and a set of color methods to make your iOS/OSX development life easier.

Installation Drag the included Colours.h and Colours.m files into your project. They are located in the top-level directory. You can see a demo of how

Ben Gordon 3.1k Dec 28, 2022
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
A SwiftUI collection view with support for custom layouts, preloading, and more.
A SwiftUI collection view with support for custom layouts, preloading, and more.

ASCollectionView A SwiftUI implementation of UICollectionView & UITableView. Here's some of its useful features: supports preloading and onAppear/onDi

Apptek Studios 1.3k Dec 24, 2022
Solitaire mahjong game with several themes and layouts. For android/iphone/ubuntu/firefoxos

green-mahjong Green Mahjong is a HTML5 based GPLv3 solitaire mahjong game. It features three nice themes, six different layouts and works accross all

Daniel Beck 82 Dec 25, 2022
Tool to debug layouts directly on iOS devices: inspect layers in 3D and debug each visible view attributes
Tool to debug layouts directly on iOS devices: inspect layers in 3D and debug each visible view attributes

Introduction Features Inspect layouts directly on iOS devices Inspection could be triggered only if app is running under DEBUG build configuration, so

Ihor Savynskyi 510 Dec 24, 2022
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
Custom transition between two collection view layouts
Custom transition between two collection view layouts

Display Switcher We designed a UI that allows users to switch between list and grid views on the fly and choose the most convenient display type. List

Yalantis 2.3k Dec 14, 2022
Blueprints - A framework that is meant to make your life easier when working with collection view flow layouts.
Blueprints - A framework that is meant to make your life easier when working with collection view flow layouts.

Description Blueprints is a collection of flow layouts that is meant to make your life easier when working with collection view flow layouts. It comes

Christoffer Winterkvist 982 Dec 7, 2022
A bunch of layouts providing light and seamless experiences in your Collection View
A bunch of layouts providing light and seamless experiences in your Collection View

Swinflate Description Swinflate aims to encorporate a set of collection view layouts which provide a better and even more fluid experience in collecti

Vlad Iacob 224 Dec 19, 2022
iOS app built with UIKit and programatic auto-layouts to learn and apply knowledge. Offline storage using CoreData and Caching

PurpleImage Search Pixabay for images and save them offline to share and view To use: Clone the GitHub project, build and run in Xcode. The API is com

Frederico Kückelhaus 0 May 10, 2022
FlexiblePickerExample - Example of flexible picker that automatically layouts its own content

Flexible Picker The implementation of custom Flexible Picker. Thanks to that vie

Jędrzej 21 Dec 27, 2022
SwiggyClone - A Swiggy clone will dive deep into UICompositional Layouts and alot of new concepts
SwiggyClone - A Swiggy clone will dive deep into UICompositional Layouts and alot of new concepts

SwiggyClone This app is a clone of Swiggy (in progress). In this project we will

Dheeraj Kumar Sharma 81 Dec 25, 2022
🧩 Easy scrollable layouts in UIKit
🧩 Easy scrollable layouts in UIKit

Easy scrollable layouts in UIKit Create complex scrollable layout using UIViewControllers or plain UIViews and simplify your code! ScrollStackControll

Daniele Margutti 402 Oct 3, 2022
UISplitViewController with adaptative layouts
UISplitViewController with adaptative layouts

JRSplitVC [![CI Status](http://img.shields.io/travis/José Roldán Jiménez/JRSplitVC.svg?style=flat)](https://travis-ci.org/José Roldán Jiménez/JRSplitV

José Roldán Jiménez 30 Aug 22, 2019
A collection of native SwiftUI layouts (iOS 16+)

SwiftUILayouts A library of commonly requested layouts. Implemented using SwiftUI's native layout system. NOTE: SwiftUILayouts requires iOS 16 or abov

Apptek Studios 25 Dec 26, 2022
Comments
  • I want change scale center to left , but some problem

    I want change scale center to left , but some problem

    61178444-b4dba000-a61f-11e9-92f4-b63dc91031ec

    private func configureAttributes(for attributes: UICollectionViewLayoutAttributes) {
    guard let collection = collectionView else { return }
    var visibleRect = CGRect()
    visibleRect.origin = collection.contentOffset
    visibleRect.size = collection.bounds.size
    let collectionLeft =  itemSize.width / 2
    let offset = collection.contentOffset.x
    let normalizedLeft =  attributes.center.x  - offset

    let maxDistance =  self.itemSize.width
    let distance = min(abs(collectionLeft - normalizedLeft), maxDistance)
    let ratio = (maxDistance - distance)/maxDistance
    let scale = ratio * (1 - sideItemScale) + sideItemScale

    var t = CATransform3DIdentity
    t = CATransform3DScale(t,  scale, scale, 1.0)
    attributes.zIndex = Int(scale * 10)
    attributes.transform3D = t
    //  change item space,  

}
    duplicate question 
    opened by susuyan 1
Owner
Astemir Eleev
 Apple Platforms | Lead Software Engineer | Entrepreneur | MSc in Applied CS | Open Source Enthusiast | Founder & CTO Intera
Astemir Eleev
GitHub
Advanced Catalyst Example with sidebar, list view, SwiftUI detail view, toolbar & AppKit bundle

Advanced Catalyst Example This is an example of a Catalyst app using a three-column layout, with a primary toolbar. It includes topics such as: Drag &

Steven Troughton-Smith 219 Dec 8, 2022
Complete SwiftUI Docs with Examples

?? SwiftOnTap Complete SwiftUI Docs with Examples. Get Started | How It Works | Add Docs Get Started To get started, Go to swiftontap.com ?? . Press /

null 553 Dec 29, 2022
Simple examples that help you get started with Appwrite + Apple with SwiftUI (=❤️)

Appwrite's Apple Playground ?? Appwrite playground is a simple way to explore the Appwrite API & Appwrite Apple SDK. Use the source code of this repos

Appwrite 28 Nov 22, 2022
Simple examples that help you get started with Appwrite + Swift for Server (=❤️)

Playground for Swift Simple examples that help you get started with Appwrite + Swift (= ❤️ ) This is Appwrite server side integration with Swift. For

Appwrite 24 Dec 10, 2022
Combine explanation + examples

Combine Playground These repository contains a Xcode Playground that goes over the basics of Combine and presents usage examples for the main componen

Andrés Pesate 2 Dec 29, 2021
 Sample iOS App - A collection of examples and patterns for Unit Testing, UI Testing, handling Result/Optionals, writing documentation

 Sample iOS App - A collection of examples and patterns for Unit Testing, UI Testing, handling Result/Optionals, writing documentation, and more

Soojin Ro 206 Dec 9, 2022
IOS Swift : Explain Higher-order Function Examples

IOS Swift : Explain Higher-order Function Examples

Aya Baghdadi 0 Feb 20, 2022
Birthdays App Challenge set by Chalkboard

Chalkboard Birthdays App Challange This is an app that utilises a web api to provide the user an ordered list of birthdays youngest to oldest How to i

Rob Copping 0 Nov 25, 2021
Launch App in selected language, or set as Default language

app lang switcher alfred workflow Launch App in selected language, or set as Default language. Credits: This is a swift clone of AlfredWorkflow-App-La

Saiya 4 Dec 7, 2022
Much a-do with compositional layouts and diffable data sources.

Film Goal Reflect upon decisions made on my last project Films (submitted in July of 2019) and make improvements on my findings. Be more pragmatic wit

Christian Ampe 1 Feb 10, 2022