Skip to content
πŸ”₯ A multi-directional card swiping library inspired by Tinder
Swift Other
  1. Swift 99.5%
  2. Other 0.5%
Branch: master
Clone or download

README.md


πŸ”₯ A multi-directional card swiping library inspired by Tinder.

Swift 5 CocoaPods Carthage Swift Package Manager
Build Status Platform Code Coverage LICENSE

Made with ❀️ by Mac Gallagher


Features

πŸ’‘ Advanced swipe recognition based on velocity and card position

πŸ’‘ Manual and programmatic actions

πŸ’‘ Smooth card overlay view transitions

πŸ’‘ Fluid and customizable animations

πŸ’‘ Dynamic card loading using data source pattern

Example

To run the example project, clone the repo and run the ShuffleExample target.

Basic Usage

  1. Create your own card by subclassing SwipeCard. The card below displays an image, can be swiped left or right, and has overlay views for both directions:

    class SampleCard: SwipeCard {
       override var swipeDirections {
          return [.left, .right]
       }
       
       init(image: UIImage) {
            content = UIImageView(image: image)
            leftOverlay = UIView()
            rightOverlay = UIView()
            
            leftoverlay.backgroundColor = .green
            rightOverlay.backgroundColor = .red
       }
    }
  2. Initialize your card data and place a SwipeCardStack on your view:

    class ViewController: UIViewController {
        let cardStack = SwipeCardStack()
        
        let cardImages = [
            UIImage(named: "cardImage1"),
            UIImage(named: "cardImage2"),
            UIImage(named: "cardImage3")
        ]
        
        override func viewDidLoad() {
            super.viewDidLoad()
            view.addSubview(cardStack)
            cardStack.frame = view.safeAreaLayoutGuide
                                  .bounds.insetBy(dx: 10, dy: 50)
        }
    }
  3. Conform your class to the SwipeCardStackDataSource protocol and set your card stack's dataSource:

    func numberOfCards(in cardStack: SwipeCardStack) -> Int {
       return cardImages.count
    }
    
    func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {
       return SampleCard(image: cardImages[index])
    }
    cardStack.dataSource = self
  4. Conform to the SwipeCardStackDelegate protocol to subscribe to any of the following events:

     func didSwipeAllCards(_ cardStack: SwipeCardStack)
     func cardStack(_ cardStack: SwipeCardStack, didSwipeCardAt index: Int, with direction: SwipeDirection)
     func cardStack(_ cardStack: SwipeCardStack, didUndoCardAt index: Int, from direction: SwipeDirection)
     func cardStack(_ cardStack: SwipeCardStack, didSelectCardAt index: Int)
    

    Note: didSwipeCardAt and didSwipeAllCards are called regardless if a card is swiped programmatically or by the user.

Card Actions

The following methods are available on SwipeCardStack.

Swipe

Performs a swipe programmatically in the given direction.

func swipe(_ direction: SwipeDirection, animated: Bool)

Undo

Restores the card stack to its state before the last swipe.

func undoLastSwipe(animated: Bool)

Shift

Shifts the card stack's cards by the given distance. Any swiped cards are skipped over.

func shift(withDistance distance: Int = 1, animated: Bool)

Advanced Usage

For more advanced usage, including

visit the document here.

Installation

CocoaPods

Shuffle is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'Shuffle-iOS'

Carthage

Shuffle is available through Carthage. To install it, simply add the following line to your Cartfile:

github "mac-gallagher/Shuffle"

Swift Package Manager

MultiProgressView is available through Swift PM. To install it, simply add the package as a dependency in Package.swift:

dependencies: [
  .package(url: "https://github.com/mac-gallagher/Shuffle.git", from: "0.1.0"),
]

Manual

Download and drop the Shuffle directory into your project.

Requirements

  • iOS 9.0+
  • Xcode 10.2+
  • Swift 5.0+

Apps Using Shuffle

We love to hear about apps that use Shuffle - feel free to submit a pull request and share yours here!



Made with ❀️ by Mac Gallagher
(Graphic designed by Mazen Ghani)

You can’t perform that action at this time.