UIView Fundamentals Masterclass

In this article, you will learn about the basics of UIView. In addition, you will learn the purpose of UIView and initialization and implementation of UIView along with some practical examples. Also, how view create an hierarchy tree to render it on superview. Let's start.

Basically, UIView is a container in iOS apps to create the user interface. You can have N number of views inside a view to build different kinds of user interfaces.

Declaration:

class UIView: UIResponder {

}

A view is a subclass of UIResponder, so it can respond to events like touches, presses, and others.

What can you do with UIView?

The view is a fundamental component of iOS development and that's why it is most commonly used in apps. A view is one of the basic building blocks of an iOS application, which renders the content within its enclosure. They control how the user interacts with the content.

There are several activities that can be performed by views:

Drawing: Using views you can draw anything into the rectangle area of the screen.

Animation: On view, you can perform different types of animations on any part.

Layout and subview management: You can embed more than one view (also called subviews) into the view. All the subviews can be managed by the super view itself. Also, you can define the layout rules to auto-manage the size and position of the view on different iOS devices.

Event Handling: A view can respond to touches, presses, and other events as it's a subclass of UIResponder. You can also add gesture recognisers (like single tap, double-tap, swipe, etc).

How to initialize the UIView?

In this article, you will create a UIView programmatically. Basically, to create a view you have to pass its frame to draw it on screen or you can say you need the initial size of the view.

Note: You can create UIViews with Storyboard as well. Don't worry you will learn about Storyboard in details in upcoming articles.

let initialFrame = CGRect(x: 10, y: 10, width: 100, height: 100)
let myView = UIView(frame: initialFrame) 

Let's look at the above two lines of code.

Line 1: Here, you are creating a frame by passing origin (x, y) and size (width, height). In other words, a frame needs four values defined. These values will draw the rectangular area on the screen.

Line 2: Here, you are creating a UIView object by passing the initial frame.

So, you are ready with the UIView object with its initial frame values. Now you have to display it and see how it looks on the screen.

To add it to another view, you have to call a method addSubview(_:) from the superview. Basically, addSubview(_:) is an instance method of UIView to add a subview on it. Remember that, a view can have only one superview.

Also, you can use another instance method i.e. insertSubview(_:) of UIView class. Basically this method is used in some specific condition like below:

// Inserts a subview at the specified index.
func insertSubview(UIView, at: Int)

// Inserts a view above another view in the view hierarchy.
func insertSubview(UIView, aboveSubview: UIView)

// Inserts a view below another view in the view hierarchy.
func insertSubview(UIView, belowSubview: UIView)

Ready for practice? Yesss !!

Now, let's dive into a practical example.

// creating a sample view
let rectangleView = UIView()
        
// set the frame to draw it
rectangleView.frame = CGRect(x: 100, y: 200, width: 200, height: 200)

// set background color to make visible
rectangleView.backgroundColor = UIColor.red
        
// this is how you can apply corner radius
rectangleView.layer.cornerRadius = 10
        
// adding it to the superview
self.view.addSubview(rectangleView) 

In the above example, you can see how we have initialized a view and how to configure it by assigning its frame, background color, corner radius. Finally, it was added to its superview to make it visible.

Note: You are using layer property to apply the corner radius on view. The layer property belongs to CALayer (built on UIView) class which provides you the stuffs regarding drawing, scaling, animation, transforming using different properties. Got it? don't worry you will learn more about CALayer class in upcoming articles.

Basically, just add this configured view to ViewController's view i.e. the superview. Once you are done with this code, just run it on the simulator to see the result.

Output:

Remember that:

• You can make a custom view by subclassing UIView.
• You can animate your view object by using its properties like frame, bounds, transform, center, alpha, and backgroundColor.
• You have many different properties and methods to configure a UIView.

Important: Yes, that's true there are so many things you can apply to UIView using properties and methods. Don't worry some of them you will learn in a further article. So keep following this series to continue learning.

What's Next?

You learned how to use UIKit's most common component, UIView. In this article, we explained a few things about UIView. Before moving on to the next article, we recommend you do some more practice on the different properties and methods of UIView.