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 UIBezierPath() in UIKit 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 😊

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.

Paste the generated code into the custom UIView in Xcode

Create a UIView to put your Bézier curve in it. I created the AvatarView.swift file as a custom UIView to use in my storyboard. Paste code into the override func draw(_ rect: CGRect) 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.

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

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!

Enjoyed? Here is another Medium post that I shared my learning progress of MVVM.