Creating iOS Custom Views in UIKit
I first started working with iOS fresh out of university. Working with an unfamiliar platform and programming language was challenging. What really made me nervous, was the designs coming from the creative team. I know a great design can breathe new life into a website, but unique high concept designs often require the creation of iOS custom views in UIKit.
As a new developer (that was me at the time!), this can be pretty daunting. So the aim of this article is to help any developer convert designs into a functional user-interface elements.
Table Of Contents
iOS Custom View
Views are the fundamental building blocks of your app’s user interface. Normally, you create views in your storyboards by dragging them from the library to your canvas. But, sometimes you need to create an element that is not available using the standard ‘label’ or ‘button’ elements in UIKit. This is when you need a custom view.
By the way, if any of the terminology in this article sounds unfamiliar, you might want to check out Apple’s UIKit documentation. From now on, I’ll just assume you have a working knowledge of UIKit and Swift.
The Initial Design
Let’s start by picking a design that cannot be recreated within the standard UIKit view. I found this Circular Progress Bar, designed by Geng Gao, which fits the bill perfectly.
This element is composed of two text labels (the title and subtitle) and a circular completion indicator that is intended to fill a gray track as the task progresses. We’ll start by creating a new Xcode project and naming it CircularProgressBar.
