As an exercise in using the Core Animation API, I've implemented a little iPhone app that reproduces the behavior of the iPhone home screen's icon reorganization interface. (You know, dragging the wiggly icons around.) You can download my sample code to see how it works. Some descriptions of the highlights follow below.
The source code and Xcode project can be downloaded here: tilessample.
Source is also available on GitHub.
An instance of
Tile represents one of the icons, and is derived from
CAGradientLayer. The gradient layer properties get set to provide a gloss effect for the tiles.
Tile also provides a few animations, initiated by calling these methods:
appearDraggable: Changes the tile to be partially transparent, and makes it slightly bigger. This is invoked when the user touches a tile.
appearNormal: Reverses the effects of
appearDraggable. This is invoked when the tile is released.
startWiggling: Starts a tile "wiggling", as in the iPhone home screen while in reorganization mode.
stopWiggling: Stops the wiggling effect
TilesViewController class is pretty straightforward. When the user touches a the screen, the
touchesBegan method determines which tile was touched, calls its
appearDraggable method, and calls other tiles'
As the user drags the tile around the screen, the
touchesMoved method moves the dragged tile, and moves the other tiles as needed to provide an open space for it. Core Animation takes care of all the zooming around of the icons.
When the user lets go of the tile, the
touchesEnded method drops it in place and removes all the animations.
Things I learned from this project:
- Turning on the
masksToBoundsproperty for layers slows things down quite noticeably.
- When hit-testing layers, you have to use a layer's presentation layer, not a model layer itself.
CAGradientLayeris easy to use.
Here are some things I don't understand. (Maybe some smart person can explain.)
- When hit-testing to see which layer was touched, I had to do both
[view convertPoint:location toView:nil]. However, when handling touch-moves, I only have to use
[touch locationInView:view]. I don't understand why the coordinate systems are (apparently) different.
Update: 2012-04-16: Changed the layer-initialization code so that it draws in high resolution on a Retina display. Updated the links above to point to GitHub. The tilessample repository on BitBucket is officially abandoned.