Creating a Tinder-Like Swiping Interface

Fire up Xcode to create a new Single View Application using UIKit. I’m not a big fan of storyboards, so I’ll be creating all of the views programmatically.

Disclosure : During the development of this project, I came across this excellent piece that showcases how to build a stack of Tinder-like cards with swiping gesture capabilities and have used it as kickstarter.

To start off, let's create a custom view — TinderCard.swift —as shown below:

Besides setting up our swipeView on which we’re setting a unique color from the DataModel (more on this next), we’ve added the UIPanGestureRecognizer to the above custom view with a certain threshold, beyond which the swipe is taken into consideration and the custom delegate function( swipeDidEnd ) is called to remove that card from the stack.

Data Model

The data model currently just holds a color property. You can further customize this by adding images and text to make it similar to actual Tinder cards:

import UIKit struct DataModel {



var bgColor: UIColor



init(bgColor: UIColor) {

self.bgColor = bgColor

}

}

Custom Protocols

We need to create a couple of protocols. One for the data source, and the other for handling the swipe gesture actions. Both of them are defined below:

import UIKit protocol SwipeCardsDataSource {

func numberOfCardsToShow() -> Int

func card(at index: Int) -> TinderCardView

func emptyView() -> UIView?



} protocol SwipeCardsDelegate {

func swipeDidEnd(on view: TinderCardView)

}

The swipeDidEnd function that’s invoked on the delegate in the custom view we saw earlier triggers the stack container (which holds the stack of swipe cards). Let’s look at the StackContainerView.swift class:

The StackContainerView class above is responsible for holding the group of TinderCardViews . With every swipe, it checks the data source (that’s defined in the ViewController ) for remaining cards (if there are any), and adds them to the bottom of the stack.

Before we plug in the above container view into our ViewController , here’s a glimpse of the Tinder-like card swiping interface in action:

Next up, Setting Up Buttons!

Moving forward, we need to set up our ViewController with the above StackContainer and Buttons that could simulate the swiping gesture animation when pressed. Let’s do that in the next section.

Simulate a Swiping Gesture Programmatically

To simulate a swiping gesture upon a button click, we need to animate our Tinder card views horizontally, with an affine transformation to bring about the angle to mimic the action of swiping right or left in real life.

In the following ViewController.swift code, we’ll set up our like and dislike buttons and plug the data source onto the stack container custom view.

To pass the modelData from the ViewController to the StackContainerView , we’ve conformed to the protocol by:

stackContainer.dataSource = self

Subsequently, we need to implement the methods of the SwipeCardsDataSource protocol, as shown below:

extension ViewController : SwipeCardsDataSource {



func numberOfCardsToShow() -> Int {

return modelData.count

}



func card(at index: Int) -> TinderCardView {

let card = TinderCardView()

card.dataSource = modelData[index]

return card

}



func emptyView() -> UIView? {

return nil

}

}

Creating our Custom Buttons

The implementation of the addButtons function that’s invoked in the viewDidLoad method is as follows:

The onButtonPress selector function is where we’ll simulate our swipe left and right gestures, as shown below:





if let firstView = stackContainer.subviews.last as? TinderCardView{

if sender.tag == 0{

firstView.leftSwipeClicked(stackContainerView: stackContainer)

}

else{

firstView.rightSwipeClicked(stackContainerView: stackContainer)

}

}

} @objc func onButtonPress(sender: UIButton){if let firstView = stackContainer.subviews.last as? TinderCardView{if sender.tag == 0{firstView.leftSwipeClicked(stackContainerView: stackContainer)else{firstView.rightSwipeClicked(stackContainerView: stackContainer)

The leftSwipeClicked and rightSwipeClicked functions are implemented in the TinderCardView class. The code for the leftSwipeClicked function is given below:

func leftSwipeClicked(stackContainerView: StackContainerView)

{

let finishPoint = CGPoint(x: center.x - frame.size.width * 2, y: center.y)

UIView.animate(withDuration: 0.4, animations: {() -> Void in self.center = finishPoint

self.transform = CGAffineTransform(rotationAngle: -1) }, completion: {(_ complete: Bool) -> Void in

stackContainerView.swipeDidEnd(on: self)

self.removeFromSuperview() })

}

The right swipe is analogous to the above code. Instead of doing an affine transformation with the rotation angle set as -1, you need to do the same with the rotation angle set to + 1 to show the tilt towards the right side.

Let’s look at what we’ve achieved so far: