Now that we have mastered pinning our UI in place, how about some dynamic resizing? Time to set our course straight and true, Warp factor 5, Mr. Sulu. (Darn it! That's Star Trek, not very nautical is it?)
In a lot of UI designs, it is just not enough to have objects drawn in a particular position; we want them to always fill a particular portion of the screen, say 50 percent of the width. In these cases, just having it in a fixed place is no good if the screen resizes down below the width of the element we are trying to draw.
As an example, let's wipe out what we have done so far and build a health bar. The requirements set down by our really critical graphics designer are as follows:
It should always be centered at the top of the screen.
It should have a 20-pixel space between the top of the screen and the health bar.
- It should take up approximately 50 percent of the width of the screen on all devices. (But I'm targeting Android; that's impossible! Far too many resolutions...