- 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
Navigating with table views
Table views (Figure 4.10) are at the heart of iOS applications. They are ubiquitous, from Apple apps that come installed on iOS devices (Settings, Mail, Contacts) to any app that delivers content to people.
)
4.10 A plain table view navigation.
This section explores some of the types of table views that are possible, and dives into how to implement them in your apps.
Plain table view
The plain table view navigation shown in Figure 4.10 is as native as it gets: it's a plain table with no adornments, and navigates to additional screens in the app. In fact, it's exactly like the table view shown in Apple's iPod application (Figure 4.11).
)
4.11 A plain table used to show playlists in the iPod application on the iPhone.
To code the table, use NimbleKit's NKTableView function. Here's the JavaScript that calls the NKTableView library item shown in Figure 4.10:
var tableView = new NKTableView(); tableView.init(0,0,320,440,'plain'); tableView.insertRecord("Asparagus", "", "", "0", "", "navController.gotoPage('1.html')"); tableView.insertRecord("Bacon", "", "", "0", "", "navController.gotoPage('2.html')"); tableView.insertRecord("Cardamom", "", "", "0", "", "navController.gotoPage('3.html')"); tableView.insertRecord("Daikon", "", "", "0", "", "navController.gotoPage('4.html')"); tableView.insertRecord("Eggs", "", "", "0", "", "navController.gotoPage('5.html')"); tableView.insertRecord("Figs", "", "", "0", "", "navController.gotoPage('6.html')"); tableView.insertRecord("Guacamole", "", "", "0", "", "navController.gotoPage('7.html')"); tableView.insertRecord("Harissa", "", "", "0", "", "navController.gotoPage('8.html')"); tableView.insertRecord("Ice cream", "", "", "0", "", "navController.gotoPage('9.html')"); tableView.insertRecord("Jalapeno", "", "", "0", "", "navController.gotoPage('10.html')"); tableView.show();
When you're making this, you're creating the instance of NKTableView called tableView, defining how much of the screen it takes up—in this case, the entire screen except the status and title bars—and specifying that it's a plain table view (the alternative is grouped, which you will explore next).
After this, use insertRecord to add the desired number of rows (it will scroll, so there really isn't a limit that I'm aware of). The six parameters available are:
- title
- subtitle
- left image
- section number
- right image
- callback
In a basic table view, you leave the subtitle and image parameters empty (images are covered in the next example). The section parameter is used to specify sections in a grouped table view; here it is set to 0 (quirk alert—otherwise the row will not display!). Finally, the callback here is scripted to put the navController function into motion and navigate to screens that would tell people more about these various foods.
Table view with images
Table views can also be designed with images in them. You've seen this in screens like the album view in the iPod app (Figure 4.12).
)
4.12 The album view in Apple's iPod app on the iPhone.
To achieve this result, use NimbleKit's NKImage control and assign the instance a name, in this case, image. Here's a line of JavaScript for this:
var image = new NKImage();
Then you need some images to pull into your table view rows. In a normal-sized row, the height is 43 pixels; you can either size your images to this or let the table view resize them for you. Prepare 72 dpi PNG images and crop them to squares exactly the way you want them. For this sample, I've found images of asparagus and bacon (Figure 4.13), and have deliberately left them different sizes—asparagus.png is 100 pixels square and bacon.png is 183 pixels.
)
4.13 Asparagus! Bacon!
Then you need to add the files to your Xcode project (go to Project and choose Add to Project) so they're in the HTML group (Figure 4.14).
)
4.14 The asparagus.png and bacon.png files, now in the Xcode project.
If you begin with the same code you used in the plain table view section, the changes are highlighted as follows for activating the NKImage control within the table view rows:
var tableView = new NKTableView(); tableView.init(0, 0, 320, 440, 'plain');image.loadFromBundle("asparagus.png");tableView.insertRecord("Asparagus", "",image, "0", "", "navController.gotoPage('1.html')");image.loadFromBundle("bacon.png");tableView.insertRecord("Bacon", "",image, "0", "", "navController.gotoPage('2.html')"); ... tableView.show();
So the main.html file, after adding the image modifications, is
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0,
user-scalable = no" />
<script type="text/javascript" src="NKit.js"></script>
<script type="text/javascript">
var navController = new NKNavigationController();
navController.setTitle("Menu");
navController.setTintColor(0, 63, 78);
var image = new NKImage;
var tableView = new NKTableView();
tableView.init(0, 0, 320, 440, 'plain');
image.loadFromBundle("asparagus.png");
tableView.insertRecord("Asparagus", "", image, "0", "",
"navController.gotoPage('1.html')");
image.loadFromBundle("bacon.png");
tableView.insertRecord("Bacon", "", image, "0", "",
"navController.gotoPage('2.html')");
...
tableView.show();
</script>
</head>
<body>
</body>
</html>
This changes the appearance of the top two rows, as shown in Figure 4.15.
)
4.15 The asparagus and bacon images displayed in their table view rows.
I'm certainly not advocating that you only add photos to some of the rows in a table view. I just didn't want to hunt down images of all those foods for this example!
Grouped table view
The other main category of table view is a grouped view (Figure 4.16). These are also quite common, such as this one from the Settings app on an iPhone.
)
4.16 A grouped table view from the iPhone's Settings app.
The grouped table view works well if you have items that relate to each other. With grouped views, you can also relate them visually. Let's build one of our own to see how it works.
Figure 4.17 shows what you'll be making in this example.
)
4.17 A grouped table view showing foods in food groups.
And the following code shows the JavaScript that makes it. I've highlighted the code differences between the grouped and plain examples:
var tableView = new NKTableView(); tableView.init(0, 0, 320, 440,'grouped');tableView.insertCategoryNamed('Dairy');tableView.insertRecord("Butter", "", "", "0", "", "navController.gotoPage('1.html')"); tableView.insertRecord("Ice cream", "", "", "0", "", "navController.gotoPage('2.html')");tableView.insertCategoryNamed('Fruit');tableView.insertRecord("Apple", "", "", "1", "", "navController.gotoPage('3.html')"); tableView.insertRecord("Mango", "", "", "1", "", "navController.gotoPage('4.html')");tableView.insertCategoryNamed('Vegetables');tableView.insertRecord("Carrot", "", "", "2", "", "navController.gotoPage('5.html')"); tableView.insertRecord("Onion", "", "", "2", "", "navController.gotoPage('6.html')"); tableView.show();
As you can see, you need to set the type in tableView.init to grouped and then add the .insertCategoryNamed lines for each group. The thing that's a bit strange, however, is that those lines themselves do not group the items. What actually groups them is the fourth parameter of .insertRecord. So, in this example, the three groups are numbered 0, 1, and 2.
Unlike the previous elements, the table view does not have a set dimension in both width and height because the height depends on the number of rows you use. As shown in Table 4.4, table views only have set widths.
Table 4.4. Widths of the iOS table view (in pixels)
|
Orientation |
iPhone/iPod Touch |
iPhone 4 |
iPad |
|
Portrait |
320 |
640 |
768 |
|
Landscape |
480 |
960 |
1024 |