×

iOS Frames


What is Frame ?

The frame is simply a way of assiging a position to a UIViews or any UIElement. With the help of frames you can assign x-Postion , y-Postion , width and height .

You can position your Labels,Buttons or any UI Element with the help of frames.

Syntax to initialize Frame :-

 CGRectMake(x,y,width,height) 

Here,

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

Example

CGRectMake(12, 24, 200 , 200) 

In UIViews tutorial, we learnt how to create a view. Right ?

In UIViews tutorial, we learnt how to add a subView to a view. Right ?

Various methods you can use with Frames :-

1) CGRectGetMaxX(CGRect rect)

This method is used to get Maximum X value of specified frame of a view.

1) CGRectGetMaxY(CGRect rect)

This method is used to get Maximum Y value of specified frame of a view.

1) CGRectGetMinX(CGRect rect)

This method is used to get Minimum X value of specified frame of a view.

1) CGRectGetMinY(CGRect rect)

This method is used to get Minimum Y value of specified frame of a view.

1) CGRectGetMidX(CGRect rect)

This method is used to get Middle X value of specified frame of a view.

1) CGRectGetMidY(CGRect rect)

This method is used to get Middle Y value of specified frame of a view.

1) CGRectGetGetHeight(CGRect rect)

This method is used to get Height of specified frame of a view.

1) CGRectGetGetWidth(CGRect rect)

This method is used to get width of specified frame of a view.

Example 1 :-

//
//  ViewController.m
//  FramesDemo
//
//  Created by Manish Methani on 31/03/17.
//  Copyright © 2017 Codzify. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIView *superView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, self.view.frame.size.width - 24, self.view.frame.size.height -24)];
    [self.view addSubview:superView];
    superView.backgroundColor = [UIColor orangeColor];
    
    
    UIView *firstInnerView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, superView.frame.size.width - 24 , superView.frame.size.height - 24)];
    [superView addSubview:firstInnerView];
    firstInnerView.backgroundColor = [UIColor yellowColor];
    
    UIView *secondInnerView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, firstInnerView.frame.size.width - 24 , firstInnerView.frame.size.height - 24)];
    [firstInnerView addSubview:secondInnerView];
    secondInnerView.backgroundColor = [UIColor whiteColor];
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

This is example 1 to understand the basics of Frames and once you get this you can play with frames :).

UIView *superView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, self.view.frame.size.width - 24, self.view.frame.size.height -24)];

This line creates a superView and as you can see superView

Frame of Superview :-

1) x-Coordinate = 12px;

2) y-Coordinate = 12px;

3) width = self.view.frame.size.width - 12*2;

you can get the width of full screen with self.view.frame.size.width and since we had given a x-Coordinate 12px from left we have to leave 12px from right also to acheive the desired output. That's why ,

self.view.frame.size.width - 12*2 times

4) height = self.view.frame.size.height - 12*2;;

you can get the Height of full screen with self.view.frame.size.height and since we had given a y-Coordinate 12px from top we have to leave 12px from bottom also to acheive the desired output. That's why ,

self.view.frame.size.height - 12*2 times

[self.view addSubview:superView];

With the help of addSubView method you can add superView inside mainView.

 UIView *firstInnerView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, superView.frame.size.width - 24 , superView.frame.size.height - 24)];

Then we created firstInnerView and added to superView.

Frame of firstInnerView :-

1) x-Coordinate = 12px;

2) y-Coordinate = 12px;

3) width = firstInnerView.frame.size.width - 12*2;

you can get the width of full screen with self.view.frame.size.width and since we had given a x-Coordinate 12px from left we have to leave 12px from right also to acheive the desired output. Now in this case we had to add InnerView inside SuperView . So SuperView becomes parent View . That's why ,

superView.size.width - 12*2 times

4) height = firstInnerView.frame.size.height - 12*2 times;

you can get the Height of full screen with self.view.frame.size.height and since we had given a y-Coordinate 12px from top we have to leave 12px from bottom also to acheive the desired output.Now in this case we had to add InnerView inside SuperView . So SuperView becomes parent View . That's why That's why ,

superView.frame.size.height - 12*2 times

[superView addSubview:firstInnerView];

With the help of addSubView method you can add firstInnerView inside superView.

  UIView *secondInnerView = [[UIView alloc]initWithFrame:CGRectMake(12, 12, firstInnerView.frame.size.width - 24 , firstInnerView.frame.size.height - 24)];

Then we created secondInnerView and added to superView.

Frame of secondInnerView :-

1) x-Coordinate = 12px;

2) y-Coordinate = 12px;

3) width = secondInnerView.frame.size.width - 12*2;

you can get the width of full screen with self.view.frame.size.width and since we had given a x-Coordinate 12px from left we have to leave 12px from right also to acheive the desired output. Now in this case we had to add InnerView inside SuperView . So SuperView becomes parent View . That's why ,

superView.size.width - 12*2 times

4) height = secondInnerView.frame.size.height - 12*2 times;

you can get the Height of full screen with self.view.frame.size.height and since we had given a y-Coordinate 12px from top we have to leave 12px from bottom also to acheive the desired output.Now in this case we had to add InnerView inside SuperView . So SuperView becomes parent View . That's why That's why ,

superView.frame.size.height - 12*2 times

[firstinnerView addSubview:secondInnerView];

With the help of addSubView method you can add secondInnerView inside firstinnerView.