×

iOS UIViews


What is UIViewController ?

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)

Example :- A part of screen with height 60.

What is SubView ?

SubView is simply a child view of parent View . View Inside view.

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) 

Basics of X,Y Position used in iPhone UI Design :-


How to create a UIView ?

UIView *view1 = [UIView alloc]initWithFrame : CGRectMake(12, 24, 200 , 200)]; 

With the help of alloc method you can allocate a UIView and here we had given it a frame of x-Coordinate at 12 , y-Coordinate at 24 , width = 200 and height = 200.

Example of UIViews and SubView's :-

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



Open ViewController.m and Copy the code in your Xcode. In short, the code contains one superView which then contains two Subviews which then contains two labels inside both subViews. Once you got the basics of Views you are almost done to design any iOS UI. Understand the Example Description given After Output.

//
//  Created by Manish Methani
//  Copyright © 2017 Codzify. All rights reserved.
//
#import "ViewController.h"
#define RGBCOLOR(R,G,B) [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:1]

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIView *superView  = [[UIView alloc]initWithFrame:
    CGRectMake(12, 24, self.view.frame.size.width-12*2, 200)];
    superView.backgroundColor = [UIColor orangeColor];
    superView.layer.borderWidth = 1.0;
/* Here superView is added to self.view (self means here SampleViewController's view)*/
   [self.view addSubview:superView]; 
   
    UIView *view1 = [[UIView alloc]initWithFrame:
    CGRectMake(12, 24, 200, superView.frame.size.height - 24*2)];
    view1.backgroundColor = [UIColor whiteColor]; 
/* Here view1 is added to superView (superView is baseView of view1. 
         And SuperView's BaseView is self.view )*/ 
   [superView addSubview:view1];
    
    
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(12, 12, 60, 24)];
    label1.text = @"Label 1";
    label1.textColor = [UIColor blackColor];
    label1.font = [UIFont fontWithName:@"Arial" size:16.0];
/* Here label1 is added to view1 (view1 is baseView of label1. And view1's 
          BaseView is superView and superView's baseView is self.view )*/   
    [view1 addSubview:label1];
 
    
    
    UIView *view2 = [[UIView alloc]initWithFrame:
    CGRectMake(CGRectGetMaxX(view1.frame) + 12, 24, 200, superView.frame.size.height - 24*2)];
    view2.backgroundColor = [UIColor whiteColor];
/* Here view2 is added to superView (superView is baseView of view2. 
         And SuperView's BaseView is self.view )*/    
    [superView addSubview:view2];
    
    
    
    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(12, 12, 60, 24)];
    label2.text = @"Label 2";
    label2.textColor = [UIColor blackColor];
    label2.font = [UIFont fontWithName:@"Arial" size:16.0];
/* Here label2 is added to view2 (view2 is baseView of label2. And view2's 
          BaseView is superView and superView's baseView is self.view )*/ 
    [view2 addSubview:label2];
}

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

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end



#define RGBCOLOR(R,G,B) [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:1]

What this line indicates is we defined an enum RGBColor so that we do not have to write this "[UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:1]" lengthy statement again and again to give color to any UIElement.

Here, we created one superview (orange Color view) which is called as subView of ViewController. Then, inside superView (orange Color view) there are two subViews "View 1" and "View 2"(White Color Views .First one is view1 and second one is view2). Then inside View 1 there is a label named “label1” and similarly Inside View 2 there is a label named "label 2"