UIKit Dynamics in the real world

Swiping right on simpler code 😏

UIDynamics have been available since iOS 7, and its a very powerful tool that allow us to create complex interactions pretty simply. For example, the iPad’s Picture on Picture feature is done using UIFieldBehavior, maybe we will cover that in another article.

In this article we will explore recreating the famous but yet overused Tinder UI. There are tons of libraries out there that provide this functionality, but they are all based on some really complex logic around moving the views and then resetting them into their original position. Hundreds of lines of code later we have something similar to Tinder, but it doesn’t seem right. We can do something way simpler.

You can download the final project on GitHub.

Enter UIDynamicAnimator

The definition of UIDynamicAnimator is very straightforward, it reads:

An object that provides physics-related capabilities and animations for its dynamic items, and provides the context for those animations.

By using physics as the constraints you apply to your views UIDynamic is able to calculate and animate them accordingly. We will use this to our advantage when recreating the Tinder swipe animation.

Breaking down the Tinder UI into physics, leaves us with only two items: cards snap back into position if let go, and cards can be push around with your fingers using force. The latter is a simple UIPanGestureRecognizer, for the former we need to talk a bit about UIDynamicBehavior.

Applying rules to the animator with UIDynamicBehavior

Behaviours are the iOS provided way to tell a view (an UIDynamicItem) how to perform its physics based animations. At the moment of this writing there are several of them

https://developer.apple.com/documentation/uikit/uidynamicbehavior

That last one looks really suspicious, an UISnapBehavior is exactly what we discussed before about how the Tinder card effect works. That was our last piece of the puzzle, we can jump into some code now.

Panning a view around the screen

The first step in order to achieve the effect is to allow users to drag the view with their fingers. This can be achieved using several techniques, we will focus on our old friend UIPanGestureRecognizer, and it looks something like this.

You are a pro, you already knew how to do this

If we compile and run the project, the result will be something like this.

Panning

That is not bad, but the nicest part about the Tinder UI is how the card snaps back into place when you let go, it gives it a sense of joy to the app. Allows you to play around with the view before deciding to swipe left or right. This is where most tutorials out there fall short, they resort to complex pieces of code in order to achieve this, we will do it with just 5 lines of code.

The 5 magical lines of code

Yup, UIDynamicBehavior and specifically UISnapBehavior do a lot of the heavy lifting for us. In order to make the card snap back into place all we need to do is:

• Create an instance of UIDynamicAnimator, which requires you pass the reference view that will hold all behaviours and animations. This is most likely the root view of the view controller, since all UIDynamicItem views must be a subview of the reference view.
• Create an instance of UISnapBehavior, pass our cardView and the position on the screen we want it to snap to.
• Add the behaviour to our previously created UIDynamicAnimator instance.

That is pretty much it, our view will snap into place now. But there are some tweaks required. In order to prevent the UISnapingBehavior to conflict with the pan gesture. We need to deactivate and active the snapping at will, thankfully UIPanGestureRecognizer has the states we need.

Now, implementing all of this is as easy as doing:

Our final result

Not a lot as changed, we only added the appropriate instances mentioned in the previous list and we listen to the .began and .ended states in order to stop the behaviour to prevent conflicts with the panning.

Compile and run the project and you will have something like this:

Panning and snapping

That is all 👋. There are obviously some items missing to make it into a full Tinder UI, we need to detect our far to the right and to the left of the view we are. That can be accomplished pretty easy in our pannedView method. As an added bonus try adding a UIPushBehavior when you swipe right or left on the view, that way it will look like it flew away.

Get in touch on Twitter: @raulriera

raulriera/technical-articles