UIView Custom Class From XIB

Creating a Custom UIView Class

How to create a Custom UIView Class from XIB?

iOS Tutorials: Custom UIView Class
Custom UI-View Class

When we are developing a project or an application many times we come to a situation where we need to configure UIView elements and we end up writing the code in each and every controllers. This leads to a lot of code, and also if there is a small change from clients then we need to change it at each and everywhere.

The solution to this is to create a Custom UI-View class and assign it to the desired UI-View on Storyboard. Even if there is a small change or a big one it can be done from a single place. In this article, we will demonstrate you how to get started with this.

Getting started with creating a custom UIView Class.

To get started we will create a New Xcode Project.

  • Start a Single View App on Xcode.
Create Single View App
Create Single View App
  • Give the Product Name as desired we have given the Product Name as “CustomViews“.
CustomViews Project
CustomViews Project
  • Save the project to the desired Directory.
Custom UIView Class Save Project
Custom UI-View Class Save Project

We are done with creating a started project.

Custom UIView Project
Custom UI-View Project
  • Search for UIView in the Object Library.
Create a UIView
Create a UIView
  • Drag and Drop the View on the storyboard and position them as desired.
UIView Positioning
View Positioning
  • Set Auto layouts accordingly.
Add Constraints
Add Constraints

Now we will start creating a custom class for the view we dragged here in the XIB.

  • Create a new file named as MyCustomView subclass of UIView.
  • Step:1 Create a folder name as MyCustomView and add it to the project.

"<yoastmark

 

"<yoastmark

 

"<yoastmark

  • Step:2 Create a new File named as MyCustomView and add it to the newly created folder.

"<yoastmark

 

"<yoastmark

 

"<yoastmark

 

"<yoastmark

As now we are done with creating our own custom UI-View class, we will have to assign this created class to the View we dragged into the XIB.

Assign Custom UIView Class
Assign Custom UI-View Class

Now its time to add some code to our Custom UI-View class.

Creating Custom UI-View Class
Creating Custom UI-View Class

Remove the above-market code and add the below code.

 

override init(frame: CGRect) {
       super.init(frame: frame)
        commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
private func commonInit() {
layer.cornerRadius = 3
layer.borderWidth = 3 
layer.borderColor = UIColor.red.cgColor
}

 

We are all set to now see the results. Please run the project (CMD + R) to see the below results.

Custom UIView Class Final Output
Custom UIView Class Final Output

As of now we have added only 3 properties

borderColor, borderWidth, cornerRadius

you can add many more customizations as desired.

You can download the whole project from the link here.

Author: Chandra.rao

iOS Developer. #Life of an developer.... Learn New technology, Code, Learn New Technology, Code, Death.