Smooth gradients on iOS/OSX

Reading time ~1 minute

UPDATE: Updated for Swift, Swift 2 and packaged into a drop-in replacement for UIView.

I thought drawing gradients on iOS is easy. Well, until our designer gave me this:

I went on and implemented the drawRect: method on a custom UIView. I used CGGradient and wrote the drawing code. I ran the project in the simulator and noticed that the gradient was quite different. Ran on the device, same thing.

I played around with different colors and their positions but nothing turned out like the Photoshop gradient. After some head scratching I figured it must be something to do with how the colors are interpolated. CGGradient uses a linear interpolation of colors.

What I need is a slope (ease-in ease-out for you familiar with animation timings) function and apply that to each color component. I actually cared only about transparency so I had to only adjust the alpha channel. I needed this:

Looking at the documentation, CGGradient doesn’t support custom color interpolation. There is something called CGShading that does. The documentation is not absolutely clear on how to use it, but after some experimenting I came up with a solution, which is presented below. There is also a sample project available on GitHub so you can compare CGGradient and CGShading.

Hope somebody finds this useful!

Testing Throwable Methods in Swift 2

With the addition of error handling to Swift 2, we got a way to deal with errors with the nice try/catch exception handling syntax from m...… Continue reading

NSFastEnumeration in Swift

Published on October 01, 2014

Singleton Pattern in Swift

Published on June 07, 2014