CardStack converts your UICollectionView to an awesome stack of cards using custom UICollectionViewLayout
Talk is cheap, lets look at the gif
The Basic interaction with the CardStack is dragging up the cards till they are unraveled. But hold on, for the impatient users, there is one more interaction, you can drag a little and the cards will unwind or wind
There ar 4 basic components required by CardStack to function. To initialise the CardsStack it needs the CardsPosition, Configuration along with UICollectionView and its height constraint i.e NSLayoutConstraint
Initialise CardsStack as follows
let config = Configuration(cardOffset: 40, collapsedHeight: 200, expandedHeight: 500, cardHeight: 200, downwardThreshold: 20, upwardThreshold: 20, leftSpacing: 8.0, rightSpacing: 8.0, verticalSpacing: 8.0)
let cardsStack = CardsStack(cardsState: .Collapsed, configuration: config, collectionView: collectionView, collectionViewHeight: heightConstraint)Configuration object holds the information related to Stacks view, like the collapsed height, expanded height etc.
public struct Configuration {
public let cardOffset: Float
public let collapsedHeight:Float
public let expandedHeight:Float
public let cardHeight: Float
public let downwardThreshold: Float
public let upwardThreshold: Float
public let verticalSpacing: Float
public let leftSpacing: Float
public let rightSpacing: Float
public init(cardOffset: Float, collapsedHeight: Float, expandedHeight: Float, cardHeight: Float, downwardThreshold: Float = 20, upwardThreshold: Float = 20, leftSpacing: Float = 8.0, rightSpacing: Float = 8.0, verticalSpacing: Float = 8.0) {
self.cardOffset = cardOffset
self.collapsedHeight = collapsedHeight
self.expandedHeight = expandedHeight
self.downwardThreshold = downwardThreshold
self.upwardThreshold = upwardThreshold
self.cardHeight = cardHeight
self.verticalSpacing = verticalSpacing
self.leftSpacing = leftSpacing
self.rightSpacing = rightSpacing
}
}Its initialiser requires the necessary fields like cardOffset, collapsedHeight, expandedHeight and cardHeight
cardOffsetis the offset between thetwo cards while in collapsed statecollapsedHeight, as name suggests its the height of the collectionview while in collapsed stateexpandedHeightis the height of the collectionview while in expanded statecardHeightis the height of the cell
Its an enum which states the current state of CardsStack
@objc public enum CardsPosition: Int {
case Collapsed
case Expanded
}With this delegate you can get the hooks to specific events
@objc public protocol CardsManagerDelegate {
@objc optional func cardsPositionChangedTo(position: CardsPosition)
@objc optional func tappedOnCardsStack(cardsCollectionView: UICollectionView)
@objc optional func cardsCollectionView(_ cardsCollectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
@objc optional func cardsCollectionView(_ cardsCollectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
}For listening to this call backs assign a delegate to CardsStack
cardsStack.delegate = selfThe last two functions are the same as the delegate function for collection view.
The first function gives the hook to the CardStacks position change
@objc optional func cardsPositionChangedTo(position: CardsPosition) The CardStack also has the tap gesture which is enabled when the cards are collapsed.The second function gives the hook to the tap gesture on collectionview when the cards are in collapsed state.
So you can use this hook to open cards, like this
func tappedOnCardsStack(cardsCollectionView: UICollectionView) {
cardsStack.changeCardsPosition(to: .Expanded)
}In order to change the state of the cards programatically you can use
public func changeCardsPosition(to position: CardsPosition) {You can checkout the example and play around with it to get hang of the API's
- Carthage Support
- CocoaPods Support
- SwiftPM Support
- Watch, TvOS Targets
Found a bug? Want a new feature? Please feel free to report any issue or raise a Pull Request.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent