Upward Mobility: Special Effects Wizardry

Dress up your UIViews with a few simple tricks

Most developers aren’t great UI designers (although, as with everything, there are exceptions). But there are a few quick tricks that can dress up an app, even if you don’t eat and breathe Photoshop. Let’s look at a simple iPad single-view app with two views, each of which contains a label and a text box.

iOS Simulator Screen shot May 20, 2013 7.05.42 AM

This is about as Plain Jane as you can get in an application; the only concession to visual appeal that has been made is to use a grey background with white UIViews bounding the labels and text boxes. One easy tweak we can use is to make the UIView corners rounded instead of square, which will lend a bit of flare to the design.

This is actually harder than it should be. To set rounded corners, you need to dig down into the CALayer underneath the view:

You need to set masksToBounds, because otherwise the corners will not be transparent, and the background color of the view will block whatever is beneath it in the parent view. The resulting view is subtly more classy. You can get more rounding by adjusting the cornerRadius value.

Screen Shot 2013-05-20 at 7.17.42 AM

 

So far, so good. But that solid grey background is kind of blah, so we should dress it up a bit. An easy way to make a background pop is to use a gradient fill, a technique that the aforementioned Photoshop jockeys know and love.

A gradient is simply a series of transitions between colors. The best way to demonstrate is by example:

What we’ve done here is to create a new view with the same size as the top level view, stick it at the back of the z buffer for the parent view, then create a gradient layer that transitions from red to blue, and insert that layer into our new view. Note that you need to include the QuartzCore framework in your app for this to compile. What we end up with is the world’s ugliest gradient.

iOS Simulator Screen shot May 20, 2013 7.47.20 AM

By default, the gradient is assumed to start at the top with the first color, and end at the bottom with the second. But you can use more than one color, and specify exactly where you want the transitions to occur. For example, we can make our background more rainbow-like:

Now we’re using six colors instead of two, and specifying where (on a line from 0 to 1, where 0 is the top) we want each of the color breaks to occur. Because the last value is only halfway down the screen, the last color will be displayed as a solid color from that point on. The resulting view is truly eye-catching (or eye-bleeding, perhaps).

 iOS Simulator Screen shot May 20, 2013 8.01.19 AM

If you show this to your UI designer, you’ll get to hear all sorts of interesting sounds that you normally don’t hear in homo sapiens. Then he or she will probably make you do something boring like a transition from dark blue to white.

 

tags: ,

Get the O’Reilly Programming Newsletter

Weekly insight from industry insiders. Plus exclusive content and offers.