iOS | UiView

iOS | UiView with XCode IDE Introduction, History and Versions, Views and View Controllers, Creating the first iOS application, Label, Button, TextField, Switch, Segmented Control, iOS UI Controls, iOS UI Views, iOS UIView Controllers, Tab Bar Interface etc.

<< Back to IOS

next → ← prev

UIView

UIView can be defined as an object by using which we can create and manage the rectangular area on the screen. We can have any number of views inside a view to create a hierarchical structure of the UIViews.

The UIView is managed by using the methods and properties defined in the UIView class that inherits UIKit. The declaration of UIView is given as follows.

class UIView : UIKit

Views are the fundamentals of iOS application development, and that's why UIView is one of the most used object in the object library. The views are the basic building block of the iOS application, which renders the content within its bounds rectangle and also handles any interaction with the content.

UIViews are the fundamentals and the connection point of the iOS application with the user. There are several activities that are performed by the views in the iOS application.

Drawing and animation
- By using views, we can draw into the rectangular area of the screen.
Layout and Sub view management
- We can embed one or more subviews into the UIView. The appearance of the subviews can be managed by managing the appearance of the super view.
- We can define the auto-layout rules to govern the size and positioning of the view hierarchy on different iOS devices.
Event Handling
- A view can respond to the touch and another kind of event since it is the subclass of UIResponder.
- We can add the gesture recognizers for the uiview, such as UITapGestureRecognizer.

Creating UIView

A View can be created programmatically by instantiating UIView class. We can pass the frame object inside the UIView constructor. In iOS application development, there are many objects like labels, text fields, etc. which directly inherits the UIView class to use the common properties and methods.

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

Example 1

In this example, we will create two UIViews programmatically and set their properties simultaneously.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let frame1 = CGRect(x: 100, y: 100, width: 200, height: 200)
        let myView1 = UIView(frame: frame1)
        myView1.layer.shadowColor = UIColor.black.cgColor
        myView1.layer.borderColor = UIColor.black.cgColor
        myView1.layer.borderWidth = 2
        myView1.layer.cornerRadius = 5
        myView1.layer.shadowRadius = 2
    
        let frame2 = CGRect(x:100, y:400, width: 200, height: 200)
        let myView2 = UIView(frame: frame2)
        myView2.layer.shadowColor = UIColor.blue.cgColor
        myView2.layer.borderColor = UIColor.blue.cgColor
        myView2.layer.borderWidth = 2
        myView2.layer.cornerRadius = 5
        myView2.layer.shadowRadius = 2
        
        myView2.backgroundColor = .green
        myView1.backgroundColor = .red
        view.addSubview(myView1)
        view.addSubview(myView2)
    }
}

Example 2

In this example, we will simulate the structure of the web page on the iOS application. In this type of iOS application, where we need to display separate customizations, we will use UIViews in the iOs applications.

Interface builder

The following image shows the interface builder (main.storyboard) developed in the project. The left pane in the window shows the hierarchy of views and labels used in the project.

ViewController.swift

In the ViewController file, we will add the behavior for the labels so that we can change the look of the UIView associated with the label.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var headerView: UIView!
    
    @IBOutlet weak var bodyView: UIView!
    
    @IBOutlet weak var footerView: UIView!
    
    @IBOutlet weak var headerLbl: UILabel!
    
    @IBOutlet weak var bodyLbl: UILabel!
    
    @IBOutlet weak var footerLbl: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let headerTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(headerLblTapped))
        headerLbl.isUserInteractionEnabled = true
        headerLbl.addGestureRecognizer(headerTapGestureRecognizer)
        
        let bodyTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(bodyLblTapped))
        bodyLbl.isUserInteractionEnabled = true
        bodyLbl.addGestureRecognizer(bodyTapGestureRecognizer)
        
        
        let footerTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(footerLblTapped))
        footerLb
		l.isUserInteractionEnabled = true
        footerLbl.addGestureRecognizer(footerTapGestureRecognizer)
    }
    
    @objc func headerLblTapped(){
        headerView.backgroundColor = .orange
    }
    
    @objc func bodyLblTapped(){
        bodyView.backgroundColor = .green
        
    }
    
    @objc func footerLblTapped(){
        footerView.backgroundColor = .orange
    }
}

Output

Next TopiciOS: Tableview

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

iOS | UiView

UIView

Creating UIView

Related Links:

.Net

Java

Related Links