position: fixed; top: auto !important; margin-left: 112px;

Frame

You can position your Labels,Buttons or any UI Element with the help of frames. Just understand the coordinate system explained below to be familiar with Frames. It's all about the (x, y, width, height) position of UI elements. Once you got the basics of Frames you can design any UI of iOS Apps.

The frame of an UIView is the rectangle at a specific location (x,y) and size (width,height) relative to the superview it is contained within the parent view's coordinate system.

Syntax

frame:CGRect(x: xPosition , y: yPosition , width: widthOfUIElement , height: heightOfUIElement) 

Here,

x  =  xPosition of Full Screen from left side.
y  =  yPosition of Full Screen from top side.
width  =  width of your UIElement (e.g., UILabel , UIButton, UIView)
height =  height of your UIElement (e.g., UILabel , UIButton, UIView)

Example

frame:CGRect(x: 12 , y: 12 , width: 200 , height: 32) 

Geometry Basics

You might be familiar with the coordinate system which contains X-axis, Y-axis. We consider you know about the geometry and how to plot points on X-axis and Y-axis.


How to plot points on X,Y coordinate?

Suppose you want call button on a screen with x-coordinate = 36 and y-coordinate = 52


Few things you might know about the positions on XY Coordinate like Min x , Min y , Max x, Max Y position.



In given figure, you might think about what is Min x, Min y, Max x, Max y. Left side from top & bottom is always min for X-Axis is always min and for Y-Axis min & max is straight line direction from top to bottom. The top is min and bottom is the max for Y-Axis. Now just fit the x,y coordinates.

Don't worry if you do not understand this geometry. Once you start designing the User Interface (UI) your basics will be cleared.

Bounds

The bounds of an UIView is the rectangle at a specific location (x,y) and size (width, height) relative to its own coordinate system (0,0).

ViewController

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

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.

SubView

SubView is simply a child view of parent View. View Inside view. First White Color view is the subview of self.view Similarly,Second white color view is the 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 ?

Let's begin with the sample project and create View and SubViews.

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() {
        super.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));
        self.view.addSubview(boxView)
        boxView.backgroundColor = UIColor.white
        
        
        nameTextField = UITextField(frame:CGRect(x: 12 , y: 12 , width: 200 , height: 32))
        nameTextField.textAlignment = NSTextAlignment.center
        boxView.addSubview(nameTextField)
        nameTextField.placeholder = "Enter a Name"
        nameTextField.layer.borderWidth = 1
        nameTextField.textColor = UIColor.black
        nameTextField.layer.cornerRadius = 2.0
        nameTextField.becomeFirstResponder()
        nameTextField.clearButtonMode = .whileEditing
        nameTextField.keyboardType = UIKeyboardType.namePhonePad

Output :-



Here, the gray background color view is self.view . Then we added the 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 text field inside that view. We will discuss each UIElement like UITextfield, UILabel etc in coming tutorials in detail. For now, just understand View and subview.

Frames vs Bounds

Let's understand some of the differences between Frames vs Bounds.

Consider you have to create a View of size (200 X 200) at (20,40) position.

override func viewDidLoad() {
        super.viewDidLoad()

        print(view.frame.origin.x)
        print(view.bounds.origin.x)
      
        print(view.frame.origin.y)
        print(view.bounds.origin.y)
        
        print(view.frame.size.width)
        print(view.bounds.size.width)

        print(view.frame.size.height)
        print(view.bounds.size.height)

}

Output

12.0
0.0

60.0
0.0

200.0
200.0

200.0
200.0

As you notice, Frame origin x is 12 whereas Bounds origin x is 0. Because as we discussed, Bounds follows its own coordinate system irrespective of superview. While the size will be 200 as you see the output.

Solve the Quiz of Article

1) What do you think the frame of an UIView is the rectangle, expressed as a location (x,y) and size (width,height) relative to the superview it is contained within?
Yes
No

2) What do you think the bounds of an UIView is the rectangle, expressed as a location (x,y) and size (width,height) relative to its own coordinate system (0,0)?
Yes
No


Previous Next Article







codzify.com


Largest collection of up-to-date tutorials to learn programming languages. We are focused on easy learning. Massive collection of interview questions one may need for preparation.

Social Profile


Linkedin
Twitter
Facebook

Copyright 2018. All rights reserved.