Swipe Cards in swift.

We have all seen views in dating apps where we can just swipe left or right to accept or reject something. If you are bored with table views and collection views, you can use Swipe cards. The whole card swiping idea is now used in tons of apps. Let’s check how can we implement card swipe in swift.

Now, we are implementing Swipe cards in swift and it’s pretty easy to implement in swift. I have used a third party library named shuffle but it can be implement without using any library. I have used Shuffle library to implement it easily.

1. Create a new project & add shuffle pod in your pod file.

pod 'Shuffle-iOS'

1	pod 'Shuffle-iOS'

2. Now install the pod & import it into your view controller.

3. Create a view named swipeView in the storyboard.

4. Now create a card function taking an image as a parameter & returning SwipeCard.

  func card(fromImage image : UIImage ) -> SwipeCard{
        let card = SwipeCard()
        card.swipeDirections = [.left, .right]
        card.content = UIImageView(image: image)
        
        let leftOverlay = UIView()
        leftOverlay.backgroundColor = .green
        
        let rightOverlay = UIView()
        rightOverlay.backgroundColor = .red
        
        card.setOverlays([.left:leftOverlay, .right:rightOverlay])
        
        return card
    }

func card(fromImage image : UIImage ) -> SwipeCard{

let card = SwipeCard()

card.swipeDirections = [.left, .right]

card.content = UIImageView(image: image)

let leftOverlay = UIView()

leftOverlay.backgroundColor = .green

let rightOverlay = UIView()

rightOverlay.backgroundColor = .red

card.setOverlays([.left:leftOverlay, .right:rightOverlay])

return card

}

Create left & right overlays and set them on card overlays. The card returned from card(fromImage:) displays an image, can be swiped left or right, and has overlay views for both directions.

5. Add multiple images in the asset & create an array of card images.

    let cardImages = [
          UIImage(named: "cardImage1"),
          UIImage(named: "cardImage2"),
          UIImage(named: "cardImage3"),
          UIImage(named: "cardImage4")
      ]

let cardImages = [

UIImage(named: "cardImage1"),

UIImage(named: "cardImage2"),

UIImage(named: "cardImage3"),

UIImage(named: "cardImage4")

]

6. Initialize your card data and place a SwipeCardStack on your view in viewdidload.

 let cardStack = SwipeCardStack()

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        swipeView.addSubview(cardStack)
        cardStack.frame = swipeView.safeAreaLayoutGuide.layoutFrame
        
    }

let cardStack = SwipeCardStack()

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

swipeView.addSubview(cardStack)

cardStack.frame = swipeView.safeAreaLayoutGuide.layoutFrame

}

7. Conform your class to SwipeCardStackDataSource and set your card stack’s dataSource.

  func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {
        return card(fromImage: cardImages[index]!)
    }
    
    func numberOfCards(in cardStack: SwipeCardStack) -> Int {
        return cardImages.count
    }

func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {

return card(fromImage: cardImages[index]!)

}

func numberOfCards(in cardStack: SwipeCardStack) -> Int {

return cardImages.count

}

cardStack.dataSource = self

1	cardStack.dataSource = self

Full code:

import UIKit
import Shuffle_iOS

class ViewController: UIViewController, SwipeCardStackDataSource {
    func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {
        return card(fromImage: cardImages[index]!)
    }
    
    func numberOfCards(in cardStack: SwipeCardStack) -> Int {
        return cardImages.count
    }
    
    
    
    @IBOutlet weak var swipeView: UIView!
    let cardStack = SwipeCardStack()
    
    let cardImages = [
          UIImage(named: "cardImage1"),
          UIImage(named: "cardImage2"),
          UIImage(named: "cardImage3"),
          UIImage(named: "cardImage4")
      ]
    

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        swipeView.addSubview(cardStack)
        cardStack.frame = swipeView.safeAreaLayoutGuide.layoutFrame
        cardStack.dataSource = self
    }

    
    
    func card(fromImage image : UIImage ) -> SwipeCard{
        let card = SwipeCard()
        card.swipeDirections = [.left, .right]
        card.content = UIImageView(image: image)
        
        let leftOverlay = UIView()
        leftOverlay.backgroundColor = .green
        
        let rightOverlay = UIView()
        rightOverlay.backgroundColor = .red
        
        card.setOverlays([.left:leftOverlay, .right:rightOverlay])
        
        return card
    }

}

import UIKit

import Shuffle_iOS

class ViewController: UIViewController, SwipeCardStackDataSource {

func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard {

return card(fromImage: cardImages[index]!)

}

func numberOfCards(in cardStack: SwipeCardStack) -> Int {

return cardImages.count

}

@IBOutlet weak var swipeView: UIView!

let cardStack = SwipeCardStack()

let cardImages = [

UIImage(named: "cardImage1"),

UIImage(named: "cardImage2"),

UIImage(named: "cardImage3"),

UIImage(named: "cardImage4")

]

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

swipeView.addSubview(cardStack)

cardStack.frame = swipeView.safeAreaLayoutGuide.layoutFrame

cardStack.dataSource = self

}

func card(fromImage image : UIImage ) -> SwipeCard{

let card = SwipeCard()

card.swipeDirections = [.left, .right]

card.content = UIImageView(image: image)

let leftOverlay = UIView()

leftOverlay.backgroundColor = .green

let rightOverlay = UIView()

rightOverlay.backgroundColor = .red

card.setOverlays([.left:leftOverlay, .right:rightOverlay])

return card

}

Output:

Conclusion:

This is how we swipe cards in swift. You can use more of its properties.

Thanks for reading this article ❤

If I got something wrong 🙈, let me know in the comments. I would love to improve.

For more interesting blogs check out here – https://mobikul.com/blog/

Reference link: https://swiftobc.com/repo/mac-gallagher-Shuffle-swift-cards

nausheen Siddiqui 30 June 2022

. . .

Swipe Cards in swift.

Full code:

Output:

Conclusion:

Leave a Comment Cancel Reply

Message Sent!