UINavigationBar

UINavigationBar Back Button with images

This is a topic that I have noticed on numerous iPhone development forums and since I’ve had to address this in multiple apps that I’ve worked on in the past, I thought it would be a good topic to share some info on. The default behavior of the navigation controller is to provide a back button with the title of the previous view controller.  This is fine and dandy if you have short titles and that’s the behavior your looking for but what if you wanted to create a home button similar to the Facebook app or for that matter, an image that acts like a button but doesn’t look like one.
We will start with the Facebook style Home button.  To reproduce the following:

 

In the view controller that you want to add the home button to, your going to need to add a cancel method to pop your view controller:

-(IBAction)cancel:(id)sender{
 [self.navigationController popViewControllerAnimated:YES];
}

Next you will need to add your custom home button with some sort of image, in this case we are using an image called “home-button.png”:

- (void)viewDidLoad {
 [super viewDidLoad];

 // Add Home Button
 UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc]
       initWithImage:[UIImage imageNamed:@"home-button.png"]
       style:UIBarButtonItemStylePlain
       target:self
       action:@selector(cancel:)] autorelease];
 self.navigationItem.leftBarButtonItem = cancelButton;
}

And that’s it. You’ll need this in each view controller that is on top of your home view controller.
Next we will recreate the following:

 

In this case, we are using an image as the leftbarbuttonitem. We do so by creating our cancel method in the view controller that you want to add the home or back image to.

-(IBAction)cancel:(id)sender{
 [self.navigationController popViewControllerAnimated:YES];
}

Next we will add the image “back-image.png” as our back button and size up the button:

- (void)viewDidLoad {
 [super viewDidLoad];

 // Add Back Bar Button
 UIButton *home = [UIButton buttonWithType:UIButtonTypeCustom];
 UIImage *homeImage = [[UIImage imageNamed:@"back-image.png"]
      stretchableImageWithLeftCapWidth:10 topCapHeight:10];
 [home setBackgroundImage:homeImage forState:UIControlStateNormal];
 [home addTarget:self action:@selector(cancel:)
    forControlEvents:UIControlEventTouchUpInside];
 home.frame = CGRectMake(0, 0, 99, 35);
 UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc]
      initWithCustomView:home] autorelease];
 self.navigationItem.leftBarButtonItem = cancelButton;

}

And that’s it!  One nice benefit to this is that you can perform  
additional processing in the cancel method if needed prior to popping to
  the previous controller.

One last item to add is if you just want to change the text of the  back
 button so that it’s different than the previous view controller’s  
title:



UIBarButtonItem *backButton = [[UIBarButtonItem alloc]
                                      initWithTitle:@"Back"
                                      style:UIBarButtonItemStylePlain
                                      target:nil action:nil];
     self.navigationItem.backBarButtonItem = backButton;
     [backButton release]; 

---

Custom Navigation Bar

Today we are going to learn  how to design Custom NavigationBar,I found in most iPhone developer forum narrated  to design NavigationBar. I thought it would be a good topic to share some info on.
When creating custom NavigationBar we should design in such a way that no memory leaks found.

Here is the code:

[Utilities updateNavigationControls:self lefBarButtonImage:kBackButton andLeftBarButtonSelector:@selector(popBackAction) rightBarButtonImage:nil andRightBarButtonSelector:nil andNavigationTitle:kFaceBookTitle];

Here i have created a Generic for Navigation Controller.

//Createds a navigation bar item with image, and selector

+ (void)updateNavigationControls:(UIViewController *)inParent
lefBarButtonImage:(NSString *)inLeftBarButtonImageName andLeftBarButtonSelector:(SEL)leftBarButtonSelector
rightBarButtonImage:(NSString *)inRightBarButtonImageName andRightBarButtonSelector:(SEL)rightBarButtonSelector
andNavigationTitle:(NSString *)navTitle
{
UINavigationBar *theNavigationBar = (UINavigationBar *)[inParent.view viewWithTag:kNavigationBarTag];
if (theNavigationBar) {
[theNavigationBar removeFromSuperview];
theNavigationBar = nil;
}

theNavigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, inParent.view.frame.size.width, kNavigationBarHeight)];
theNavigationBar.tag = kNavigationBarTag;

UINavigationItem *theNavigationItem = [[UINavigationItem alloc] init];

UILabel *bigLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 200, kNavigationBarHeight)];
[bigLabel setBackgroundColor:[UIColor clearColor]];
[bigLabel setNumberOfLines:2];
[bigLabel setTextAlignment:UITextAlignmentCenter];
[bigLabel setContentMode:UIViewContentModeCenter];
[bigLabel setFont:[UIFont boldSystemFontOfSize:17]];
[bigLabel setTextColor:[UIColor whiteColor]];
[bigLabel setShadowColor:[UIColor darkGrayColor]];
[bigLabel setShadowOffset:CGSizeMake(0, 1)];
bigLabel.text = navTitle;
theNavigationItem.titleView = bigLabel;
[bigLabel release];

if(inLeftBarButtonImageName)
theNavigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:[self createCustomButtonWithImageName:inLeftBarButtonImageName andSelector:leftBarButtonSelector andTarget:inParent]] autorelease];

if(inRightBarButtonImageName)
theNavigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:[self createCustomButtonWithImageName:inRightBarButtonImageName andSelector:rightBarButtonSelector andTarget:inParent]] autorelease];

[theNavigationBar setItems:[NSArray arrayWithObjects:theNavigationItem,nil]];


[inParent.view addSubview:theNavigationBar];

[theNavigationBar bringSubviewToFront:theNavigationItem.titleView];
[theNavigationBar release];
[theNavigationItem release];
//Also set background color/Image for all the views

UIImage *patternImage = [self getImageWithImageName:@"bg"];

UIImageView *backGroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, kNavigationBarHeight, kScreenWidth, kScreenHeight)];
backGroundImageView.contentMode = UIViewContentModeScaleToFill;
[backGroundImageView setImage:patternImage];

//[inParent.view setBackgroundColor:[UIColor lightGrayColor]];
//[UIColor colorWithPatternImage:patternImage]];

[inParent.view addSubview:backGroundImageView];
[inParent.view sendSubviewToBack:backGroundImageView];
[backGroundImageView release];

if(patternImage)
[patternImage release];

}

Creating Custom Buttons for Navigation

+ (UIButton *)createCustomButtonWithImageName:(NSString *)imageName andSelector:(SEL)selector andTarget:(id)target {
UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
//customButton.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin;
customButton.showsTouchWhenHighlighted = NO;

if(imageName)
{
UIImage *image = [self getImageWithImageName:imageName];
customButton.frame = CGRectMake(0, 0, image.size.width, image.size.height-1);
[customButton setBackgroundImage:image forState:UIControlStateNormal];

if (image)
[image release];

}
else
{
[customButton setTitle:@"Button" forState:UIControlStateNormal];
[customButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}

[customButton addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
return customButton;
}

---

Adding Segment Controller To NavigationBar as Title:

[Utilities segmentControllerWithArray:[NSArray arrayWithObjects:kEmptyText,kEmptyText,nil] withView:self];

//created segment controller function

+(void)segmentControllerWithArray:(NSArray *)iArray withView:(UIViewController *)iViewController{

UISegmentedControl *segment = [[UISegmentedControl alloc] initWithItems:iArray];
segment.segmentedControlStyle = UISegmentedControlStyleBar;
segment.tag = kSegmentControllerTag;
segment.selectedSegmentIndex = 0;
[segment addTarget:iViewController action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];

UINavigationBar *navBar = (UINavigationBar *)[iViewController.view viewWithTag:kNavigationBarTag];
[[navBar topItem] setTitleView:segment];

[[[navBar topItem] titleView] setUserInteractionEnabled:YES];

[segment release];

}

//SegmentAction:

-(void)segmentAction:(id)sender
{
mSelectedEventIndex = 0;

SegmentedControl *segControl = (SegmentedControl*) [self.view  viewWithTag: kSegmentControllerTag];

if([sender selectedSegmentIndex] == 0){
UIImage *image = [Utilities getImageWithImageName:kAttendingSegActiveImage];
[segControl setImage:image forSegmentAtIndex:[sender selectedSegmentIndex]];
[sender setWidth:image.size.width forSegmentAtIndex:[sender selectedSegmentIndex]];

if(image)
[image release];

image = [Utilities getImageWithImageName:kAvailableSegNormalImage];
[segControl setImage:image forSegmentAtIndex:[sender selectedSegmentIndex]+1];
[sender setWidth:image.size.width forSegmentAtIndex:[sender selectedSegmentIndex]+1];
[image release];

}
else {

UIImage *image = [Utilities getImageWithImageName:kAvailableSegActiveImage];
[segControl setImage:image forSegmentAtIndex:[sender selectedSegmentIndex]];
[sender setWidth:image.size.width forSegmentAtIndex:[sender selectedSegmentIndex]];

if(image)
[image release];

image = [RDUtilities getImageWithImageName:kAttendingSegNormalImage];
[segControl setImage:image forSegmentAtIndex:[sender selectedSegmentIndex]-1];
[sender setWidth:image.size.width forSegmentAtIndex:[sender selectedSegmentIndex]-1];
[image release];

}

}

---

Adding Label to Navigation Bar:

UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
navBar.barStyle = UIBarStyleBlack;
navBar.translucent = YES;
UILabel *navLabel = [[UILabel alloc] initWithFrame:CGRectMake(20,8,280,30)];
navLabel.text = @"My Text";

[[navBar topItem] setTitleView:navLabel];

[navLabel release];

[self.view addSubview:navBar];
[navBar release];