- iOS 8.0+
- Xcode 8
- Swift 3 (<= 1.0.3)
- Swift 4 (>= 1.1.0)
- Swift 4.2 (~> 2.0)
You can install GlidingCollection
in several ways:
- Add source files to your project.
- Use CocoaPods:
pod 'GlidingCollection'
- Use Carthage:
github "Ramotion/gliding-collection"
โข 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
}
}
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
.
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
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/
Try this UI component and more like this in our iOS app. Contact us if interested.