Friday, May 21, 2010

Customizing UIBarButtonItem and UIToolbarItem on UINavigationController

There are a bar on the top of the application that has UINavigationController. This top bar is typically known as the navigation bar, it can be customized with rightButtonItem, leftButtonItem and the title.

The bottom bar in the UINavigationController is typically known as tool bar. It can be customized with setToolbarItems using an array of UIBarButtonItem.
The following outline the step to customize the navigation bar and tool bar buttons:

1. Usually the best place to add the customization code for adding the UINavigationBarItem and UIToolBarItems is in the viewDidLoad method of the UIViewController.

2. To add the UINavigationBarItem,
    a) First create an UIBarButtonItem
    Eg: the below code implement system button
            UIBarButtonItem *butt = [[UIBarButtonItem alloc]
                                                      initWithBarButtonSystemItem: UIBarButtonSystemItemCarmera  
                                                      target:self action:@selector(action)];
   b) Add the newly created custom button to the navigation bar:
            self.navigationItem.rightBarButtonItem = butt;
             // or [self.navigationItem setRightBarButtonItem:butt animated:YES];

3. If back button is needed in all subsequence pushed viewController (to return to parent view),
    the backBarButtonItem is needed to add to the root navigationController. If the title of the
    backBarButtonItem is not set, the default behaviour is that the back button will be created with
    the title of the parent view.
    **Note: For default behaviour to work, all the viewController must be set with a title.
                UIBarButtonItem *backButt = [[UIBarButtonItem alloc]init];
                 [backButt setTitle:@"Back"];
                 [self.navigationItem setBackBarButtonItem:backButt];

4. To add the UIToolbarItems,
    a) First create all the individual needed UIBarButtonItem
     Eg: Below code create the system's action and compose button, and  a custom information button
           Note: the custom information button does not work in the navigation bar
             UIBarButtonItem *butt1 = [[UIBarButtonItem alloc]
                                                      target:self action:@selector(getInfo:)];

             UIBarButtonItem *butt2 = [[UIBarButtonItem alloc]      
                                                      target:self action:@selector(getInfo:)];

             /* Below code create other system button, such as Info Button */
             UIButton* infoButton = [UIButton buttonWithType:UIButtonTypeInfoDark];
             [infoButton addTarget:self action:@selector(action)
             UIBarButtonItem *butt3 = [[UIBarButtonItem alloc] initWithCustomView: infoButton];
             /***  Below code add a button with image **/
            UIButton* starButt =[UIButton buttonWithType:UIButtonTypeCustom];
           UIImage* buttonImage = [UIImage imageNamed:@"star.png"];
           [starButt addTarget:self action:@selector(getInfo:)        
           [starButt setImage:buttonImage forState:UIControlStateNormal];
           starButt.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
           UIBarButtonItem *butt4 = [[UIBarButtonItem alloc]initWithCustomView:starButt];
      b) Create an array for all the above created UIBarButtonItems.
              NSArray* toolBarItems = [NSArray arrayWithObjects:butt1,butt2,butt3,butt4,nil];
     c)  Release all the create UIBarButtonItems
              [toolBarItems makeObjectsPerformSelector:@selector(release)];
      d)  Assign the newly created UIBarButtonItem array to the toolBarItems and set it to not hidden (by
           default it is hidden) :
                [self setToolbarItems:toolBarItems animated:YES]; // or self.toolbarItems = toolBarItems;
                [self.navigationController setToolbarHidden:NO]; //or self.navigationController.toolbarHidden= NO;

5. Implement the method to handle when the button is clicked.
          - (void)action {
               // ... actual code to implement the action
               // ... when the button is clicked

1 comment:

  1. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Lenovo - IdeaPad 15.6" Laptop - 6GB Memory - 1TB Hard Drive - Dark Chocolate

    Lenovo - 14" Notebook - 4 GB Memory - 320 GB Hard Drive - Black