Latest Update: Change the RSS Reader App to Read Twitter RSS Feed
Latest Update: Add Google AdMob in Rss Reader App

The best way to study new technology is learning from examples. The best example is a real app which is meaningful and useful. Among several features I’ve done in past few fews, I think any one feature can be a very good example for beginner to learn. Therefore, I decide to create some real apps which will serve very simple but useful functions.

In this IOS developer tutorial, I will create a RSS feed reader step by step. It will cover several IOS development knowledge:

• iPhone Rss Reader App IOS Tutorial 1: StoryBoard UI Programming
• iPhone Rss Reader App IOS Tutorial 2: HTTP Network Programming in IOS
• iPhone Rss Reader App IOS Tutorial 3: XML Parser in IOS
• iPhone Rss Reader App IOS Tutorial 4: Show Rss Feed in UIWebView

Several weeks ago, I wrote an post, IOS Object C Storyboard Programming Tips For iPhone and iPad, which already covers some knowledge about StoryBoard UI programming. This time, I will use the storyboard to create an UITableViewController. In this tutorial, we will cover following topics:

• how to build iPhone App in Storyboard
• how to connect UI in storyboard with class file
• how to show content in table view cell dynamically

Build iPhone App in Storyboard

My working environment is Mac OS Snow Leopard 10.6.8, with Xcode 4.2 and IOS 5 SDK. First, lets create a new Xcode project. In the next new project dialogue box, we choose “Single View Application”.

Next we need to give our product a name and specify the company identifier. This company identifier will be the same when you create provision file for your app in apple developer portal. In current stage, it doesn’t matter. You can specify any company identifier, for example, com.jmsliu or com.yourname. In the device family option, we will choose iPhone. Be default, the “Use Storyboard” and “Use Automatic Reference Counting” will be checked, and we remain it as default. After we click next, we will get our working space.

In the summary, we can find “Main Storyboard” in “iPhone / iPad Deployment Info” section. Currently, this drop down menu has only one option, “MainStoryboard”. That’s because there is only one storyboard file in our project. We can find this file in the left side file list. The file name is “MainStoryboard.storyboard”. The first part “MainStoryboard” is the file name, and last part “.storyboard” indicates the file type. Now, let’s select the “MainStoryboard.storyboard” file by clicking the file name. Once we select the storyboard file, Xcode will give us the storyboard editor.

Currently, there is only one view on the storyboard. This view controller is not what we want. What we need is a tableViewcontroller, so we click to select the viewcontroller, type “Delete” key to delete it from storyboard. Then, we drag a table view controller to the storyboard stage from the right button object library.

Now, we hold shift key to select both “ViewController.h” and “ViewController.m” and delete them. In the popup box, we choose “Delete” to delete them permanently. Then we right click on the MainStoryboard.storyboard file, and select “New File…” to create our own class controller object c file. In the new file dialogue, we select “UIViewController subclass” and click next. In next dialogue, we specify our own class name as RssTableViewController and select UITableViewController as subclass of value and click next. In the last dialogue, click create. Now, we get two new files “RssTableViewController.h” and “RssTableViewController.m” in the lift panel.

Connect UI in storyboard with class file

There are several steps to connect the table view controller in storyboard with our RssTableViewController file. First, we go to the storyboard editor and select the table view controller. Open the identity inspector panel and type our class name, RssTableViewController in the class field. Now, our view on storyboard and file are connected.

Show content in table view cell dynamically

Next, we need to show content to our table view. In our rss application, we will show the RSS feed article titles in the table cells. Before I show you how to display the titles, we need to prepare a data. Usually, the data will be returned by Http Request, which will be covered in the post HTTP Network Programming in IOS. In this post, we will build a sample data structure manually. We define a new variable rssData in the RssTableViewController.h, synthesize and initialize it in the RssTableViewController.m.

After we get the data ready, we need to override the following three methods:

• – (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
• – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
• – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

//in RssTableViewController.h
@property (retain, nonatomic) NSMutableArray *rssData;

//in RssTableViewController.m
@synthesize rssData;

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    rssData = [NSMutableArray array];
    [rssData addObject:@"Article Title 1"];
    [rssData addObject:@"Article Title 2"];
    [rssData addObject:@"Article Title 3"];
    [rssData addObject:@"Article Title 4"];
    [rssData addObject:@"Article Title 5"];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return rssData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    [cell.textLabel setText:[rssData objectAtIndex:indexPath.row]];
    
    return cell;
}

Now our first version of Rss Reader App is ready to run. Here is the result:

Get Full Source Code under $2.99

You can get the project source code for this tutorial at $2.99. It is fully functional. With this source code, you can change it and monetize it with your own iAd account or AdMob account. Everything is under your control.

• You can customize it as your own product;
• You can add AdMob or iAd to monetize it;
• You can use this source code in your own project, without any constrain;

Next Tutorial: HTTP Network Programming in IOS

In iPhone Rss Reader App IOS tutorial 2, I will show you how to load rss feed from a real website. It will cover the http request knowledge and http response knowledge in IOS.