How to use Bézier curve in your real-world iOS projects?

What is Bézier curve?

A Bézier curve (pronounced [bezje] in French) is a parametric curve used in computer graphics and related fields. — Wikipedia

If you are a developer, it is good to implement the UI design of an app as much as possible. Small details can affect the whole appearance of the app. The designer gives you the whole assets that you can use but sometimes you may want to draw some of the icons or components. At this point, it might be hard to draw your own custom components programmatically. Bézier curve is one of the options that help you to achieve this. There is a class called in for doing it. If you have coordinates of a path, it might be easy to apply. But what if there are no coordinates? How are you gonna draw the shape? We are not mathematicians. We don’t have so much time to draw it from scratch. Most of the time we have to be pragmatic as developers.

There are lots of tutorials that only explains how to use rectangles or stars which are simple shapes. I am going to try to explain the roadmap of using Bézier curves for creating complex shapes practically in your real-world projects with this tutorial.

Let’s begin!

Choose the design tool

In this example, we used Adobe Experience Design for designing UI’s. You can use Sketch, Adobe Illustrator or any other design tools. Only need to do is exporting the curve as a vector image file (.svg). If you are not able to draw your own graphics, you can get some help from a designer. I did so 😊

Image for post
Image for post
Adobe Experience Design

Convert vector file to Swift/Objective C

I used PaintCode to convert drawings from vector image to code. PaintCode is a paid app but there is 5 days trial. I am sure there are some alternatives that you can find them by simply searching. One of them is BézierCode.

Simply drag your svg file to the PaintCode window. It might be good to adjust your canvas frame size after dragging the svg file. Because you will paste the generated code of the curve into your custom UIView.

Image for post
Image for post
PaintCode

Paste the generated code into the custom UIView in Xcode

Create a UIView to put your Bézier curve in it. I created the file as a custom UIView to use in my storyboard. Paste code into the method to apply drawing:

After pasting the code, you can change the colors and points according to your view’s size. You may want to set them dynamically.

Add your UIView to the Storyboard

After setting the Bézier path programmatically, the final step is adding the UIView into the Storyboard or the XIB file whenever you want to use. For this example, I use Storyboard and I place it to the top of my profile view.

Image for post
Image for post

That’s all! Run and see your perfectly drawn Bézier Curve 🚀

Image for post
Image for post

You can download the example project from here:

If you like this post or found it useful, you could give a 👏 or buy me a coffee 😄 💪

Thanks for reading!

Written by

iOS Engineer at Spotify via HiQ • Outdoor enthusiast 🌳 gokhan.se

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store