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 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
📄
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.
346 Jan 1, 2023
2.8k Jan 1, 2023
374 Oct 22, 2022
0 Nov 11, 2021
96 Dec 26, 2022
364 Nov 24, 2022
4.2k Jan 5, 2023
798 Dec 28, 2022
530 Dec 16, 2022
508 Dec 19, 2022
239 Dec 6, 2022
19 Dec 2, 2022
14 Nov 12, 2022
637 Dec 30, 2022
1.2k Jan 6, 2023
65 Jun 9, 2018
975 Dec 21, 2022
5 Jan 25, 2022
105 Feb 13, 2022