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.
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:
#import <QuartzCore/QuartzCore.h>
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.topView.layer.cornerRadius = 5;
self.topView.layer.borderWidth = 1;
self.topView.layer.masksToBounds = YES;
self.bottomView.layer.cornerRadius = 5;
self.bottomView.layer.borderWidth = 1;
self.bottomView.layer.masksToBounds = YES;
}
@end
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.
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:
UIView *gradView =
[[UIView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:gradView];
[self.view sendSubviewToBack:gradView];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = gradView.bounds;
gradientLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor blueColor].CGColor];
[gradView.layer insertSublayer:gradientLayer atIndex:0];
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.
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:
gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor, (id)[UIColor purpleColor].CGColor]; gradientLayer.locations = @[@0.0F, @0.1F, @0.2F, @0.3F, @0.4F, @0.5F];
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).
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.