iPhone Development: Creating a Simple View

In this post I will create a simple view with a label and a button. The Label says Hello World and a Button which says Hit Me, when clicked prints a log statement on console.

I am going to use this project in all my next posts where I will be building complex views, custom table views with custom cells, animations, webViews etc.

The application I am going to build will finally look like this

So open the xCode and create a new project. Chose the template "View Based" and name the project as "MyTestProject"

This will open a new project with may folders appearing on the left side of xCode. Expand the classes folder and select MyTestProjectViewController.h. Add the following code to it:

We have defined a label and a button in the header file. In the implementation file we will create them and finally add it to the baseView. So open MyTestProjectViewController.m and add following code within the implementaion declaration i.e. after

@implementation MyTestProjectViewController.

Most of the lines in code are self explanatory. I will explain some of them:

aLabel = [[UILabel alloc]initWithFrame:CGRectMake(90,100,200,40)];

here you are actually creating a Label and initializing it with a frame. A frame represents the lay out of a UI element. The first 2 arguments of CGRectMake are (x,y) coordinates from where the label will appear. The last 2 arguments are (width,height) size and they define how much space will they be taking on the view.

[aLabel setBackgroundColor:[UIColor whiteColor]];

Yes a label also has a background color. When you define a frame, you are creating a rectangle with its left corner at the (x,y) and right corner at (x+width, y+height). The label (or any UI element) lies inside a frame. The background color of a label is the color with which this rectangle will be filled.

[aButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];

Now in this line we are telling what a button should do on being pressed. addTarget:self tells that the event will be handled by the same class in which it is being declared. 

action:@selector(buttonPressed) tells that when the button is touchedUPInside this method should be called automatically.

-(void)buttonPressed

{

NSLog(@"button was pressed");

}

Finally we have implemented the method which will be called automatically when the button is pressed. You can write anything inside this method.

I have not used Interface Builder at all. For me IB is a pain in the as* . If you want to do some serious development you need to learn how every thing is done programatically. In the next post I will be creating another View and add some more Elements to it and we will be adding code for navigating from one view to the other.

Let me know if there is any specific issue.