Giter Club home page Giter Club logo

compositional-layouts-kit's Introduction

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

๐Ÿ“ This repository features a set of sophisticated compositional layouts for UICollectionView, complete with practical examples. Each layout is designed to adapt seamlessly to both portrait and landscape orientations, and is fully compatible with all iOS and iPadOS size classes.

๐Ÿ“š Contents

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

๐Ÿ— 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

compositional-layouts-kit's People

Contributors

eleev avatar kishikawakatsumi avatar dkhamsing avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.