Creating a Polished Steel Effect in iOS

Have you ever wanted to have a polished steel button in your iOS apps? Whether it be for a shiny chrome button, or to customize the basic slider to match the interface of your app, this kind of effect is often very good at giving a more tactile feel to your virtual environment.

This is a fairly easy effect to create in an application like Adobe Photoshop. All it requires is an angle gradient with multiple different points light and dark points, and possibly a few other gradients with low opacity over top. Depending on the shape of the button and the exact effect you’re looking for. Unfortunately, if at any point during the development process you realize you need one of your shiny metal elements to be a different size, or you realize you want that button to be able to fit into array of many different heights and widths, you have to go back into Photoshop and resize all of your images, possibly creating entirely new one’s for each size.

My thought, why not draw it in code? Well, as I’ve talked about in previous posts, Core Graphics has a very useful CGGradient object that you can use to draw gradients. Unfortunately, it only works with Linear and Radial gradients. What we need is an Angle Gradient. So, why not write our own? Well, lucky for us, we don’t have to!

As it turns out, I was able to find Pavel Ivashkov (after doing a fair amount of searching myself), who just happened to do all of the legwork for us! Not only that, but he posted all of the source code on a public git repo for all the world to enjoy!

His repository includes a sample project showcasing how to use the AngleGradientLayer class as the actual layer for a UIView. However, if you want to instead draw it inside of Core Graphics it’s not much more complicated.

- (void)drawRect:(CGRect)rect

{

[super drawRect:rect];

NSMutableArray *colors = [[NSMutableArray alloc] initWithCapacity:16];
NSMutableArray *locations = [[NSMutableArray alloc] initWithCapacity:16];

for (int i = 0; i < 5; i++) {
[colors addObject:(id)[UIColor colorWithRed:252/255.0 green:253/255.0 blue:203/255.0 alpha:1].CGColor];
[colors addObject:(id)[UIColor colorWithRed:250/255.0 green:96/255.0 blue:53/255.0 alpha:1].CGColor];
[locations addObject:[NSNumber numberWithFloat:(0.2 * i)]];
[locations addObject:[NSNumber numberWithFloat:(0.2 * i + 0.16)]];

}
[colors addObject:(id)[UIColor colorWithRed:252/255.0 green:253/255.0 blue:203/255.0 alpha:1].CGColor];
[locations addObject:[NSNumber numberWithInt:1]];

AngleGradientLayer *angle = [[AngleGradientLayer alloc] init];
angle.colors = colors;
angle.locations = locations;

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClipToRect(context, self.bounds);
[angle drawInContext:context];

[colors release];
[locations release];
[angle release];
}