View a WordPress Post in your iOS app using Swift

Swift: View a WordPress Post in your iOS App

The following tutorial is a continuation of the Create a WordPress Latest Posts iOS app in Swift tutorial. Now that you know how to generate a basic table displaying your recent WordPress posts, how do we actually see each individual post when a table cell is selected?

Oh Snap! New tutorials!

Oh Snap! New tutorials!

The Approach

There are a few ways to approach this. You can simply render the excerpt or content from the JSON feed. The drawback to this approach is that Swift has no native classes to convert HTML output. The method we will be using is to use a UIWebView object to render our posts. The UIWebView object is a built in browser that renders web pages in the same fashion as the Safari browser in iOS.

Adding the Web View

Navigate to the Main.storyboard and add another view controller.

new-viewcontroller

Next, control + drag from the TableViewCell of the Latest Post Scene to the new view controller.

tabelcell-new-viewcontroller

Choose Show for the segue action

segue-show

Progress so far…

Run the simulator. Now you’ll find that when you tap a preview cell a black scene appears. Believe it or not, we are close to being done.

almost-there

Drag a UIWebview into the new view controller.

add-uiwebview

Set the constraints for the UIWebView to what you see below.

uiwebview-constraintsThe contraints are set to:

  • Equal Width to Super View
  • Equal Height to Super View
  • Center Horizontally
  • Center Vertically

Adding Swift

Go to File > New and add a new Cocoa Touch Class to your project. Make sure iOS Source is selected from the dialog box.

cocoa-touch-class

Select a standard UIViewController class and name it “WebViewController”

webviewcontroller

On the Main.storyboard, select the view controller and attach to it the WebViewController class from the Identity Inspector.

add-webviewcontrollerclass

You’ll now the view controller is selected when it’s highlighted blue.

Now create an IBOutlet for the UIWebView

webview-iboutlet

Navigate to the WebViewController file. Add the UIWebViewDelegate to the WevViewController class like so:

In a near future tutorial, I will cover why the UIWebViewDelegate was added.

This is what your completed WebViewController Class should look like:

But if you try to run this in the simulator, it will crash the app. What we have to do is prepare the segue to the selected JSON object to the WebViewController class.

Navigate to the LatestPostsTableViewController.swift file and uncomment the prepareForSegue function. Inside prepareForSegue function, add the following:

What your entire prepareForSegue should look like:

Now let’s fire up the app and see what we have:

single-post

😮

 

Responsive/Adaptive Layout Considerations

I’m going to assume that you are using a responsive layout for your WordPress theme (you better be). You probably noticed that opening up your site inside an app is a little different than browsing your site from mobile Safari. For one, we have a large navigation bar taking up real estate at the top of the page. We didn’t have to use a push segue for this tutorial, we could have very easily used a popover segue. But if you ever find yourself in a position where you need specific styling for your in-app rendered web page, use the following PHP conditional, you can place this in the functions.php located in the theme’s folder of your WordPress installation:

Questions, corrections or gripes? Leave a comment below.

And don’t forget to Git the latest version of this project