How to create a Custom View — Andriy Vahniy

NerdzLab
NerdzLab
Jun 22, 2019 · 5 min read

Every iOS application starts from creating new Xcode project. It contains three files:
1. Main.storyboard where you can create UI components
2. ViewController that is connected to storyboard
3. AppDelegate — class that capturesApplication Lifecycle events.

But what about other components that each developer is using at his routine work?

Let’s talk about Custom classes. In our company NerdzLab we use custom classes for all elements like UIViewControllers, UIViews, UIButtons. Let’s talk about Custom classes, specifically UIView.

What is a Custom View?

Custom View, in most cases, created by two files: visual file(either storyboard or xib) & .swift file for customizing this elements from code and adjust some logic.
Before we continue, let’s download base project that will help us creating utility class for easy connection between xib casual element and Swift view class.

Base Project: https://github.com/AndriyVahniy/BaseApp.git

Now let’s make some code magic.
We will use Xcode version 10.2.1 & Language Version Swift 5.

Create new folder CoreClasses & paste inside base UIView. Let’s name it AppView. Override two init methods where we will add custom view from XIB file. Your class should look like this:

Create new folder Extensions & add:
1. Extension for NSObject which returns class name

2. Extension for UIView which loads view from Nib. Note that xib name and class name should be the same

3. Extension for UIView that stretches our view using constraints

Return to our AppView class & modify setupView() function

HOORAY! Our Base UIView is ready! Now it’s time to test our class & create custom UIView.

TASK: We have to create custom bottom view which we could use in a few controllers with a different text.

Create CustomView:

Create new folders Views & BottomView.
Add new files BottomView.swift & BottomView.xib.

Inside BottomView.swift:

  1. Final class modifier prevents from being inherited or being overridden. Aslo it has better performance during project compilation.
  2. Private access control hides internal implementation from other classes.
  3. @IBInspectable gives us possibility to setup data from Interface Builder. Getter & Setter help to configure text label.

Inside BottomView.xib:

  1. Configure UI according to your design.
  2. Select File’s Owner. Tap on Identity inspector & select BottomView class.
  3. Tap on Connections inspector & connect @IBOutlets with code.

Cool! Our custom view is ready. Now we will use it inside our view controllers.

Use custom view inside Interface Builder:
1. Open Main.storyboard
2. Open FirstViewController
3. Add new UIView & connect it to bottom using constraints
4. Change new UIView class name to BottomView

5. Thanks to @IBInspectable property of our BottomView we can set title label from Interface Builder. Open Attributes Inspector bookmark & fill Text Input field with “FirstViewController”

Finally, run the project & check your first controller. It should look like view from task.

Use custom view inside code:
1. Open SecondViewController.swift file.
2. Add function that will create our BottomView (remember we created extension to NSObject? We will use it again to get controller name & pass inside bottomView).

3. Add function that will layout bottom view on controller view

4. Add function that will add bottomView to controller view. Call this function inside viewDidLoad()

If you don’t forget to use extensions & MARKs your code could look like this:

Run your code, push secondViewController & check if everything is ok.

Conslusions

We learned how to:
1. build extensions for different classes
2. create final classes & why we need this
4. use @IBInspectable property
3. create custom UIView with .xib file.
4. use custom views from code & Interface Builder
5. write clean code

Final project: https://github.com/AndriyVahniy/FinalBaseApp.git

If you like this article press claps, share it with your friends, leave your feedback. If you don’t like this article definitely leave feedback. We believe that more info developers will share the better apps we will create!

There is one more interesting attribute — @IBDesignable. If you put this attribute before class of final class you will have a possibility to see your custom view inside Interface Builder like other default classes with all views & designed elements. But, it crashes in 90% of the cases, thats why we don’t recommend to use it.

Thats it, thank you for reading, see ya & to be continued…

NerdzLab

Written by

NerdzLab

For ideas never seen before. https://casestudies.nerdzlab.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade