in iOS, tutorial

VBFJellyView tutorial

It’s been a while since my last post!
This month has been crazy. I went to Madrid to teach iOS 3 days (UIViews, CoreGraphics and Layers) at ironhack. It was amazing, everyone was really nice and I enjoyed it a lot.
Also I have joined minube iOS team to help them develop a new version of their app. It is a very exciting project, and it is a pleasure to work with such talented guys!

Today I am here to talk about this pretty funny little thing.
I call it: ‘The Jelly View’


After reading this post about Skype iOS app redesign I was sooooo excited with their Activity view (first video in the post) that I started my mission of replicating it using UIKit Dynamics.

Special mention to this post , he saved my live. I have to admit, I didn’t know about CADisplayLink… I was using NSTimer (you can kill me) to draw the layer… Anyway, let’s get cracking!

How does it work?

VBFJellyView subviews

The trick here is very simple: there are 9 small views connected one-to-one using UIAttachmentBehaviour. The following image shows all the subviews (in green) and the attachments in yellow.

VBFJellyView subviews snaps

The code in charge of doing all of this is nice and easy:

That will be it. Really. If you add any other behaviour (i.e. gravity, collision, etc.) it will work. Here is an example with some gravity and collision behaviours.


Adding a CAShapeLayer on top
For drawing the ‘JellyView’, I have used a CAShapeLayer. The reason is to make it easier in case you want to add some sublayers to it.
The path of the shape layer is really simple given our 3×3 square. We just need to add 4 Quadcurves (one for each edge) using the midpoint as a control point.

This is the code that takes care of this.

Adding the magic touch
The magic touch is the CADisplayLink.

A CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display.

As powerful and easy as that. The problem here was that I was unable to capture all the changes from the 9 square subviews. By drawing the CGPath as a function of the center of each square, CADisplayLink takes care of the rest.

Some examples and wrapping up
I have created a project with 4 examples to show some ideas on how to use it in your projects. I have uploaded a short youtube video showing them in action.

The examples are:

  1. Normal VBFJellyView + UIPanGestureRecognizer: I am only moving the corner points and updating the main animator with the new values for it to recalculate. The midpoints positions are updated by UIKit Dynamics, thanks to the snap behaviour.
  2. JellyButton: I have subclassed VBFJellyView and added a UITapGestureRecognizer. Once the view is touched, a push behaviour is applied to the control points (towards the outside).
  3. JellyAlert: I have subclassed VBFJellyView again and added gravity and collision behaviour. For the collision behaviour, I have added a horizontal boundary. Once the view is touched, the collision behaviour is removed and the view falls down off the screen.
  4. Normal VBFJellyView + UIPanGestureRecognizer + gravity + collision behaviours

Show me the code!!!!!
Finally, find the project in Github.

Leave a Reply