Skip to content

🔥 A multi-directional card swiping library inspired by Tinder

License

Notifications You must be signed in to change notification settings

mac-gallagher/Shuffle

Repository files navigation


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

Made with ❤️ byMac 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 theShuffleExampletarget.

Basic Usage

  1. Create your own card by either subclassingSwipeCardor setting its properties directly:

    funccard(fromImage image:UIImage)->SwipeCard{
    letcard=SwipeCard()
    card.swipeDirections=[.left,.right]
    card.content=UIImageView(image:image)
    
    letleftOverlay=UIView()
    leftOverlay.backgroundColor=.green
    
    letrightOverlay=UIView()
    rightOverlay.backgroundColor=.red
    
    card.setOverlays([.left:leftOverlay,.right:rightOverlay])
    
    returncard
    }

    The card returned fromcard(fromImage:)displays an image, can be swiped left or right, and has overlay views for both directions.

  2. Initialize your card data and place aSwipeCardStackon your view:

    classViewController:UIViewController{
    letcardStack=SwipeCardStack()
    
    letcardImages=[
    UIImage(named:"cardImage1"),
    UIImage(named:"cardImage2"),
    UIImage(named:"cardImage3")
    ]
    
    overridefuncviewDidLoad(){
    super.viewDidLoad()
    view.addSubview(cardStack)
    cardStack.frame=view.safeAreaLayoutGuide.layoutFrame
    }
    }
  3. Conform your class toSwipeCardStackDataSourceand set your card stack'sdataSource:

    funccardStack(_ cardStack:SwipeCardStack,cardForIndexAt index:Int)->SwipeCard{
    returncard(fromImage:cardImages[index])
    }
    
    funcnumberOfCards(in cardStack:SwipeCardStack)->Int{
    returncardImages.count
    }
    cardStack.dataSource=self
  4. Conform toSwipeCardStackDelegateto subscribe to any of the following events:

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

    Note:didSwipeCardAtanddidSwipeAllCardsare called regardless if a card is swiped programmatically or by the user.

Card Stack Actions

The following methods are available onSwipeCardStack.

Swipe

Performs a swipe programmatically in the given direction.

funcswipe(_ direction:SwipeDirection,animated:Bool)

Shift

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

funcshift(withDistance distance:Int=1,animated:Bool)

Undo

Returns the most recently swiped card to the top of the card stack.

funcundoLastSwipe(animated:Bool)

Card Layout

EachSwipeCardconsists of three UI components: itscontent,footer,andoverlay(s).

Content

The content is the card's primary view. You can include your own card template here.

varcontent:UIView?{getset}

Footer

The footer is an axuilliary view on the bottom of the card. It is laid out above the content in the view hierarchy if the footer is transparent. Otherwise, the footer is drawn just below the content.

varfooter:UIView?{getset}
varfooterHeight:CGFloat{getset}

Overlays

An overlay is a view whose Alpha value reacts to the user's dragging. The overlays are laid out above the footer, regardless if the footer is transparent or not.

funcoverlay(forDirection direction:SwipeDirection)->UIView?
funcsetOverlay(_ overlay:UIView?,forDirection direction:SwipeDirection)
funcsetOverlays(_ overlays:[SwipeDirection:UIView])

Advanced Usage

For more advanced usage, including

visit the documenthere.

Installation

CocoaPods

Shuffle is available throughCocoaPods.To install it, simply add the following line to yourPodfile:

pod 'Shuffle-iOS'

The import statement in this case will be

import Shuffle_iOS

Carthage

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

github "mac-gallagher/Shuffle"

Swift Package Manager

Shuffle is available throughSwift PM.To install it, simply add the package as a dependency inPackage.swift:

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

Manual

Download and drop theSourcesdirectory 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 ❤️ byMac Gallagher