CODEWITHSUNDEEP
iphoneuser-interfacecore-graphics
samvermette
samvermette

Reputation: 40437

Generate a CGGradient off a dynamic tintColor

Apple does this for most of UIKit. You just pass in a tintColor to elements and it automatically generates a nice (in most cases anyway) gradient from it.

I came across this gloss gradient function but the result is far from what I'm looking for. I know there are also UIColor extensions that add methods such as "lighterColor" and "darkerColor" but I doubt they were made to generate gradients (and therefore would produce fugly gradients).

Is there any 3rd party class or function out there that does this in similar fashion to how Apple does it?

Upvotes: 3

Views: 469

Answers (1)

Nick Farina
Nick Farina

Reputation: 4860

There are many ways to do dynamic tinting, but the easiest way is to start by drawing a prerendered grayscale image, then draw your tint color on top using kCGBlendModeOverlay. The "overlay" blend mode operates like Photoshop and is especially useful for tinting.

Here's how we draw a custom tinted navigation bar:

- (void)drawRect:(CGRect)rect {
    [[UIImage imageNamed:@"NavBar.png"] drawInRect:rect]; // grayscale untinted version
    UIColor *tint = [UIColor colorWithRed:1 green:0.5 blue:0.5 alpha:1]; // arbitrary
    [tint set];
    UIRectFillUsingBlendMode(rect, kCGBlendModeOverlay);
}

You can preview tint colors directly in Photoshop by just creating a layer with your color as a solid fill with Overlay blend mode.

Apple's particular technique for tinting UINavigationBar and friends seems to be a combination of tint color fill plus overlays of pre-rendered gradient images with names like "UITintedTopBarHighlightFlat.png" found in the system artwork file.

Upvotes: 4

Related Questions