ramotion / gliding-collection

:octocat: Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller. iOS library made by @Ramotion

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:

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.

• Use CocoaPods:

pod 'GlidingCollection'

• Use Carthage:

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.

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

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.

gliding-collection's Issues

network data

Whether it supports network data loading？

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.

Gliding-collection for android

Hi thanks from your stylish and powerful libraries .
Is it possible to make a library like this for android ? are you developing it right now ?

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

Collectio view

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.

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)

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.