Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
Classes
WoodUINavigation.xcodeproj
MainWindow.xib
NavBar-iPhone.png
NavBar-iPhone@2x.png
README.md
RootViewController.xib
WoodUINavigation-Info.plist
WoodUINavigation_Prefix.pch
main.m
nav-button-press.png
nav-button-press@2x.png
nav-button.png
nav-button@2x.png
view-control-divider.png
view-control-divider@2x.png

README.md

Blog post: http://idevrecipes.com/2010/12/13/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:

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];

image

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:

image

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];

image

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];

image

Our end result is nearly indistinguishable from the original:

image

Blog post: http://idevrecipes.com/2010/12/13/wooduinavigation