Designing a Custom iPhone App Navigation Bar

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices. It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place. Download Source Code Getting Started So without too much delay let’s pop open Xcode! From the main menu create a new project and a series of windows will appear. First you select the application template – I’ve chosen Master-Detail Application since this already includes a navigation controller. When building iPhone apps you want to focus on your core functionality and build off the components already available. It’s pointless to reinvent the wheel and it just requires more of your time. So now hit Next and you’ll be prompted to give this project a name. I set the name customNavBar with a company identifier of designmag. The identifier will not affect your application at runtime. It’s more like metadata to keep track of which applications are published under which developer or studio. If you are building for iOS5 make sure Automatic Reference Counting is checked as well as Storyboards. Hit next, save your new project and we are good to go. Let’s start out simple by customizing the navigation bar’s color setting. Custom Tint Colors In Xcode the left pane window contains all your project files. Inside should be a set of MasterViewController .h/.m files. These stand for header and implementation codes which are used to build custom classes. You don’t need to understand this concept just yet as it’s geared more towards software developers. But we will be working within these classes so it’s good to recognize their purpose. Click once on MasterViewController.m and the source code will appear in your center window. Now scan the document for a function labeled viewDidLoad. This is a default method called on every view once the page first loads. Here’s a bit of the syntax: - (void)viewDidLoad { // code here } Inside the curly braces we want to place a line of code which updates the navigation bar’s tint color. This value can be set using RGB which I’ll explain in the next part. But to keep things simple for now we’ll use the colorRed keyword afforded to us within Cocoa Touch. Here’s the code I’m using inside viewDidLoad: [super viewDidLoad]; [self.navigationController.navigationBar setTintColor:[UIColor redColor]]; self.navigationController.title = @"Custom Nav"; Working the Navigation Controller You’ll notice that Objective-C 2.0 has adopted a dot-syntax similar to JavaScript. You aren’t expected to fully understand the code above – it’s especially deterring to newbies who have never used Xcode before. But when I’m calling self.navigationController.navigationBar it’s a target to the internal nav bar inside our controller. Then the setTintColor method will change the styles of all buttons and elements inside the navigation bar. You may also notice I’ve set the navigation controller’s title property. This is just a plain string of text which appears at the top of your page view. Build and run the application with CMD+R or click the play button in the top left corner. This will open the iOS Simulator so you can catch a glimpse of how the app will function on a mobile screen. This method works and it’s a great place to start. However I want to include just a bit more code so that we can use a custom image as the navigation background instead. Quit the simulator for now and let’s pop back into Xcode. Creating BG Graphics To save a bit of time I’ve already put together the background images in Photoshop. I’m using a similar design pattern as this indigo nav bar created originally by Jonathan Mulkey. He is a very talented app designer based out of Tennessee. It’s worth mentioning that we need to create two(2) different image files for the background. Regular iPhone 3/3GS users are on the standard 320×480 pixel grid. However the iPhone 4/4S uses a 640×960 grid fitted into the same physical screen size. This means 1 point = 2 pixels and our images will look much more crisp. CustomNavBG.png (320x44px) CustomNavBG@2x.png (640x88px) iOS dev guidelines require that both images are saved under the same name with the larger retina image title appending “@2x” on the end. In our code we will only reference CustomNavBG.png. The Cocoa framework is smart enough to detect when a user is on a retina device and will automatically fill the @2x version instead. Implementing the Background The fastest and most proper way to accomplish a custom navigation background is to build a new UINavigationBar subclass. I know this sounds a bit confusing but it’s really a lot simpler than you think. Right-click(or control+click) on your project in the left pane and select New File. We want an Objective-C Class with a subclass of UINavigationBar. If this isn’t offered in the dropdown menu just manually type it in. You can name this class whatever you’d like – I chose CustomNavBar. Hit “Next” and you’ll end up with a new set of .h/.m files in your project. All we want to do is overwrite a method named drawRect. This is used to create the original background gradient for any default navigation bar. I’ve added my code below for both of the .h and .m files. It should work perfectly if you copy/paste into your own assuming you are using the same class name. # CustomNavBar.h codes @interface CustomNavBar : UINavigationBar @end #CustomNavBar.m codes @implementation CustomNavBar - (void)drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed:@"CustomNavBG.png"]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end Save any changes in both of these files and then click onto your MainStoryboard.storyboard. This contains all the different views within the application. At the very far left is a Navigation Controller and this is what we’re targeting. Click on the top blue bar and open your Identity Inspector(View -> Utilities -> Show Identity Inspector). This should appear in the right-hand window pane. Within this new window you should see a class setting with the value UINavigationBar. You want to change this to CustomNavBar or whatever you named your class files in the previous step. Now the navigation bar is pulling from our custom code instead of the default iOS bar. Build & Run! If you run the application now you’ll notice our top nav bar is pulling in the background image. Success! But the only problem is when you tap on the table cell it loads a new view which uses a back button. This back button is still colored by the red tint we were using earlier. Luckily this is a simple fix. We just need to match a purple/grey color from the background image and use this as our new tint. Click back into MasterViewController.m and find the previous code inside viewDidLoad. I’ve taken the liberty of grabbing an RGB value which fits this background color and set each to different variables. Below is my new tint code: NSInteger red = 95; NSInteger green = 100; NSInteger blue = 130; [self.navigationController.navigationBar setTintColor:[UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1.0]]; We place each color value over the max of 255 and this returns a floating integer. Strictly speaking this is the easiest way to convert RGB from Photoshop into a color in Objective-C. Save and run the project again and you should see much nicer results. Download Source Code Conclusion If you’ve having any trouble be sure to download my demo source code for this project. I’m using Xcode 4.2 with iOS5 which may not convert perfectly down to older versions. But for beginner iOS developers this tutorial should give you a bit of insight into building and customizing your own apps. It’s a truly challenging skill to master yet very rewarding in the long term.