Thursday, January 27, 2011

UINavigationController


In this post we will learn to use the UINavigationController class and will become familiar to some of its most commonly used functionality.

UINavigationController class description: The navigation controller manages a stack of views and the user can use the navigation controller to go to the next view. 
The UINavigationController class inherits from the UIViewController class and has the view property. The navigation view contains the navigation bar on the top whenever a new view has been popped or pushed in the window the navigation controller updates the view property.

The current post is divided into two parts:

  1. User selects a row from the table view and gets traversed into the next view.
  2. User selects a row from the table view and gets traversed into the next view displaying appropriate data as per the users selection.
Part 1: User selects a row from the table view and gets traversed into the next view.

Design Phase: For the part one app we need a two UITableViewController subclass file with each containing some appropriate data and on the selection of any row by the user the second view will be loaded in the window.

Step 1: Open Xcode and create window based application project now add two UITableViewController subclass file to your class group with the name firstviewController and secondviewController. Now at this moment your class group must contain four new files with the name firstviewConttroller.h, firstviewController.m and secondviewController.h and secondviewController.m

Step 2: Add a mutable array to both the files and arrange the section and title as per the MutableArray(refer to this post if you have forgot).


Step 3: In the firstviewController.m import the secondviewController.h file and create its object in the following function

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 

Now go to the AppDelegate .m file of your application and add the UINavigationController class and heres the code to do that

#import "NavigationControllerDemoAppDelegate.h"
#import "firstviewController.h"

@implementation NavigationControllerDemoAppDelegate
@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
firstviewController *firstviewObject = [[firstviewController alloc]initWithStyle:UITableViewStyleGrouped];
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:firstviewObject];
[window addSubview:nav.view];
 [window makeKeyAndVisible];
}

Code Explanation: In the above code I have created the object of the firstviewController and also I have created the object of UINavigationController, initwithRootViewController method of the navigationController will display the first view that you want to be visible to the user. 
And ultimately its the navigation view that you will be adding into the window because this is a navigation project.

Step 4: Hold on a second we are not done yet into the firstviewController.m you earlier created the object of secondviewController right, so now its time to tell the navigationController that on the hit of  any row of the tableview of the firstviewcontroller you should be traversed to the secondview, so you do that with the help of the following code

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

secondviewController *secondviewObject = [[secondviewController alloc]initWithStyle:UITableViewStyleGrouped];
[self.navigationController pushViewController:secondviewObject animated:YES];
}

Step 5: Just press build and Go and enjoy the simple navigation app that you made,




Phase 2: User selects a row from the table view and gets traversed into the next view displaying appropriate data as per the users selection.

Now from the above code it is clear that the above code is of no use and was for you people to know how the navigation controller works, what we are actually keen to learn is that when the user will select an particular index from the row of that table he must be traversed to the next view with the next view showing the data which must be related as per the selection of the user. So here’s how you will do that

Step 1: In the secondviewController.h file write your own init method which should look like this

- (id)initWithStyle:(UITableViewStyle)style getIndexNumber:(int)_indexNumber;

Now the reason why you will write your own init method is that we will first fetch the data from the firstviewcontroller regarding which row was selected and then supply that data to the seconviewcontroller and then add some code so that the secondviewController displays the data as per the selected row from the firstviewController, so now in the init method I will have the following code

- (id)initWithStyle:(UITableViewStyle)style getIndexNumber:(int)_indexNumber  {
    // Override initWithStyle: if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.
    if (self = [super initWithStyle:style]) {
switch (_indexNumber) {
case 0:
companyProducts = [[NSMutableArray alloc]initWithObjects:@"iPod",@"iPhone",@"Macbook pro",@"Apple TV",nil];
break;
case 1:
companyProducts = [[NSMutableArray alloc]initWithObjects:@"i3 processor",@"i7 processor",@"Core 2 duo Processor",@"Quad Core Processor",nil];
break;
case 2:
companyProducts = [[NSMutableArray alloc]initWithObjects:@"Office Suite",@"Visual Studio",@"Windows Vista",@"Windows 7",nil];
break;
case 3:
companyProducts = [[NSMutableArray alloc]initWithObjects:@"Search Engine",@"Google Earth",@"Google Map",@"Android",nil];
break;
}
self.title = @"Second View";
    }
    return self;
}


Code Explanation: In the above code the currentIndex will be coming from the firstviewController and if you look at the code its quite self explanatory like once I know the currentIndex value based upon that I am initializing my NSMutableArray.

Step 2: select the firstviewController.m file and go to the selected index method and create the object of the class secondviewController, and use your init method which would look like this

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

secondviewController *secondviewObject = [[secondviewController alloc]initWithStyle:UITableViewStyleGrouped getIndexNumber:indexPath.row];
[self.navigationController pushViewController:secondviewObject animated:YES];
}

Code Explanation: The indexPath.row will  supply that integer data about which row was selected by the user.

Step 3: Almost done with the second phase as well just hit build and go and your all done.

Step 4: The final output would be like the images given below.



Intel row selected
 
 

















                                    Apple row selected


I hope that the above post was useful to you, feel free to comment and post in your request if you would like to see some post of your choice at iPhone by radix

Monday, January 24, 2011

Interface Orientations


In this post we will learn how to work with orientations in iPhone,

What is Orientations: Orientations are changing the view of your application as per the device’s current orientation, in lay man terms orientation is when you rotate your device in left, right or upside down.

Design Phase: We will have four buttons in our iPhone window and we will try to support both the orientation that’s portrait and landscape, here’s a view at our final output


The above image is when your device is in portrait mode.

Step 1: Open Xcode create a window based application and add UIViewController subclass file to your project with the name myviewController, now you must be having two new files with the name myviewController.h and myviewController.m.

Step 2: Select the myviewController.h file and add declare four objects of UIButton class here’s how the code looks in the myviewController.h file


@interface myviewController : UIViewController {

UIButton *btn1,*btn2,*btn3,*btn4;
}
@end



Now select the myviewController.m file and set the frames and titles to your button objects that you have created in the init method, here’s the code to that

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization
btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn1 setTitle:@"BTN 1" forState:UIControlStateNormal];
btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn2 setFrame:CGRectMake(228, 66, 72, 37)];
[btn2 setTitle:@"BTN 2" forState:UIControlStateNormal];

btn3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn3 setFrame:CGRectMake(20, 388, 72, 37)];
[btn3 setTitle:@"BTN 3" forState:UIControlStateNormal];

btn4 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn4 setFrame:CGRectMake(228, 388, 72, 37)];
[btn4 setTitle:@"BTN 4" forState:UIControlStateNormal];
    }
    return self;
}


Don’t forget to add this buttons to the self view in the loadView method

- (void)loadView {
[super loadView];
[self.view addSubview:btn1];
[self.view addSubview:btn2];
[self.view addSubview:btn3];
[self.view addSubview:btn4];
}

Step 3: In the myviewController.m file there is a method that is commented the name of the method is 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {


This is a Boolean method which will rotate your views as per the device orientations, 

Uncomment this method and  delete the code in the return that is present by default and replace it with YES which means that now your application will support all sort of orientation let it be portrait or landscape, 

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return YES;
}


Now add this view to the iPhone window by selecting the appDelegate.m file of your application and make the object of myviewController, heres the code to do that

#import "OrientationAppDelegate.h"
#import "myviewController.h"

@implementation OrientationAppDelegate
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
myviewController *obj = [[myviewController alloc]init];
[window addSubview:obj.view];
    [window makeKeyAndVisible];
}


run your application, try to rotate the iPhone simulator by selecting the hardware menu,



Step 4: But there is one problem with the above code and that problem is that when you will rotate the hardware to right or left you will find that the buttons that are present at the bottom will be gone from the window, 




so inorder to avoid this add this piece of code in the shouldAutorotateToInterfaceOrientation method, here’s how it looks

-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
UIInterfaceOrientation currentOrientation = [[UIDevice currentDevice]orientation];
switch (currentOrientation) {
case UIInterfaceOrientationPortrait:
case UIInterfaceOrientationPortraitUpsideDown:
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn2 setFrame:CGRectMake(228, 66, 72, 37)];
[btn4 setFrame:CGRectMake(228, 388, 72, 37)];
[btn3 setFrame:CGRectMake(20, 388, 72, 37)];
break;
case UIInterfaceOrientationLandscapeLeft:
case UIInterfaceOrientationLandscapeRight:
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn2 setFrame:CGRectMake(388, 66, 72, 37)];
[btn4 setFrame:CGRectMake(388, 247, 72, 37)];
[btn3 setFrame:CGRectMake(20, 247, 72, 37)];
break;
}
    return YES;
}


Code Explanation: In the above code the line

UIInterfaceOrientation currentOrientation = [[UIDevice currentDevice]orientation];

Will get the current orientation position of your device and then with then help of switch case, you can select what sort of look will your view have when your iPhone will be rotated in either landscape mode or in portrait mode, you can do that by setting the frames of the views.

So now your final output will be something like this



I hope this post was helpful to you comments and queries are always welcome,
Happy iCoding and have a great Day