Thursday, February 24, 2011

Introduction to Xcode -How to Switch Views through Button.

Its an application in which there will be more than one view and these view will navigate or switch on button click.It will look like this:










On clicking "Go To View1" button, view1 will appear. It will look like this :





















Step1: open xcode and create a View based project (select product for whom you are going to develop application, here we will select iPhone) and Name it new.



















Step2: It should be look like this:















You should see the above screen.
Left pane: shows all your files in a similar fashion to your solution explorer in Visual Studio (VS).
Right pane shows the individual files selected in the folder and the code in the lower right.

You have a couple of folders. More important ones for now are the 'classes' folder and the 'resources' folder. The classes folder basically contains your source code files. Resources folder contains your UI files, i.e. what thing you want to use on view.

For this first app, you just to write code in newViewController.h and newViewController.m. The .h file is the header file where you write all your declarations. Including declarations for UI Controls like labels, textboxes,buttons etc. The .m file is where all code is.

In 'resources', you see newViewController.xib which is your Interface Builder file. You know, the one where you drag and drop UI controls in like for forms in VS.

Step3: Under Resources, click on newViewController.xib file to open Interface Builder.
You will see a blank view like this:

















Now click on inspector icon, a window will open like this:














Select identity tag, click on right side arrow icon in class field in class identity(OR you can open the Library from Tools -> Library),the Library window will open like this:















you can drag your UI controls from library window and drop them on view window. Its essentially like toolbox in visual studio.

So carry on and design your UI till it resembles something like the below.
















In the process, you would have dragged and dropped several labels, text boxes, and buttons.

Now to insert an image on UIImageView(keep in mind that whatever files we want to use for UI should be reside in Resource folder.To add a file to resource folder just right click on resource folder->Add existing file-> browse your file.):select UIImageView->open inspector window-> Go to image view attribute tag->select image from image view.

It will look like this:




Close all windows of IB.

Step4:Now to switch view we have to create more views.

Right click on class folder-> Add new files-> select cocoa Touch Class from iPhone OS-> select UIViewController SubClass(Remember to tick mark With Xib for user interface option)-> click on Next button-> Give its name View2((Remember to tick mark Also create "View2.h")-> click on Finish.

You will get 3 new files in class folder named as:
View2.h
View2.m
View2.xib

Drag View2.xib and drop it in Resource folder.

So Go to Resource folder-> double click on View2.xib

Repeat step3 to create its UI so that it looks like this:


















Step5: Next, let's type out the code for the newViewController.h file. The code is listed below. 
#import <UIKit/UIKit.h>



@interface newViewController : UIViewController {

}
-(IBAction)goToView2Button:(id) sender;

@end



Explanation of the codes

#import <UIKit/UIKit.h>

Import the UIKit framework. There are many other frameworks you can import like the Accelerometer, the MapKit and many others.

@interface newViewController : UIViewController {

Declare an interface newViewController that inherits from UIViewController.


-(IBAction)goToView2Button:(id) sender;

This is Action. Typically, we use buttons to activate actions. We have to code these actions later on in the .m file. Here we 1 button. when we will click on it application will switch to another view.

Next up, the newViewController.m file. Find the code below:

#import "newViewController.h"


#import "View2.h"

@implementation newViewController

-(IBAction)goToView2Button:(id) sender
{
View2 *view=[[View2 alloc] initWithNibName:nil bundle:nil];
view.modalTransitionStyle=UIModalTransitionStyleFlipHorizontal;
[self presentModalViewController:view animated:YES];
[view release];
}


/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
    }
    return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/


/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
}
*/


// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}


- (void)dealloc {
    [super dealloc];
}

@end

Explanation of the codes

#import "newViewController.h"

Import the header file which we have just coded.

@implementation newViewController


-(IBAction)goToView2Button:(id) sender
{
View2 *view=[[View2 alloc] initWithNibName:nil bundle:nil];
view.modalTransitionStyle=UIModalTransitionStyleFlipHorizontal;
[self presentModalViewController:view animated:YES];
[view release];
}

This is the Action we have declared earlier in the .h file.


-(IBAction)goToView2Button:(id) sender
{
Its essentially a method. We name the method "goToView2Button" that takes an argument of id type and call it sender.






   View2 *view=[[View2 alloc] initWithNibName:nil bundle:nil];
   view.modalTransitionStyle=UIModalTransitionStyleFlipHorizontal;
   [self presentModalViewController:view animated:YES];
   [view release];

Here, we want that when we click on goToView2Button the View2 should be open.

View2 *view=[[View2 alloc] initWithNibName:nil bundle:nil];
we create an object of View2 and allocate memory for this.

view.modalTransitionStyle=UIModalTransitionStyleFlipHorizontal;
Here we are setting the transition style of view. There is also another transition style i.e. UIModalTransitionStyleCoverVertical.

[view release];
Now at last but not least release textview object.

-- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

Certain events that the program throws. But we do not have to handle them for the moment.


- (void)dealloc {

    [super dealloc];
}
 Called when the program exits, release all my objects used for the UIControls.

Step6: Next, let's type out the code for the View2.h file. The code is listed below.
#import <UIKit/UIKit.h>


@interface View2 : UIViewController {
}
-(IBAction)goToView1Button:(id) sender;

@end

Next up, the View2.m file. Find the code below:
#import "View2.h"


#import "newViewController.h"

@implementation View2

-(IBAction)goToView1Button:(id) sender
{
newViewController *view=[[newViewController alloc] initWithNibName:nil bundle:nil];
view.modalTransitionStyle=UIModalTransitionStyleCoverVertical;
[self presentModalViewController:view animated:YES];
[view release];
}

/*
 // The designated initializer.  Override if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
    }
    return self;
}
*/
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];}
/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}
- (void)dealloc {
    [super dealloc];
}
@end


Explanation of the codes
-(IBAction)goToView1Button:(id) sender


{
newViewController *view=[[newViewController alloc] initWithNibName:nil bundle:nil];
view.modalTransitionStyle=UIModalTransitionStyleCoverVertical;
[self presentModalViewController:view animated:YES];
[view release];
}

This will be the button on View2 to come back on newViewController View.

Step7: Now we will link the Outlets to the UIControls and buttons to the Actions.
And of course, build and run the app.

Apple enforces a View-Controller-Model. Which is essentially keeping the UI layer and the business logic layer separate. Advantages are that we can change either layer without affecting much the other layer. i.e. if i were to change my UI drastically, my business logic layer can still link to the new UI with some re-linking.

 Now open newViewController.xib.
In Interface Builder, you have these window with three icons in it. The view icon just opens your View. Ignore First Responder for now.





















Now, click on the button. Press and hold the Control key, and drag and drop to File's Owner(OR Press and hold the button with right click of mouse, and drag and drop to File's Owner). A black box with drop down values of the Events should appear. Select the correct event. In this case, we select the "goToView2Button" action.































Now, on right click on File Owner, this status should be display:
















You can think of Events or Actions as the same thing. 

Now close newViewController.xib and open View2.xib
Repeat this step7 to link "Go To View1" button of IB with goToView1Button "File Owner". 


Now run this application happily.
You can develop any number of buttons to switch on different different views.

Ref: Click here

CLICK HERE to download source code.

Happy Coding :)

Next….
Posted by at

1 comment:

  1. Top Mobile App Development Companies IndiaFebruary 12, 2014 at 2:38 AM

    Your contents are too simple to read and easy to understand.

    -----------------------------------------------------------------------------
    Php Web Development India :: & :: Php Web Application Development

    ReplyDelete

Subscribe to: Post Comments (Atom)