Fixed Gradient Strips

Last time I posted my solution to custom annotations on iOS. In the week since I have had a chance to refine that solution a bit. While it's still not ready for prime time it keeps edging closer. The most recent issue I have tackled is how to make the custom annotation window have a very similar look to that of the standard annotation window. You know the look .. translucent gradient on top with a slightly more opaque solid color on bottom. Sounds easy, right? Well it is easy when all of your annotation windows are the same height. But what would be the point of a custom annotation window with a fixed height?

I could use a standard gradient strip and stretch it to the height of the window, but that would mean the gradient would appear to peak at different heights on different sized windows. Too sloppy. Instead I created a fixed size gradient strip about the same height as the one you see on the standard annotation window .. I chose 26 points. When loading my custom annotation window I build two background views: upperView and lowerView. The upperView is 26 points high and uses the gradient strip as it's tiled background. The lowerView is the remaining height of the view (self.bounds.size.height - 26) and has a solid color the same as the ending color of the gradient. This produces a satisfying and consistent annotation window regardless of the overall height.

This is a simple solution to my problem. Got your own ideas about how to solve this? Leave me a note and tell me what you think.