Gliding-collection
Gliding Collection is a smooth, flowing, customizable decision for a UICollectionView Swift Controller
Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
The iPhone mockup available here.
Requirements
- iOS 8.0+
- Xcode 8
- Swift 3 (<= 1.0.3)
- Swift 4 (>= 1.1.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 inGlidingConfig
.
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
This library is a part of a selection of our best UI open-source projects.
License
GlidingCollection is released under the MIT license. See LICENSE for details.
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.