For myDrumPad the main pad buttons are images. I create a UIButton object, and use setBackgroundImage:forState: to customize which image will be used for each state (UIControlStateNormal and UIControlStateHighlighted mainly). I customize the title label font, shadow and color, and voilà I have a pad button that simulates the look and feel of a Korg padKONTROL. There’s just a few small problems with it.
- The images on the iPad are fairly large, and memory is at a premium.
- The size of these buttons can change in portrait vs. landscape. It’s time-consuming to export different versions from Photoshop for the different orientations.
- The buttons are sized differently depending on the size of the button grid (e.g. a 3×3 grid of buttons have larger images than 4×4 or 5×5 grids). If I resize these images on-the-fly, then the edges look blurred and aren’t well-defined.
- The retina display complicates all of this, meaning I have to have two versions of each image.
- I want to be able to customize the buttons to have different colors when you’re on different drum sets.
Because of that long list, simply using an image isn’t good enough. But instead of drawing my images using regular Core Graphics drawing routines, I’m going to use Core Animation Layers, or CALayers, to accomplish the same thing. Ultimately I want my buttons to be able to be animated, to change color, and to feel more “alive” than a static image could accomplish.Read More »Rendering views using CALayer, Part 1