Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller.

Overview

GLIDING COLLECTION

A smooth, flowing, customizable decision for a UICollectionView Swift Controller


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


Twitter PodPlatform PodVersion Documentation Carthage Codebeat Swift Donate

Requirements

  • iOS 8.0+
  • Xcode 8
  • Swift 3 (<= 1.0.3)
  • Swift 4 (>= 1.1.0)
  • Swift 4.2 (~> 2.0)

Installation

You can install GlidingCollection in several ways:

  • Add source files to your project.

pod 'GlidingCollection'

github "Ramotion/gliding-collection"

How to use

• Create a view controller class:

import GlidingCollection

class ViewController: UIViewController {
  let items = ["gloves", "boots", "bindings", "hoodie"]
}

• Drag a UIView onto the canvas. Change it's class to GlidingCollection and use autolayout constraints.

step-2

• Connect this view to your view controller class as an @IBOutlet.

@IBOutlet var glidingCollection: GlidingCollection!

• Make your view controller conform to GlidingCollectionDatasource. It's very similar to the UITableView or UICollectionView datasource protocols that you know:

extension ViewController: GlidingCollectionDatasource {

  func numberOfItems(in collection: GlidingCollection) -> Int {
    return items.count
  }

  func glidingCollection(_ collection: GlidingCollection, itemAtIndex index: Int) -> String {
    return "" + items[index]
  }

}

• Make your view controller conform to UICollectionViewDatasource:

extension ViewController: UICollectionViewDatasource {
  
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    let section = glidingView.expandedItemIndex // Value of expanded section.
    return images[section].count
  }
  
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? CollectionCell else { return UICollectionViewCell() }
    // Configure and return your cell.
    return cell
  }
  
}

Customize

You can customize the appearance of GlidingCollection by overriding GlidingConfig's shared instance with your own.

var config = GlidingConfig.shared
config.buttonsFont = UIFont.boldSystemFont(ofSize: 22)
config.activeButtonColor = .black
config.inactiveButtonsColor = .lightGray
GlidingConfig.shared = config

🗒 All parameters with their descriptions are listed in GlidingConfig.


Notes

There is a GlidingCollectionDelegate protocol which can notify you when item in GlidingCollection didSelect, willExpand and didExpand.

If you want to achieve a parallax effect on a horizontal cards stack, you need to place your parallax view in a cell's contentView and set its tag to 99.

parallax-view

There is a kGlidingCollectionParallaxViewTag constant if you want to layout a cell in code.

imageView.tag = kGlidingCollectionParallaxViewTag

📄 License

Gliding Collection is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to https://www.ramotion.com/

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.



Comments
  • Cell becomes untouchable after animation in case if there is no more cell in a section

    Cell becomes untouchable after animation in case if there is no more cell in a section

    I'm noticing that when a row only contains one cell, didSelectItemAt is not firing when tapped. As long as more than one item is present everything works fine (including tapping the first cell).

    Expected Behavior Even if a cell is the only cell in a particular row it should still call didSelectItemAt when tapped

    Actual Behavior When a cell is the only cell in a row didSelectItemAt does not trigger after the only cell is tapped.

    bug 
    opened by phalladar 8
  • Custom Cell Size Based On expandedItemIndex

    Custom Cell Size Based On expandedItemIndex

    Is it possible to change the cardSize based on the expandedItemIndex? I tried doing this by setting the cell frame based on the expandedItemIndex, but it distorts the collection cell view.

    opened by YouKnowOJ 1
  • Custom Category Header Views

    Custom Category Header Views

    Would it be possible to create custom category heard views? For example, I want to be able to have the "-Boots" label on the left side, and I would like to have an "more>" label on the right side. It could be done in a similar fashion as how UICollection's delegate allows you to return a view for a section header.

    opened by danielchangsoojones 1
  • Broken Horizontal Sliding When Card Size Change

    Broken Horizontal Sliding When Card Size Change

    If you change the card size to a smaller width, then when you scroll horizontally, it is not snapping to each cell like it normally does. It is like the snapping is still calculated upon the default height. I set my card size to: CGSize(width: 200, height: 280)

    opened by danielchangsoojones 1
  • can not click the first item if some array does not have image on version 1.1.0

    can not click the first item if some array does not have image on version 1.1.0

    Attaching the modification demo project: With the lastest version 1.10, use the Demo project, add one line at the end of func loadImages() to remove images for first item:

    private func loadImages() { for item in items { let imageURLs = FileManager.default.fileUrls(for: "jpeg", fileName: item) var images: [UIImage?] = [] for url in imageURLs { guard let data = try? Data(contentsOf: url) else { continue } let image = UIImage(data: data) images.append(image) } self.images.append(images) }

    self.images[0].removeAll()
    

    } gliding-collection-master 2.zip

    opened by stoneyanjun 2
Releases(1.0.3)
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
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 332 Sep 7, 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 Sep 20, 2022
A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested UITableView/UICollectionView hack.

CollectionViewShelfLayout A UICollectionViewLayout subclass displays its items as rows of items similar to the App Store Feature tab without a nested

Pitiphong Phongpattranont 372 Jun 29, 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 914 Sep 18, 2022
UICollectionView and UIStackView Homework

UICollectionView and UIStackView Homework Use one outer StackView containing one CollectionView on top and a horizontal StackView at the bottom with t

null 0 Nov 11, 2021
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 Apr 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 363 Sep 5, 2022
BouncyLayout is a collection view layout that makes your cells bounce.

BouncyLayout is a collection view layout that makes your cells bounce. Features Pure Swift 5. Works with every UICollectionView. Horizontal and vertic

Robert-Hein Hooijmans 4.1k Sep 28, 2022
CardsLayout is a lightweight Collection Layout.

CardsLayout is a lightweight Collection Layout. Installation CocoaPods

Filipp Fediakov 782 Sep 20, 2022
An easy-to-use Collection View Layout for card-like animation.

CarLensCollectionViewLayout An easy-to-use Collection View Layout for card-like animation ?? CarLensCollectionViewLayout was created out of the implem

Netguru 524 Sep 21, 2022
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 496 Aug 18, 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 238 Jun 17, 2022
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 16 Apr 6, 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 15 Apr 13, 2022
Spreadsheet CollectionViewLayout in Swift. Fully customizable. 🔶

SwiftSpreadsheet Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Swift 5.0 Inst

Wojtek Kordylewski 633 Sep 2, 2022
A lightweight UICollectionViewLayout that 'pages' and centers its cells 🎡 written in Swift

CenteredCollectionView CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resul

Ben Emdon 1.2k Sep 27, 2022
Adding ruby style each iterator to Cocoa/Cocoa touch Swift Array and Range classes, And Int.times{} to Int class

Collection-Each Adding ruby style each iterator to Cocoa/Cocoa touch Swift Array, Dictionary and Range classes, and Int.times ###Why? Array/Dictionary

Omar Abdelhafith 65 Jun 9, 2018
Interactive view transition to display menus with flowing and bouncing effects in Swift

FlowingMenu FlowingMenu provides an interactive transition manager to display menu with a flowing and bouncing effects. The Objective-C countepart is

Yannick Loriot 972 Sep 13, 2022
A dynamically flowing progress bar.

WWProgressView A dynamically flowing progress bar. 一個動態流動的進度條. Installation with Swift Package Manager dependencies: [ .package(url: "https://gith

William-Weng 5 Jan 25, 2022
Smooth customizable tabs for iOS apps.

SmoothTab Requirements iOS 11.0+ Swift 5.x Xcode 10+ Installation CocoaPods pod 'SmoothTab' How to use Complete screen To setup and customize the comp

Yervand Saribekyan, iOS Dev 105 Feb 13, 2022