This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Creating a Polished Steel Effect in iOS

3 MINUTE READ | August 14, 2012

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.

polished steel ios buttons

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];

Insights meet inbox

Sign up for weekly articles & resources.

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


Posted by PMG Advertising Agency

Related Content

thumbnail image

Get Informed

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

Get Informed

Applying Function Options to Domain Entities in Go

11 MINUTES READ | October 21, 2019

thumbnail image

Get Informed

My Experience Teaching Through Jupyter Notebooks

4 MINUTES READ | September 21, 2019

Get Informed

Trading Symfony’s Form Component for Data Transfer Objects

8 MINUTES READ | September 3, 2019

Get Inspired

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

Get Informed

Parsing Redshift Logs to Understand Data Usage

7 MINUTES READ | May 6, 2019

Get Inspired

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

Get Informed

Testing React

13 MINUTES READ | March 12, 2019

Get Inspired

Tips for Designing & Testing Software Without a UX Specialist

4 MINUTES READ | March 6, 2019

Get Informed

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

All POST