development

As we adapt the exercise selection views for the iPhone, we used a few more tools and tricks other than Auto Layout.

• Size Classes group screens based on the amount of horizontal and vertical space available. This allows us to set different font sizes to be used within the storyboard, rather than having to do so in code. One exception was the 3.5″ screen of the iPhone 4/4s, which is the only one with the older 3:2 aspect ratio. This meant it has considerably less horizontal space, even though there is no way to isolate this screen size using size classes. We had to edit some font sizes in code just for this case.
• We use scaling and translation animations to produce the effect of zooming in on a section of the scene as the user digs deeper into the selection hierarchy. On the iPad, we used absolute scale factors and translation vectors. On the iPhone, these are calculated based on the size and position of the instrument buttons after they are automatically laid out, how large we want them to appear relative to the height of the screen (after the animation), and the approximate location we want to move them to. The translation animation differs from the iPad in that again, it is the layout constraint being modified rather than the position of the scene.

• On the iPad, the exercise cells are manually plotted except at the key selection level, so they have a loose and “random” look. We first calculate a valid content area using rules similar to those used in Auto Layout, then map the iPad coordinates directly to this different frame.