How to create Custom Navigation Bar like BestBuy App?

Question

I want to make a custom navigation bar as like in the BestBuy App or like shown in the below given screenshot.

I want this type of Navigation to be always on the top of each and every viewController.

If anyone can tell me the procedure or any kind of help would be appreciated. Thanks.

Answer 1

write a subclass of UINavigationBar in which you do custom drawing and add subviews as needed.

then tell your navigationController to use that class by initing it using initWithNavigationBarClass:toolBarClass:

e.g.

@interface MyBar : UINavigationBar
@end

@implementation MyBar 
.... //like any UIView
@end

---

UINavigationController *navi = [[UINavigationController alloc] initWithNavigationBarClass:[MyBar class] toolbarClass:nil];

instead of initWithRootViewController

---

Sample

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
    self.mainViewController = [[FDMainViewController alloc] initWithNibName:@"FDMainViewController_iPhone" bundle:nil];
} else {
    self.mainViewController = [[FDMainViewController alloc] initWithNibName:@"FDMainViewController_iPad" bundle:nil];
}

UINavigationController *navi = [[UINavigationController alloc] initWithNavigationBarClass:[UINavigationBar class] toolbarClass:nil];
navi.viewControllers = @[self.mainViewController];
self.window.rootViewController = navi;
[self.window makeKeyAndVisible];
return YES;
}

Answer 2

navigationBar can take three view, two buttons in each side left and right , also you can add a view for the title,,

//this will set a background image to your navigation bar.
[[self.navigationController navigationBar] setBackgroundImage:[UIImage imageNamed:@"top-bar.png"] forBarMetrics:UIBarMetricsDefault];

UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
[leftButton setBackgroundImage:[UIImage imageNamed:@"backBtn.png"] forState:UIControlStateNormal];
leftButton.frame = CGRectMake(0, 0, 66, 30);
[leftButton addTarget:self action:@selector(navBack) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];

UIImage *image=[UIImage imageNamed:@"add-btn.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height);
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:self action:@selector(doneAct) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

and to add the search bar

self.navigationItem.titleView = mySearchbarView;