Designing a Custom iPhone App Navigation Bar


By Jake Rocheleau | http://designm.ag
-.-
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.

Featured image - custom iPhone app navigation bar

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.

choosing the original project template

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.

Naming your new iOS5 Xcode project

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.

tinted navigation bar to red

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.

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.

creating a new file in Xcode 4.2

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.

setting the custom UINavigationBar class

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.

hideous red-tinted back button

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.

recolored button tint

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.

Author: Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, efficient user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau

About these ads

Todos los días un parte de cada uno de nosotros pierde una parte de sí mismo pero con cierta travesura se postula al infinito digital. Every day. Bit of me®. I'm a Thinker and a Doer Coordinator #OPEN365. Mentoring, Online Advertising Advisor, RRHH, Speaker. Google Adwords Search Engine Optimization & Marketing (SEO - SEM) Linkedin Groups Admin. Strategy and Operations Consulting.

Tagged with: , , , , , , ,
Publicado en ***apps destacada***, Designm.ag
10:00 AM to 05:00 PM | Mon-Fri
+5411 4954.0022 / +54 911 6259.7231
Scroll down on my timeline #gabrielcatalano
about.me/gabrielcatalano

Gabriel Catalano

Procrastination Not AlloweD!

fb/gabriel catalano.in.perfection

febrero 2012
L M X J V S D
« ene   mar »
 12345
6789101112
13141516171819
20212223242526
272829  
Social Technologies Strategist, …procrastination not Allowed!, I’m a Thinker and a Doer Coordinator

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 5.947 seguidores

Comunidad
Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNNEspañol.com

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.947 seguidores

A %d blogueros les gusta esto: