- 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
Designing with tab bars
The tab bar (Figure 4.6) gets us into more interesting iOS user experience territory, as it's one of the principal ways to navigate between different screens in a single application.
)
4.6 The iOS tab bar.
Tab bar with standard categories
Now you'll learn how to code the sample displayed in Figure 4.6. In this example, there are three tabs that navigate to three other pages. Each tab has two components: the titles (Favorites, Featured, and Top Rated) and an icon for each.
This first example does a lot of heavy lifting for you, because NimbleKit is able to call some of these native items that are built right into the operating system. In other words, both the titles and the icons come for free.
The basic JavaScript for this is (variables you can change are highlighted)
var tabController = new NKTabBarController();
tabController.setTabBarForPage("main.html", "", "1");
tabController.setTabBarForPage("two.html", "", "2");
tabController.setTabBarForPage("three.html", "", "3");
The way this works is that the page names for each tab are HTML file names. The second setting is for tab labels (covered in the next example), and the third setting refers to built-in categories and icons. The tab label settings in the previous code listing are left blank because they're not used when calling built-in tab categories (which are automatically labeled).
There are currently eleven built-in categories and icons (Figure 4.7).
)
4.7 The built-in tab navigation categories.
Tab bar with custom categories
On the other hand, you may not need these categories. In that case, you'll want to assign your own labels to the tabs. In fact, you can even design your own icons and have them integrated into a tab bar. Figure 4.8 shows a sample tab bar I've designed to demonstrate this.
)
4.8 Design your own custom tab navigation.
Here's how the JavaScript differs for a custom version:
var tabController = new NKTabBarController();
tabController.setTabBarForPage("main.html", "Location",
"icon_globe.png");
tabController.setTabBarForPage("two.html", "Menu", "icon_
fork.png");
tabController.setTabBarForPage("three.html", "Tweets",
"icon_bird.png");
Take note of the items in the code that you must set:
- The first item is the page to which the tab navigates.
- The second item is the text label for the tab.
- The third item is the icon.
I've found that designing a PNG image that is 30 x 30 pixels with a transparent background works well for a tab icon. Of course, beyond those basic specifications, the scale and detail of the image will determine whether it is recognizable at that size. But as long as the PNG is a solid image overlaying a transparent background, the rest of the native effects (gradient, glow, and white and blue colors) are applied for free by NimbleKit and the operating system.
So what is the maximum number of tabs you can display in a tab bar navigation? For the iPod touch and iPhone it is five, and for the iPad it is eight. Except you can actually go beyond that—when you exceed the maximum number of tabs that the navigation will display, it automatically adds a More tab in the last position and puts everything else into a table view navigation (which you'll learn more about next) (Figure 4.9).
)
4.9 An iPod touch/iPhone tab bar navigation with six categories, demonstrating how the More tab is automatically added by NimbleKit. Nice!
Table 4.3 shows the size specifications for the tab bar navigation, for purposes of laying out your screen design.
Table 4.3. Dimensions of the iOS tab bar (in pixels)
|
Orientation |
iPhone/iPod Touch |
iPhone 4 |
iPad |
|
Portrait |
320 x 49 |
640 x 98 |
768 x 49 |
|
Landscape |
480 x 49 |
960 x 98 |
1024 x 49 |