iPhone / iOS custom control
I would like to know how to create a custom iPhone control from scratch, or using an existing library or framework.
I have seen the three20 library, aswell as tapku and touch customs which are nice for specialised iOS controls such as table view etc but I'm talking about making totally custom, interactive controls here.
Lets say I wanted to make a dial control similar to the one from this app: http://store.apple.com/us/product/H2654LL/A.
Where would I start?
- Would I subclass UIView and customize it?
- Would I use quartz 2d?
- Would I use OpenGL ES to draw something like this to the screen?
- Can I still use IB to design/layout my custom view?
I'm just a bit confused which way to go here.
Yes - this question has been asked and answered a few times before, but I am yet to find a satisfactory answer which addresses the above points.
Answer
What to subclass
Instead of UIView you would probably want to subclass UIControl. This class has functionality for the Target/Action pattern build in which you can use to respond to actions generated by your custom control. Most elements on UIKit like buttons and sliders inherit from UIControl for this specific reason.
Visualizing your subclass Drawing really depends on what you want to achieve and what parts you want to animate. You can use images, draw using quartz or OpenGL depending on what you need or what you prefer. Just use the technique to achieve the desired effect in the most simplistic way. Multiple images can be used to handle different states (pressed, etc) or be used for a sprite animation. CALayers are nice to easily rotate or move.
No matter what technology you use, you would probably use incoming touch events to control the animation. In case of a dial control you would control the amount of rotation based on y coordinate movement for example.
To illustrate: I for example have used images if my control only needed to change when pressed for example: just swap the images. I also like to use CALayer a lot which gives you easy ways to generate borders, masks, gradients and a corner radius, all easily animated too.
Using in Interface Builder With Cocoa on the desktop it was possible to build custom IB palettes for custom controls. iOS never had this functionality and I don't thing the IB plugins are available for Xcode 4.
So the only way to handle custom subclasses currently is by using a UIView in IB and setting the 'Custom class' field in the Identity Inspector to the name of your custom class. This way you have a view you can layout and size. In Interface Builder it's just a rectangle, when running your app the XIB will actually deserialize that view to your custom class.
When using a UIControl you get the target/action mechanisms for free. So you can wire up your touch events to any object in IB just like with any other standard UIKit control.
One thing to note: if you have custom - initWith....: selectors, those will not be called. Your class is deserialized from the XIB so you should use - initWithCoder:(NSCoder *)aDecoder; as initialization.