CocoaPods trunk is moving to be read-only. Read more on the blog, there are 19 months to go.

GlidingCollection 2.1.0

GlidingCollection 2.1.0

TestsTested
LangLanguage SwiftSwift
License MIT
ReleasedLast Release Apr 2019
SPMSupports SPM

Maintained by Abdurahim Jauzee, Adaptive Controller, Alex Kalinkin.



  • By
  • Abdurahim Jauzee

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:

Get Free Mockup For your project →

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 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.