Custom Shapes in iOS

Written by Michael Lee on July 1, 2014

The other day, my partner challenged me that I should draw the custom shape elements I was using for Project Z with code instead of relying on transparent PNGs that I created in Photoshop.

After some thought, I accepted the challenge and sought out how to draw custom shapes in iOS. After doing a quick search, I discovered iOS has a vector drawing class called UIBezierPath. The bezier path would be used to define the path of the new shape, and then the shape would be rendered using the CAShapeLayer class.

I was surprised to find that drawing shapes with UIBezierPath is a lot like drawing SVG shapes by hand for the web. You have commands like move to a point and then draw from one point to another point. Lately I’ve been programmatically drawing web SVGs, so creating my custom shape in iOS was pretty straightforward.

The result was great, the shape was uber crisp and I can control the fill color with floating point precision.

If you’re trying to use shapes in your iOS app, have a look at UIBezierPaths.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.