in iOS

New custom control: Dots Selector

Hi guys,

Seems like I am enjoying posting lately. That is good! I feel good to be back :D

Today I have been fighting for at least 3 hours to get this new custom control to work. As I mentioned before, I am working on a new app (the interface won’t be as crazy as WakeUp’s). I would like to move it forward as quick as possible and I am “wasting” (enjoying?) some of my holidays to do it.

Check the result on the following video (still need to tweak some values).

 

 

Yes, you are right. I have spent 3 hours moving some balls around the screen… But playing with UIKit Dynamics it’s just lots of fun!

I am not going to publish the code yet. I will do it once the app is on the App Store. However, let me explain how I have done it, so you can give it a go if you’d fancy.

The basic setup is a toolbar with X items. The funny bit is the little balls underneath the items. I am not going to lie, I have been inspired by the new Spotify app. If you go to “your music”, you will see how cool their toolbar is.

The “Dots Selector” class, as I have named it, it is a UIView with the following designated initializer:

As I am doing an universal app, I need the control to allow for different widths. The control can take as many tiny dots as you want, any color and just needs an X value to locate it. About the diameter of the dots, it can be changed easily on the .m (I am using a macro). Once you have done that, to move the dots you just need to call the following method with a new X value.

What’s going on behind the scenes?
The power of UIKit Dynamics :D
What I have done is add an attachment behaviour from one dot to the next. Then, based on where the new X value is, I add a new snap behaviour to either the first dot (left) or last dot (right).
However, it is not as simple as that… I had to add some guides using a collision behaviour to keep the balls “on track” and spent a looooooooooooooong time playing with the snap and attachment behaviours values.

That’s all for now guys! Will keep you in the loop. Wish me luck for this new app!! :D

Leave a Reply