An easy-to-use Collection View Layout for card-like animation.

Related tags

UICollectionView swift ios ui uicollectionview cards animation iphone ios-swift collectionview uicollectionviewlayout flowlayout uicollectionviewflowlayout collectionviewlayout swift4 collectionviewflowlayout
Overview

CarLensCollectionViewLayout

An easy-to-use Collection View Layout for card-like animation 🎉

CarLensCollectionViewLayout was created out of the implementation in CarLens application 🚘 . The image above exactly shows the screen from the app!

Requirements

CarLensCollectionViewLayout is written in Swift 4.2 and supports iOS 9.0+.

Usage

Basic Usage

The two main steps are needed for the configuration of CarLensCollectionViewLayout:

Step 1

Assign CarLensCollectionViewLayout to yours collection view layout:

collectionView.collectionViewLayout = CarLensCollectionViewLayout()

or initialize your collection view with CarLensCollectionViewLayout:

UICollectionView(frame: .zero, collectionViewLayout: CarLensCollectionViewLayout())

Step 2

Subsclass CarLensCollectionViewCell and call configure(topView: UIView, cardView: UIView) during the cell’s initialization:

class CollectionViewCell: CarLensCollectionViewCell {
    override init(frame: CGRect) {
	super.init(frame: frame)
	configure(topView: upperView, cardView: bottomView)
    }
}

The sample implementation is available in Demo project.

Customization

Layout

You can also initialize CarLensCollectionViewLayout with a CarLensCollectionViewLayoutOptions object by passing any of the parameters available. Others will be configured automatically.

Parameters:

minimumSpacing - A minimum spacing between cells.

decelerationRate - A deceleration for a scroll view.

shouldShowScrollIndicator - A value indicating whether collection view should have a scroll indicator.

itemSize - The size to use for cells.

Example:

let options = CarLensCollectionViewLayoutOptions(minimumSpacing: 40)
collectionView.collectionViewLayout = CarLensCollectionViewLayout(options: options)

Cell

While subsclassing CarLensCollectionViewCell you can call configure(...) with an additional parameter topViewHeight. The card view height will be calculated based on this value.

Example:

class CollectionViewCell: CarLensCollectionViewCell {
    override init(frame: CGRect) {
	super.init(frame: frame)
	configure(topView: upperView, cardView: bottomView, topViewHeight: 300)
    }
}

Installation

CocoaPods

If you're using CocoaPods, add the following dependency to your Podfile:

use_frameworks!
pod 'CarLensCollectionViewLayout', '~> 1.2.0'

Carthage

If you're using Carthage, add the following dependency to your Cartfile:

github "netguru/CarLensCollectionViewLayout" ~> 1.2.0

About

This project is made with ❤️ by Netguru and maintained by Anna-Mariia Shkarlinska.

License

CarLensCollectionViewLayout is licensed under the MIT License. See LICENSE.md for more info.

Read More

Related Links

Comments
  • [CRAI-362] Making configuration more generic

    [CRAI-362] Making configuration more generic

    Ticket

    CRAI-362

    Task description

    In this PR the customization possibilities where added! Now the layout can be customized by using CarLensCollectionViewLayoutOptions and the topViewHeight can be also configured. You can see more info in the README.md.

    The new 1.1.0 release version will be made out of it.

    opened by anyashka 1
  • Release 1.1.0

    Release 1.1.0

    The release was approved in previous PR's. P.S. Bitrise is failed cause there is no workflow for PR's to master branch. I'll update workflow later or will merge it without PR's :)

    opened by anyashka 0
  • [CRAI-363] Update README.md for public repository

    [CRAI-363] Update README.md for public repository

    Ticket

    CRAI-363

    Task Description

    Previously the README.md was written for the purpose of an internal project. Now it's updated for OSS.

    You can take a look at it here.

    opened by anyashka 0
  • [CRAI-356] Create a Pod

    [CRAI-356] Create a Pod

    Ticket

    CRAI-356

    Task Description

    This PR contains a newly created Podspec and MIT license. After the PR merge, also will be done:

    • Updating README.md
    • Merge to master
    • Creating a release version
    • Making a repo public

    Aditional Notes (optional)

    This is the first release of a product. Later it is planned to develop it more. All the tasks are on JIRA already.

    opened by anyashka 0
  • [CRAI-365] Extracting code from app

    [CRAI-365] Extracting code from app

    Ticket

    CRAI-365

    Task Description

    This task contains extracting code from the CarLens application. It was mostly copied from that place and slightly changed so it could be used outside the app too. It should be used as follows:

    • The developer should initialize CarlensCollectionViewLayout() and assign it to their collection view layout.
    • The developer should subclass CarlensCollectionViewCell and initialize there topView and cardView on a start. It should be done with the help of configure method. If he doesn't a view will be simply empty.

    Aditional Notes (optional)

    It is a minimum viable product at the moment. Eventually, more generic features can be added.

    opened by anyashka 0
  • [CRAI-355] Initial setup

    [CRAI-355] Initial setup

    Ticket

    CRAI-355

    Task Description

    The initial setup of a framework. Here is the video of a desidered result of future framework.

    Aditional Notes (optional)

    README.md will be updated in the future once the framework will be ready. Bitrise is just checking whether the project is building at the moment.

    opened by anyashka 0
Releases(1.2.0)
Owner
Netguru
Building software for world changers
Netguru
GitHub https://www.netguru.com/codestories/introducing-carlenscollectionviewlayout-a-new-open-source-ios-tool-by-netguru
Declaretive UICollectionViewCompositionalLayout interface to implement complex collection view layout.

CompositionalLayoutViewController Example To run the example project, clone the repo, and run pod install from the Example directory first. Requiremen

ONEinc 19 Dec 2, 2022
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
CardsLayout is a lightweight Collection Layout.

CardsLayout is a lightweight Collection Layout. Installation CocoaPods

Filipp Fediakov 798 Dec 28, 2022
Easy and type-safe iOS table and collection views in Swift.

Quick Start TL;DR? SimpleSource is a library that lets you populate and update table views and collection views with ease. It gives you fully typed cl

Squarespace 96 Dec 26, 2022
Lightweight custom collection view inspired by Airbnb.

ASCollectionView Lightweight custom collection view inspired by Airbnb. Screenshots Requirements ASCollectionView Version Minimum iOS Target Swift Ver

Abdullah Selek 364 Nov 24, 2022
UICollectionViewSplitLayout makes collection view more responsive.

UICollectionViewSplitLayout makes collection view more responsive. What's this? UICollectionViewSplitLayout is a subclass of UICollectionViewLayout. I

Yahoo! JAPAN 239 Dec 6, 2022
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 Swi

Yassir Barchi 2.2k Dec 27, 2022
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.

GravitySliderFlowLayout Made by Applikey Solutions Find this project on Dribbble Table of Contents Purpose Supported OS & SDK Versions Installation Us

Applikey Solutions 958 Dec 23, 2022
Made in Swift - Tag layout for UICollectionView supporting 3 types of alignments - Left || Centre || Right

TagCellLayout About Its an ui-collection-view LAYOUT class that takes care of all the logic behind making tags like layout using UICollectionView. It

Ritesh Gupta 346 Jan 1, 2023
This component allows for the transfer of data items between collection views through drag and drop

Drag and Drop Collection Views Written for Swift 4.0, it is an implementation of Dragging and Dropping data across multiple UICollectionViews. Try it

Michael Michailidis 508 Dec 19, 2022
Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller.

A smooth, flowing, customizable decision for a UICollectionView Swift Controller We specialize in the designing and coding of custo

Ramotion 1.5k Dec 19, 2022
A mirror of Apple's sample code for high performance collection views in iOS 15.

Building High-Performance Lists and Collection Views Improve the performance of lists and collections in your app with prefetching and image preparati

Tim Oliver 14 Nov 12, 2022
↕️ VegaScroll is a lightweight animation flowlayout for UICollectionView completely written in Swift 4, compatible with iOS 11 and Xcode 9.

Made by Applikey Solutions Find this project on Dribbble Also check another flowlayout for UICollectionView: https://github.com/ApplikeySolutions/Grav

Applikey Solutions 2.8k Jan 1, 2023
UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode.

CheckmarkCollectionViewCell UICollectionViewCell with checkbox when it isSelected and empty circle when not - like Photos.app "Select" mode. Usage cla

Yonat Sharon 62 Oct 19, 2022
Easy way to integrate pagination with dummy views in CollectionView, make Instagram "Discover" within minutes.

AZCollectionView Controller Features Automatic pagination handling No more awkward empty CollectionView screen AZ CollectionVIew controller give you a

Afroz Zaheer 95 May 11, 2022
FSPagerView is an elegant Screen Slide Library. It is extremely helpful for making Banner View、Product Show、Welcome/Guide Pages、Screen/ViewController Sliders.

SWIFT OBJECTIVE-C FSPagerView is an elegant Screen Slide Library implemented primarily with UICollectionView. It is extremely helpful for making Banne

Wenchao Ding 6.7k Jan 2, 2023
iOS custom view to display books on shelf

ShelfView (iOS) iOS custom view to display books on shelf (Android version is available here) Requirements iOS 10.0+ Swift 4.2 Installation ShelfView

Adeyinka Adediji 268 Dec 10, 2022
Useful SwiftUI container view's. FittingGeometry, ScrollableView, LayoutReader, PageView, UIKitView. (iOS)

Containers Also available as a part of my SwiftUI+ Collection – just add it to Xcode 13+ Useful SwiftUI container view's for additional convenience. I

SwiftUI+ 32 Dec 27, 2022
Swipe able, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI

Swipable, customizable card stack view, Tinder like card stack view based on UICollectionView. Cards UI Сocoapods installation Add in your Podfile: po

Indy 850 Nov 17, 2022
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022