如何使iPhone应用程序上的导航栏看起来像金属的？

Question

I don't know how my client mocked up their screenshots, but they ended up with an image where the navigation bar has a kind of two-tone metallic look, like this:

But when I build the app, it ends up fading gradually from my tint colour towards white, like this:

The trouble is, the clients really like the way it looks in their mock-up. What can I do?

Answer 1

Subclass UINavigationBar . In your subclass, override drawRect: to custom-draw what you want. In your instance of UINavigationController , make sure the navigation bar is an instance of your subclass.

If you're programmatically instantiating your navigation controller, you might not be able to do this--you may have to resort to adding a category to UINavigationBar that overrides drawing for all instances:

@implementation UINavigationBar (CustomDrawing)
- (void)drawRect: (CGRect)rect {
    // ...
}
@end

It's also possible to use method swizzling to override UINavigationBar 's default behaviour, but explaining method swizzling is beyond the scope of this question.

Answer 2

On the heels of @Jonathan's answer Ray Wenderlich has a great tutorial on creating your own gradients.

Here's a snippit:

void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor, 
    CGColorRef endColor) {

    drawLinearGradient(context, rect, startColor, endColor);

    CGColorRef glossColor1 = [UIColor colorWithRed:1.0 green:1.0 
        blue:1.0 alpha:0.35].CGColor;
    CGColorRef glossColor2 = [UIColor colorWithRed:1.0 green:1.0 
        blue:1.0 alpha:0.1].CGColor;

    CGRect topHalf = CGRectMake(rect.origin.x, rect.origin.y, 
        rect.size.width, rect.size.height/2);

    drawLinearGradient(context, topHalf, glossColor1, glossColor2);

}