BlogReader App in Swift

In this iOS development tutorial, we will see how to write a blog feed Reader app in Swift Programming Language. For this demo, let us take the blog feed ( from Learning Swift and iOS Development blog. This is a WordPress blog and the number of posts in the feed is set to 10 (This is configurable using WordPress Settings). For parsing this feed we will be using NSXMLParser and the parsed data will be displayed in a TableView. Then when the users taps on any post, the post URL will be displayed in a UIWebView.

Download source code from GitHub

201407311416.jpg 201407311417.jpg

Click File menu, select New then Project from the sub menu.


In the template screen, choose Single View Application and click Next.


In the options screen, enter the Product name and select language as Swift. Then choose a folder and save this new Project.


Add a new TableViewController

Navigate to Main.storyboard and delete the default ViewController. From the object library, drag and drop a TableViewController on to the Storyboard.


Now embed this TableViewController in a NavigationController, by clicking Editor menu and selecting Navigation Controller under Embed In menu option.


Select ViewController.swift file under Project Navigator and delete the file.


Right click on the Project folder and select New File option.


In the Choose a template screen, select Cocoa Touch under iOS and click Next button.


In the Choose options for new file screen, enter the class name as “BRTableViewController”, select Subclass of UITableViewController and Language as Swift.


Using NSXMLParser for parsing the blog feed

Navigate to BRTableViewController.swift class declaration, add NSXMLParserDelegate after UITableViewController.

class BRTableViewController: UITableViewController, NSXMLParserDelegate{

This is required as we need to use some of the functions defined in NSXMLParserDelegate for parsing the feed. Now declare a NSXMLParser variable called parser.

var parser: NSXMLParser = NSXMLParser()

Then update the viewDidLoad method with the following code.

  override func viewDidLoad() {


let url:NSURL = NSURL(string: “”)

parser = NSXMLParser(contentsOfURL: url)

parser.delegate = self



In the above lines of code, we are defining url for holding the feed. Then reinitialising the parser object with url and also setting the parser delegate to self. The parse( ) method would start parsing the feed. Before we write further code let us understand the structure of the blog feed. If you open the feed address ( in your browser, you should notice the following XML structure.
Each item element in the above screenshot provides details about the blog post. And on expanding item element, you should notice the following structure.
201407311110.jpg For this demo, we will be using the title and link elements only. The title will be displayed in the TableView and link will be displayed in UIWebView. In order to hold these title and link, let us create a placeholder class with two properties.
Right click on the Project folder, select New File and choose Swift File under iOS. Click Next and save the file as BlogPost.swift to the Project folder.
Navigate to BlogPost.swift, declare the class name as BlogPost and add two properties for holding title and link.

class BlogPost {


  var postTitle: String = String()

var postLink: String = String()


And to hold all the blog posts let us define variable of type array. Navigate to BRTableViewController.swift and add the following code after the parser variable

  var blogPosts: [BlogPost] = []

Implement the delegate method of NSXMLParser

Add the following three methods to BRTableViewController.swift. You can use Xcode autocomplete feature for adding these methods.

  // MARK: – NSXMLParserDelegate methods


func parser(parser: NSXMLParser!, didStartElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!, attributes attributeDict: [NSObject : AnyObject]!) {




func parser(parser: NSXMLParser!, foundCharacters string: String!) {




func parser(parser: NSXMLParser!, didEndElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!) {




As already observed in structure of the blog feed, the blog post is specified under the element named item. So we need to do all initialisation of the variables when the parser starts with this element name. Let us add the following the variables to the class declaration.

  var postTitle: String = String()

var postLink: String = String()

var eName: String = String()

Then initialise these variables didStartElement function when elementName is “item”

  func parser(parser: NSXMLParser!, didStartElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!, attributes attributeDict: [NSObject : AnyObject]!) {

eName = elementName

if elementName == “item” {

postTitle = String()

postLink = String()



Then update foundCharacters function with the following code.

  func parser(parser: NSXMLParser!, foundCharacters string: String!) {

let data = string.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceAndNewlineCharacterSet())

if (!data.isEmpty) {

if eName == “title” {

postTitle += data

} else if eName == “link” {

postLink += data




In the above lines of code, we are removing the white space and newline character set. Then assign the values to corresponding variables if the content is not empty. Make sure to the append the values as the foundCharacters function will be called number of times for the same element name.
Then finally we add the following lines of code to didEndElement function. An instance of BlogPost is created and set with title and link values. Then this object is added to the blogPosts array.

  func parser(parser: NSXMLParser!, didEndElement elementName: String!, namespaceURI: String!, qualifiedName qName: String!) {

if elementName == “item” {

let blogPost: BlogPost = BlogPost()

blogPost.postTitle = postTitle

blogPost.postLink = postLink




Displaying the content in TableViewController

Navigate to the Table View Data source section and remove the commented line in numberOfSectionsInTableView and set the return value as 1.

  override func numberOfSectionsInTableView(tableView: UITableView!) -> Int {

return 1


The number of rows iN the table view will be equivalent to the total count of objects in blogPosts array. Update numberOfRowsInSection to reflect the array count.

  override func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int {

return blogPosts.count


Now uncomment cellForRowIndexPath function and update the function with the following lines of code.

  override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! {

let cell = tableView.dequeueReusableCellWithIdentifier(“Cell”, forIndexPath: indexPath) as UITableViewCell


let blogPost: BlogPost = blogPosts[indexPath.row]

cell.textLabel.text = blogPost.postTitle

return cell


In the above lines of code, we have changed the cell identifier to “cell”. Then retrieved the content for the cell using the row index path from the blogPosts array. Then assigned the value of post title to cell’s textLabel.

Now navigate to Main.storyboard, select tableview cell and set the Identifier to Cell using the Attributes inspector.


Then navigate to TableViewController and set the Class as BRTableViewController using the Identity inspector.


Now if you compile and run the project in iOS simulator, you should see the list of blog posts as shown in the below screenshot.


Let us make some cosmetic changes to the look of the table view. Navigate to Main.storyboard and add the title to navigation bar as Blog Reader.


Then add the following function to BRTableViewController.swift for adjusting the row height of the tableview cell.

  override func tableView(tableView: UITableView!, heightForRowAtIndexPath indexPath: NSIndexPath!) -> CGFloat {

return 50.0


Now if you try to run the app on the simulator it should look as shown below.


Displaying the post content in UIWebView

Now when users taps on post title, the user must be taken to another screen displaying the content of the post. For this purpose we to add another ViewController and use UIWebView for displaying the post content. Click Main.storyboard and add ViewController from object library to Storyboard. Now hold control and connect the UITableViewCell from BRTableViewController to the new ViewController, set the segue as “Show”. Then Provide the name of the Storyboard segue as viewpost.


Add a UIWebView control from object library to ViewController. Right click on the Project folder and select New File for adding ViewController class.


Select template as Cocoa Touch class and click Next button. Provide a name to the Class as PostViewController with Subclass of UIViewController. Then click Next and save the file to the Project folder.


Using the Identity inspector the set the class name for the ViewController in the storyboard as PostViewController.


Let us also add a UIActivityIndicatorView that would be displayed till the blog post is getting loaded on the WebView.


Open PostViewController.swift file and add IBOutlets for UIWebView and UIActivityIndicatorView controls.

  @IBOutlet var webView:UIWebView!

@IBOutlet var activityIndicator: UIActivityIndicatorView!

In the class declaration, next to UIViewController add UIWebViewDelegate. This is required as we will be implementing two of the UIWebViewDelegate functions.

class PostViewController: UIViewController, UIWebViewDelegate

Then add the following postLink property, the value for this property will be set when the user taps any post on table view.

  var postLink: String = String()

Now update viewDidLoad function with following lines of code

  override func viewDidLoad() {


let url: NSURL = NSURL(string: postLink)

let request: NSURLRequest = NSURLRequest(URL: url)


webView.delegate = self


The above lines of code, calls loadRequest of UIWebView by passing a NSURLRequest object. Then sets the delegate for webView to self. Now implement the following UIWebView delegate functions for showing and hiding Activity Indicator View.

  func webViewDidStartLoad(webView: UIWebView!) {

activityIndicator.hidden = false




func webViewDidFinishLoad(webView: UIWebView!) {

activityIndicator.hidden = true



Finally use the connection inspector in the Interface builder to connect the IBOutlet variables (webView and activityIndicator) to the respective controls on the ViewController.


Navigate to BRTableViewController.swift and add the prepareForSegue function. Check if the identifier is “viewpost” and then retrieve the post details for the selected row using tableView.indexPathForSelectedRow(). Then assign the post web url to viewController’s postLink property.

  override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {

if segue.identifier == “viewpost” {

let blogPost: BlogPost = blogPosts[tableView.indexPathForSelectedRow().row]

let viewController = segue.destinationViewController as PostViewController

viewController.postLink = blogPost.postLink



Now if you compile and run the project, you should be able to view the post details on tapping any of the post in the table view.


Download source code from GitHub

In Category: ios, Programming

Ravi Shankar

A polyglot software developer and now exploring Swift and iOS development. If you would like to learn from me then check out services page.

Show 27 Comments
  • Jesse Shanks August 18, 2014, 12:22 am

    Solid as a rock. Excellent step-by-step. Thanks.

  • Salvios September 5, 2014, 1:26 pm

    Otiimo very explanatory tutorial, you could possibly insert images in cells that reflect those of the blog and the date when it was added to the post?
    Thanks for the help that you provide to us beginners of programming ….

  • imtikon September 12, 2014, 2:09 am

    Hello shankar!

    This looks a very good tutorial. By the way I’m using xcode-6 GM version but your source-code is not running. Even I tried to do code in Swift following your screenshots. But successfully failed 🙁 I’m new to ios development. So can you please help me to learn TableView with XMLParsing. Thanks in advance.

    • rshankar September 14, 2014, 6:33 pm

      Thanks for letting me know about the problem. The code has been updated now for Xcode 6 GM seed, please try now.

  • Enrique October 6, 2014, 12:19 pm

    Hello and thanks for the tutorial.
    The code works right except when running in a real device. I get a bad access code 1 in this line:

    parser = NSXMLParser(contentsOfURL: url)

    I try to fix it but im quite new and can´t.


  • Mete January 28, 2015, 1:19 pm

    Hello. Thanks for the tutorial.

  • Coupon Bari February 3, 2015, 7:16 am

    hey, thanks fot the code, but how can I parse image (by url) and show in the table view? i’ve create a custom cell that include the uiimageview.


  • Chris March 9, 2015, 5:22 am

    I’m struggling with getting this line in the very last step to work. It keeps throwing me an error:

    let blogPost: BlogPost = blogPosts[tableView.indexPathForSelectedRow().row]

    It says: ‘(UITableView, numberOfRowsInSection: Int) -> Int’ does not have a member named ‘indexPathForSelectedRow’

  • Anthony Dias April 29, 2015, 9:03 am

    Hey rshankar,

    Thanks for the code, its run, but doesn’t show nothing in simulator, only a tableview, and clicking in any cell, let us to webview with nothing too, why’s that?, please help!!!

    Thansk again….

    • rshankar April 29, 2015, 9:13 am

      I just tried to the source again with Xcode 6.3 and didn’t see any problem?
      What is the version of Xcode and iOS SDK installed on your Mac?

  • Anthony April 29, 2015, 9:46 am

    My Xcode is upgraded, I downloaded your code and run it here, and work fine, and i compered with my code, is equal, but my code not shows nothing in simulator, it runs but don’t show nothing… I don’t understand…

  • Anthony April 29, 2015, 10:54 am

    Hey rshankar,
    I found the error, and now it runs nice, thanks for the code…

  • Justin C. May 10, 2015, 3:06 am

    Hey rshankar – great tutorial… as someone just starting out in Xcode, I really learned a lot! One question: is there a way to scale pages in the UIWebView (or in the PostViewController.swift file) so that each link, when tapped on in the TableView, loads the with the entire webpage showing? Right now, when I click on a link in the TableView, the webpage that loads only displays about 2/3 of the total page, and I have to pinch/zoom to see it all. Thanks!

    • rshankar May 10, 2015, 7:59 am

      Have you tried UIWebView property scalesPageToFit = YES. Let me know if does not solve the problem.


      • Justin C. May 10, 2015, 4:55 pm

        That worked, thank you!! I also tried setting the Constrain tool at the bottom of the Main.Storyboard to 0 instead of -16 (was -16 the default?), so I’m not sure if that had any effect, also. Thanks again for the scalesPagesToFit solution!

  • John Doe June 29, 2015, 3:59 pm

    In my RSS feed there is an image tag that begins “<IMG". I want to pull in the address and show the image in each cell like other RSS feeder apps do. Do I create a var of type string called entryPic. Kindly email me if I am going in the right direction.

    • rshankar June 29, 2015, 4:30 pm

      That sound ok to me. And when displaying the image, convert the string URL to UIImage.

      • John Doe June 29, 2015, 5:50 pm

        rshankar can i send you an email on what I have done thus far. What is it I cant seem to find it on your website. I have been developing for a few months. Actually I started years ago under Objective C. Then I stopped developing and then picked up a few months ago. Now there is swift which is kicking my butt. Can you give me an example on how to convert the string to a UIImage ?

  • James August 20, 2015, 11:01 pm

    Any way to add more than one feed?

  • Ethan September 22, 2015, 4:44 pm

    I am running this in Xcode 7, and no blog posts are coming up in the table view.

    I am running the source code with no errors, any advice on a fix?

  • James September 28, 2015, 10:27 pm

    How could you make this fetch the rss data asynchronously?

  • xuanthinh December 9, 2015, 9:39 am

    I am newbie, can you give project for me? Thanks very much!

  • Milos February 1, 2016, 1:48 pm

    Hay Ravi,it’s very good tutorial. I have one question how to import image next to the title in table view?


  • Milos February 17, 2016, 11:30 am

    Hello Ravi, have a two question for you. How to display older post and how to create a favorite posts by tapping on some button?

    Thanks very much


Leave a Comment