Need help with VerticalCardSwiper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

JoniVR
834 Stars 66 Forks MIT License 191 Commits 11 Opened issues

Description

A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.

Services available

!
?

Need anything else?

Contributors list

# 51,126
Swift
tinder-...
shazam
faceboo...
169 commits
# 345,404
Swift
Objecti...
iOS
tinder-...
3 commits
# 392,085
Swift
Objecti...
iOS
tinder-...
2 commits
# 388,607
Swift
Objecti...
iOS
tinder-...
2 commits
# 120,791
Swift
Objecti...
tinder-...
shazam
1 commit
# 454,819
Swift
Objecti...
iOS
tinder-...
1 commit
# 124,884
today-w...
Xcode
Ruby
Jekyll
1 commit

VerticalCardSwiper

A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.



example

Project goal and information

The goal of this project is to recreate the Discover UI in Shazam (which I think is a great, fun way to display content) in combination with a Tinder style of swiping cards to the left/right. The idea behind this is that in some cases, you don't want to swipe away cards, but keep them available for later on. This implementation allows for that. And it's a fun way to interact with content.

It's built with a

UICollectionView
and a custom flowLayout.

Requirements

  • iOS 9.0+
  • Swift 5

Installation

CocoaPods

To install with CocoaPods, simply add the following line to your Podfile:

ruby
pod 'VerticalCardSwiper'

Carthage

To install with Carthage, simply add the following line to your Podfile:

ruby
github "JoniVR/VerticalCardSwiper"

Example

To try out

VerticalCardSwiper
pod try VerticalCardSwiper

or open the project and run the Example.

Usage

VerticalCardSwiper
behaves a lot like a standard
UICollectionView
. To use it inside your
UIViewController
:
import VerticalCardSwiper

class ExampleViewController: UIViewController, VerticalCardSwiperDatasource {

private var cardSwiper: VerticalCardSwiper!

override func viewDidLoad() {
    super.viewDidLoad()

    cardSwiper = VerticalCardSwiper(frame: self.view.bounds)
    view.addSubview(cardSwiper)

    cardSwiper.datasource = self

    // register cardcell for storyboard use
    cardSwiper.register(nib: UINib(nibName: "ExampleCell", bundle: nil), forCellWithReuseIdentifier: "ExampleCell")
}

func cardForItemAt(verticalCardSwiperView: VerticalCardSwiperView, cardForItemAt index: Int) -> CardCell {

    if let cardCell = verticalCardSwiperView.dequeueReusableCell(withReuseIdentifier: "ExampleCell", for: index) as? ExampleCardCell {
        return cardCell
    }
    return CardCell()
}

func numberOfCards(verticalCardSwiperView: VerticalCardSwiperView) -> Int {
    return 100
}

}

Properties

/// Indicates if side swiping on cards is enabled. Set to false if you don't want side swiping. Default is `true`.
@IBInspectable public var isSideSwipingEnabled: Bool = true
/// Allows you to enable/disable the stacking effect. Default is `true` (enabled).
@IBInspectable public var isStackingEnabled: Bool = true
/// The transform animation that is shown on the top card when scrolling through the cards. Default is 0.05.
@IBInspectable public var firstItemTransform: CGFloat = 0.05
/// The inset (spacing) at the top for the cards. Default is 40.
@IBInspectable public var topInset: CGFloat = 40
/// The inset (spacing) at each side of the cards. Default is 20.
@IBInspectable public var sideInset: CGFloat = 20
/// Sets how much of the next card should be visible. Default is 50.
@IBInspectable public var visibleNextCardHeight: CGFloat = 50
/// Vertical spacing between the focussed card and the bottom (next) card. Default is 40.
@IBInspectable public var cardSpacing: CGFloat = 40
/// Allows you to set the view to Stack at the Top or at the Bottom. Default is true.
@IBInspectable public var isStackOnBottom: Bool = true
/// Sets how many cards of the stack are visible in the background
@IBInspectable public var stackedCardsCount: Int = 1
/** 
 Returns an array of indexes (as Int) that are currently visible in the `VerticalCardSwiperView`.
 This includes cards that are stacked (behind the focussed card).
*/
public var indexesForVisibleCards: [Int]

Other

Just like with a regular
UICollectionView
, you can reload the data by calling
cardSwiper.reloadData()
Get the current focussed card index
cardSwiper.focussedCardIndex
Scroll to a specifc card by calling
cardSwiper.scrollToCard(at: Int, animated: Bool) -> Bool
Get a card at a specified index
cardSwiper.cardForItem(at: Int) -> CardCell?
Swipe a card away programatically
cardSwiper.swipeCardAwayProgrammatically(at: Int, to: SwipeDirection, withDuration: TimeInterval = 0.3) -> Bool
Moving/Deleting/Inserting cards at runtime

Make sure to update your datasource first, otherwise an error will occur.

swift
cardSwiper.moveCard(at: Int, to: Int)
cardSwiper.deleteCards(at: [Int])
cardSwiper.insertCards(at: [Int])

Delegation

To handle swipe gestures, implement the

VerticalCardSwiperDelegate
.
class ViewController: UIViewController, VerticalCardSwiperDelegate {

override func viewDidLoad() {
    super.viewDidLoad()

    cardSwiper.delegate = self
}

func willSwipeCardAway(card: CardCell, index: Int, swipeDirection: SwipeDirection) {

    // called right before the card animates off the screen (optional).
}

func didSwipeCardAway(card: CardCell, index: Int, swipeDirection: SwipeDirection) {

    // handle swipe gestures (optional).
}

func didCancelSwipe(card: CardCell, index: Int) {

    // Called when a card swipe is cancelled (when the threshold wasn't reached)
}

func sizeForItem(verticalCardSwiperView: VerticalCardSwiperView, index: Int) -> CGSize {

    // Allows you to return custom card sizes (optional).
    return CGSize(width: verticalCardSwiperView.frame.width * 0.75, height: verticalCardSwiperView.frame.height * 0.75)
}

func didScroll(verticalCardSwiperView: VerticalCardSwiperView) {

    // Tells the delegate when the user scrolls through the cards (optional).
}

func didEndScroll(verticalCardSwiperView: VerticalCardSwiperView) {

    // Tells the delegate when scrolling through the cards came to an end (optional).
}

func didDragCard(card: CardCell, index: Int, swipeDirection: SwipeDirection) {

    // Called when the user starts dragging a card to the side (optional).
}

func didTapCard(verticalCardSwiperView: VerticalCardSwiperView, index: Int) {

    // Tells the delegate when the user taps a card (optional).
}

func didHoldCard(verticalCardSwiperView: VerticalCardSwiperView, index: Int, state: UIGestureRecognizer.State) {

    // Tells the delegate when the user holds a card (optional).
}

}

Customization

Subclass the

CardCell
to customize the cards. ```swift class ExampleCardCell: CardCell {

} ```

Key Features

  • [x] Shazam Discover UI with paging
  • [x] Tinder-style swiping
  • [x] Option to disable side swiping
  • [x] Set custom number of stacked cards
  • [x] Code documentation in README.md file
  • [x] Cocoapods support
  • [x] Carthage support
  • [x] SPM support
  • [ ] Diff support

Author

Joni Van Roost, [email protected]

License

VerticalCardSwiper is available under the MIT license. See the LICENSE file for more info.

More

Feel free to submit a pull request, open an issue or fork this project. Any help is always appreciated. A big thank you to all the contributors!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.