Recreating the iBooks wood themed navigation bar

Full Source code: https://github.com/boctor/idev-recipes/tree/master/WoodUINavigation

Problem:

Recreate the wood themed navigation bar of Apple’s iBooks app.

Solution:

First we’ll extract the images from the iBooks app and find the main navigation bar image:

Next we’ll add this wood background image as a subview of the UINavigationBar. We add it at the bottom of the z-order so that the buttons are drawn on top:

    UIImageView* imageView = [[[UIImageView alloc] initWithFrame:navigationController.navigationBar.frame] autorelease];
    imageView.contentMode = UIViewContentModeLeft;
    imageView.image = [UIImage imageNamed:@"NavBar-iPhone.png"];
    [navigationController.navigationBar insertSubview:imageView atIndex:0];

Then we replace those standard UIBarButtonItems with custom ones. To do this we create custom buttons with stretchable images we find in the iBooks app:

and add the custom buttons as the customView of the UIBarButtonItems:

  self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:[self woodButtonWithText:@"Store" stretch:CapLeftAndRight]] autorelease];
  self.navigationItem.leftBarButtonItem =  [[[UIBarButtonItem alloc] initWithCustomView:[self woodButtonWithText:@"Edit" stretch:CapLeftAndRight]] autorelease];

Finally, we add a custom segmented control as the titleView:

  segmentControlTitles = [[NSArray arrayWithObjects:@"Books", @"PDFs", nil] retain];
  UIImage* dividerImage = [UIImage imageNamed:@"view-control-divider.png"];
  self.navigationItem.titleView = [[[CustomSegmentedControl alloc] initWithSegmentCount:segmentControlTitles.count segmentsize:CGSizeMake(BUTTON_SEGMENT_WIDTH, dividerImage.size.height) dividerImage:dividerImage tag:0 delegate:self] autorelease];

Our end result is nearly indistinguishable from the original:

Full Source code: https://github.com/boctor/idev-recipes/tree/master/WoodUINavigation

Advertisement