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 implemented without using any library. I have used the Shuffle library to implement it easily.
1. Create a new project & add a Shuffle pod in your pod file.
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 4 5 6 |
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.
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 |
func cardStack(_ cardStack: SwipeCardStack, cardForIndexAt index: Int) -> SwipeCard { return card(fromImage: cardImages[index]!) } func numberOfCards(in cardStack: SwipeCardStack) -> Int { return cardImages.count } |
|
1 |
cardStack.dataSource = self |
Full code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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