iOS UIViews

How to design a User Interface(UI) ?

Consider a blank screen of mobile with white color. That white blank screen is called as UIView in iOS Designing. You can add labels, buttons, textfield etc. on this UIView. You can also add other UIview on main UIview as a subview.

What is ViewController ?

The word UIViewController itself tells the meaning. A Controller which controls or manages an UI of View. This is the place where you can add as many views you want.

What is UIView ?

UIView is a place which tells your iPHone's full screen to give me some part of the screen so that I can define it in my own way(say). Here, gray color view is one UIView. Two white color views are two different UIViews.

Example :- A part of screen with height 60.

What is SubView ?

SubView is simply a child view of parent View . View Inside view. First White Color view is subview of self.view Similarly,Second white color view is subview of self.view

Now we add UILabel on first UIview . And that UILabel will be added as an subview of First White color UIView as shown in fig.

How to create a UIView ?

Example of UIViews and SubView's :-

Goto, File > New >Project >Single View Application > Enter Project Name

Open ViewController.swift and Copy the code in your Xcode. In short, the code contains one superView which then contains one subview which then contains one textField inside that subView. Once you got the basics of Views you are almost done to design any iOS UI. Understand the Example Description given After Output.

import UIKit
 var boxView = UIView()

class ViewController: UIViewController {
    var nameTextField = UITextField()

    override func viewDidLoad() {
        self.view.backgroundColor = UIColor.init(red: 245/255.0, green: 245/255.0, blue: 245/255.0, alpha: 1.0);
        boxView = UIView.init(frame: CGRect(x:20, y:32,width: self.view.frame.size.width - 40,height: 60));
        boxView.backgroundColor = UIColor.white
        nameTextField = UITextField(frame:CGRect(x: 12 , y: 12 , width: 200 , height: 32))
        nameTextField.textAlignment = NSTextAlignment.center
        nameTextField.placeholder = "Enter a Name"
        nameTextField.layer.borderWidth = 1
        nameTextField.textColor = UIColor.black
        nameTextField.layer.cornerRadius = 2.0
        nameTextField.clearButtonMode = .whileEditing
        nameTextField.keyboardType = UIKeyboardType.namePhonePad

Output :-

Here , gray background color view is self.view . Then we added white color view as subview of self.view at some position using frames. Then we added one textField inside that white color view as a subView at some position using frames. Its nothing but one view inside another view and textfield inside that view. We will discuss each UIElement like UITextfield, UILabel etc in comming tutorials in detail. For now, just understand View and subview.