Tackling that handy index on the right side of table views is really not that complicated. In fact, it only requires that you implement two methods. In this tutorial, I’m going to take you step-by-step on how to wire it all together.
Tab bar based apps are probably as common as table-based apps and it’s even more common to see them combined. That’s what we’re going to do in this tutorial.
There is a very easy way of creating a tab bar application. In fact, it’s so easy it requires no work whatsoever. When you choose to create a new iPhone application in Xcode, one of the options is Tab Bar Application. Just the bare-bones template provided by Apple gives you a fully-functioning app with two tabs. That is not what this tutorial will be about. We are going to create a tab bar controller programatically. It’s really a lot easier than most people think.
This tutorial is a continuation of my previous tutorials so if you haven’t followed them, it’s a good time to catch up.
We’re going to be starting off from a slightly modified version of the previous source code. You can download the primer code for this tutorial here: MyDVDLibrary04Primer. The only changes made were some name changes (DetailViewController became DvdInfoViewController) and I organized all classes into groups.
Also, I’ve recently upgraded to OS X Snow Leopard + Xcode 3.2 with iPhone SDK 3.0 (not 3.1 yet) so the project was compiled on that platform.
I’m going to build this tutorial on the previous two so if you haven’t checked them out yet, you can see the first one here and the second one here. You can also download the source code on the bottom of each tutorial.
We used UITableViewController to build out our root view controller that lists all the DVDs from our data file. Then we customized each cell by adding a DVD cover and some basic info about each movie. Tapping a row in the table caused the app to go to a detail page which was also a table displaying expanded info about the selected movie. That’s the part we’re going to work on now.
Since we’re going to be completely removing the detail view controller we used in the previous tutorials, let’s just start from there. Instead of walking you through deleting the controller and removing the appropriate functionality, download this source code that will get you started. You’ll get the root view controller with customized cells in it. However, tapping on any of the rows won’t do anything, yet. Download the primer project here: MyDVDLibrary03Primer.
Since our test data file only contains title, length, image and release date for each movie, that’s not going to cut it when trying to design a detail view page. We’ll at least want to add the description of the movie and maybe also its genre. This can be very tedious to do in a plist like we’re using right now but it will get a lot easier once we start using Core Data that I will cover in later tutorials.
I won’t make you add all the data by hand so for a shortcut, download the completed plist file here and replace your existing one that can be found in Xcode under the Resources folder: TestData.plist.
In Xcode’s file browser on the left, right-click on the Classes folder and choose Add -> New File… . Under Cocoa Touch Classes group choose UIViewController subclass and make sure to check the With XIB for user interface checkbox. This will not only create our subclass but also the NIB file that we’ll use to layout our UI components.
If you followed my first tutorial on UITableView (link | source code), you now have a very simple app that shows a list of DVD titles and clicking any of the titles shows you a detail view page with more information about the DVD. That’s all nice but we really want to make it a little bit prettier. We could display the length of each movie right on the listing page. Also, we have this coverImage field in our data set, let’s use it.
What we want is for our home screen to look like this:
We can accomplish that by customizing UITableViewCell. There are 2 ways of going about it:
In reality, you can also choose a hybrid approach where you create some UI elements in the Interface Builder and some programmatically.
The two approaches both bring some advantages and disadvantages with them.
Interface Builder
If you decide to go the Interface Builder route, you’ll find it very easy to create and customize your cells. Any subsequent edits can also be done quite easily since you’re simply rearranging elements visually. The downside is speed and performance since the system needs to render each view in a cell individually. If your table view has thousands of rows in it, this may/may not affect the performance of your app, depending how complicated your cell is.
Programmatically
This one involves a lot more work. You are responsible for creating each UI element by hand in the code. That can be very tedious and any edits you need to make in the future require code changes. Also, you’ll need to set up all the autosizing masks yourself. The upside is performance. Since the system will draw each cell as one view, the performance gain can be very significant.
Ok, let’s start with something really simple. We’ll be creating an app to keep track of your DVD library. The app will have a table view, a detail view and some basic navigational components.
I assume you have Xcode and iPhone SDK 3.x already installed (I’m using version Xcode 3.1, with 3.2 being the newest at the time of this writing). I also assume you know how to create a project so I’m not going to cover those little things here. Lastly, I assume you have some knowledge Objective-C, its principles, syntax and paradigms.
Create a “Navigation-based Application” and name it “TableViewApp.” Right off the bat, you’ll have an empty app, which is pretty much useless. You can run it using Cmd+R.
Right-click on the Resources folder and choose Add -> New File. Under Other category, choose Property List. Name it TestData.plist. This is basically an XML file that will have an empty Dictionary in it by default. Change Dictionary to Array since we’re going to be adding numerous “DVDs” which will be described as individual Dictionaries.
You can add data to it by simply clicking the little button to the right of the Value column. We will be adding information about your DVD collection to it so the schema of your data set could be something like this:
Of course, this could be extended to more fields such as director, genre, aspect ratio, etc.
Following this schema, add a few items to your dummy data set. You’ll eventually want to have your file looking something like this:
If you don’t feel like typing all this info in, you can download the file here: TestData.plist.
Apple has finally released their SDK today. A week behind the schedule but at least it’s here.
Along with this announcement came another one. Enterprise services are getting a huge boost by supporting the push technology, Cisco IPSec VPN, Certificates and Identities or WPA2, among others. However, the biggest one is support for Active Sync and Microsoft Exchange. These new enterprise features will be available via June’s software update (free for iPhone, paid for iPod touch) and is also available in beta for US-based businesses that qualify.
The SDK is now available for download on ADC.
The technologies used in the SDK are divided into these layers:
Cocoa Touch layer lets you access technologies such as Multi-touch events, Multi-touch controls, Acceleromter, View Hierarchy, Localization, Alerts, Web View, People Picker, Image Picker or Camera
This one will probably get the most attention. Especially with combination with Cocoa Touch. You get your hands on Core Audio, OpenAL, Audio Mixing, Audio Recording, Video Playback, JPG, PNG, TIFF, PDS Quartz, Core Animation and Embedded OpenGL
Core services is more lower-level oriented and will make a lot of sense for business-like apps. It includes Collections, Address Book, Networking, File access, SQLite, Core Location, Net Services Threading, Preferences, URL utilities
And finally, the OS layer lets you really optimize you app by talking to low-level services such as OS X Kernel, BSD TCP/IP, Sockets, Power Management, Keychain, Certificates, File System, Lib System, Security, Bonjour
You will need to have Leopard 10.2 installed on an Intel machine to use the SDK. It comes complete with enhanced Xcode and an iPhone emulator. I just downloaded it (their site is currently very slow) and will be trying it out. I will write up a post once I play with it a bit. I’m so excited, YAY!! 