In this screencast, I show you how to build a simple iPad app using the new SplitViewController. The SplitViewController is a new UI view controller for the iPad (only) and is the basis of many iPad applications. It manages two side-by-side view controllers – a list of items that appears on the left side (in landscape mode) and a detail view on the right side.
The template also provides all the code to manage the popover view which is how the item list is displayed when the iPad is rotated into portrait mode, so you don’t have to write any of that code!
As we build the app, you’ll learn the basics of creating a SplitViewController-based app, and how to implement a simple XML reader to read an XML feed, display a list of article titles and load an article into the detail view when its title is tapped in the list.
I’d love to hear your feedback, and I hope you find it helpful.
(I recommend right-clicking and selecting watch on YouTube for the higher res version so you can see the code).
Update (6/26/2011): Get the source code here. Note that I created this using XCode 3 (the previous version to the current, which is XCode 4), so if you run into any trouble getting the code to work, that’s why. I will do an update on this screencast and the code as soon as I can!
You can also do this purely with CSS Media Queries!
Here are the new links, showing the updated CSS Media Queries:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
As you can see, I’ve got three CSS files; one for iPhone, two for iPad and I use the ipad-landscape.css file also for desktop machines with a minimum width of 1025px.
I’m attaching screenshots below showing the results in iPad portrait and landscape, and iPhone.
iPad in landscape orientation:
iPad in portrait orientation:
Now that the iPad is out, it’s time to style your web pages so they look good on both the iPhone and the iPad.
p.s. sorry about the occasional audio interruption, my iPhone was too close to my mic!