- What is the status bar?
- Implementing the title bar
- Designing with tab bars
- Navigating with table views
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Implementing the title bar
The next major element of the iOS user interface is the title bar (Figure 4.4), located immediately below the status bar in an app screen. The title bar is an absolutely critical element. As the name implies, it often confirms the title of an app upon launch. And the title bar functions much like the title of a web page in a site: It's the landmark that helps you maintain your bearings as you move from screen to screen through the app.
)
4.4 The iOS title bar.
The title bar has a default Apple color of blue-gray. Keeping the default color is a great design decision when you want to maximize the "nativeness" of your app.
On the other hand, setting a custom background color for the title bar is a nice design opportunity if you, your employer, or your client wants to brand an app a bit more. So I encourage you to consider this option, too. Setting a custom color can be a nice way to enhance the brand identity of an app while still keeping the familiar dimensions and gradient.
Let's walk through how to do this. The basic JavaScript is below (and the variables you can change are highlighted)
var navController = new NKNavigationController();
navController.setTitle("Title Here");
navController.setTintColor(127, 62, 152);
Note that the NimbleKit library item is called NKNavigationController (and not NKTitleBar). This is because as a user navigates into an app (via a table view or tab bar navigation), the NKNavigationController automatically adds native back buttons so users can return to where they started.
Regarding the title displayed in the bar, it has a limit, of course, and this depends on the device you're using—a screen title on an iPod touch or iPhone needs to be shorter than one on an iPad. But keeping them short is a good practice anyway. If you end up choosing a title that's too long, it will automatically be truncated with an ellipsis at the end.
The color setting uses RGB settings just like the CSS rgb color property does. So in the previous code example, I selected a violet hue to match a client's brand. I used Adobe Photoshop to open a file with the color palette in it, and used the Color Picker (Figure 4.5) to tell me what the RGB values were.
)
4.5 Using the Color Picker in Photoshop to find out a hue's RGB values.
Note that the gradient effect comes standard with the NimbleKit title bar.
Table 4.2 shows the size of the title bar on the various iOS devices and in both portrait and landscape orientations for your planning purposes.
Table 4.2. Dimensions of the iOS title bar (in pixels)
|
Orientation |
iPhone/iPod Touch |
iPhone 4 |
iPad |
|
Portrait |
320 x 44 |
640 x 88 |
768 x 44 |
|
Landscape |
480 x 44 |
960 x 88 |
1024 x 44 |