KSSwipeStack

KSSwipeStack is a lightweight card swiping library for iOS written in Swift.

KSSwipeStack handles any data model and the design/layout of the swipe cards are completely customizable.

Using the options provided you can customize the behavior and animations used in the swipe stack.

Features

Built-in support for:

• Custom Views
• Custom data model
• Delegate pattern
• RxSwift observables

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

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

pod "KSSwipeStack"

Getting started

Create a SwipeView

SwipeView is the container of the swipe stack.

Add a SwipeView to your Storyboard/nib and create an outlet for it.

Run setup on said SwipeView. The setup method takes a SwipeOptions parameter which you can use to modify the behavior of the stack.

swipeView.setup(options: SwipeOptions(), swipeDelegate: nil)

Create a custom class extending SwipableView

Styled to properly represent on item of your data.

class ExampleCard: SwipableView {

    override func setData(_ data: SwipableData) {
        super.setData(data)
        backgroundColor = .kicksortGray
        
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: frame.width - 100, height: 200))
        imageView.contentMode = .scaleAspectFit
        imageView.image = #imageLiteral(resourceName: "kicksortLogoInverted")
        imageView.center = center
        addSubview(imageView)
    }
}

Create a simple data model implementing the protocol SwipableData.

The protocol contains only one method, getView, in which you need to return a SwipableView.

func getView() -> SwipableView {
    let view = ExampleCard()
    view.setData(self)
    return view
}

Add cards to the stack

You can add any number of cards of any number of different types to the same stack. You add a card by simply calling addCard with a parameter implementing SwipableData.

swipeView.addCard(ExampleData())

Handle swipes

Using RxSwift

You can observe all swipe events coming from the stack using RxSwift by simply setting up an observer.

swipeView.getSwipes().subscribe(onNext: { (swipe) in
    print("RX SWIPE EVENT")
}, onError: nil, onCompleted: nil, onDisposed: nil).addDisposableTo(disposableBag)

You can also observe if the stack needs a refill based on the refill threshold provided in SwipeOptions.

swipeView.needsRefill().subscribe(onNext: { (swipe) in
    print("RX REFILL EVENT")
}, onError: nil, onCompleted: nil, onDisposed: nil).addDisposableTo(disposableBag)

Using SwipeDelegate

When setting up the SwipeView you can provide a Class implementing SwipeDelegate to handle the swipes received from the stack.

swipeView.setup(options: SwipeOptions(), swipeDelegate: self)

extension ViewController: SwipeDelegate {
    func onNext(_ swipe: Swipe) {
        dump("DELEGATE SWIPE EVENT")
    }
}

Options

Using the SwipeOptions struct you can modify the behavior ot the swipe stack.

public struct SwipeOptions {
    let throwingThreshold = Float(800)
    let snapDuration = 0.1
    let horizontalPanThreshold = CGFloat(0.5)
    let screenSize: CGSize = UIScreen.main.bounds.size
    let visibleImageOrigin = CGPoint(x: 0, y: 0)
    let rightStackOrigin = CGPoint(x: UIScreen.main.bounds.size.width * 2, y: 0)
    let leftStackOrigin = CGPoint(x: -UIScreen.main.bounds.size.width * 2, y: 0)
    let allowUndo = true
    var maxRenderedCards = 5
    var refillThreshold = 10
    var dismissAnimationDuration = 0.25
    var freezeWhenDismissing = false
    
    public init(){}
}

Specifying how 'hard' you have to throw a card for it to be dismissed.

let throwingThreshold = Float(800)

Duration of the snap-back animation

let snapDuration = 0.1

X-axis threshold for if a card is dismissed upon release.

let horizontalPanThreshold = CGFloat(0.5)

Size of the view containing the SwipeView

let screenSize: CGSize = UIScreen.main.bounds.size

Origin of a card in the 'original' state.

let visibleImageOrigin = CGPoint(x: 0, y: 0)

Where dismissed cards visually end up if dismissed to the right.

let rightStackOrigin = CGPoint(x: UIScreen.main.bounds.size.width * 2, y: 0)

Where dismissed cards visually end up if dismissed to the left.

let leftStackOrigin = CGPoint(x: -UIScreen.main.bounds.size.width * 2, y: 0)

Allow undoing of swipes.

let allowUndo = true

How many cards should be rendered in the SwipeView at the same time.

var maxRenderedCards = 5

Threshold of when a refill event is sent to refill subscribers.

var refillThreshold = 10

Duration of the dismiss animation.

var dismissAnimationDuration = 0.25

You can optionally choose to freeze the stack as a card is being dismissed to prevent the user from swiping

var freezeWhenDismissing = false

Authors

arneson, Simon Arneson, [email protected]

Sundin, Gustav Sundin, [email protected]

License

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