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:
/* DESIGNATED INITIALIZER
- width = total frame width
- origin = location for the UIView frame on it's superview
- nDots = number of dots
- dots attachment point = point along width where dots will be attached
- color = dots color
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.
//XMidpoint = xValue for snapping the dots
- (void) snapDotsToXMidPoint:(CGFloat)xMidPoint;
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