Swift App Tutorial: SwiftStocks (Part I)
During this tutorial we are going to develop a simple Swift app. We will create and app with swift that will show the value of some stocks. The app will have the following functionalities:
- Show a table with different stocks and values
- Search for new stocks.
- Show an individual stock in detail.
What you will learn:
- How to create a Swift project (Part I)
- How to hide the status bar (Part I)
- How to use UITableView in Swift (Part I)
- How to use tuples in Swift
- How to use switch in Swift
- How to use singleton pattern in Swift (Part II)
- How to use web services in Swift (Part II)
- How to use the NSNotificationCenter in Swift (Part II)
In order to get the stock values, we will use Yahoo Finance API. Hope you enjoy this tutorial!
STEP 1: Take your time, keep Xcode closed for a while.
The most common mistake is to start coding without planning. STOPPPPP!. Take a deep breathe, and think for a moment. So close Xcode now. Take your time, plan your design, and make a simple sketch. Ok, let’s keep working on this: The first thing we have to do is to think about:
- How many viewControllers we will have
- Which functionalities will go in each viewController
- How we will connect each one to the others
- User interface, navigation between screens and patterns to use.
So we wanted an app, that should show the user a table with some stock values, with a search functionality to add new values, and with a detailed screen for one stock in particular. In this scenario, it seems that 3 different screens with 3 viewControllers should be a good start point.
- Stock Table viewController for the stock values
- Stock Search viewController for the search functionality
- Stock Detail viewController for individual stocks values
And what about the stock data that we are going to show? who will get that data in order to display it? mmmm…Maybe we could use a singleton Manager to be responsible of gathering it… Lets see how this would look like: 
Not too bad right? So now yes, it is your time beloved Xcode…let’s open it and start coding!!!!!!
STEP 2: The Swift project
In Xcode, go to File>New>Project, and follow the screenshots steps: 
Ok, Xcode provide us a project template with the necessary code to start our financial app. In Main.storyboard you will find the first (and only for now) viewController of your app. Open it. 
Based in our model, the first viewController should show the user a table with some stocks data. Let’s create it!
STEP 3: The Stock Table viewController (I)
We want to create this screen: 
So we have:
- A top view with some buttons and a text
- A table
The template has provided us a generic “ViewController” as our main view, but we want it to be named: “StocksTableViewController”. Select the swift class ViewController.swift and hit enter to change its name. Now do the same in the class header. You can see the origin file and the final one in the following screenshots. 
Now go to your storyboard. Click on the view controller, and go to the identity inspector in the right panel. As you can see, the class that handle this view controller is still named “ViewController” 
It no longer exists, so change it to your new StocksTableViewController. 
OK, now we are ready to start coding our main VC. We will start adding the header view and the tableView below. In the storyboard, add a View (I have changed its background color to green for clarification) 
and a tableView to the viewController below: 
Lets see how it looks like. Select the iPhone5s and launch the app: 
If you see a green square with an empty table below, you are doing fine. If not, go back and review each step! What about the status bar over our green header view? In our prototype it doesn’t appear like that. And remember this golden rule: Designers would look into every pixel of your app…it better be EQUAL to the prototype our you will have a looooong argument! How we can hide the status bar in our app? It takes these simply steps: Add a new property in the info tab of your project: View controller-based status bar appearance = NO 
In the General tab, tick the option “Hide Status bar” 
Run it and…Voila! 
STEP 3: The Stock Table viewController (II)
Now, lets add some data to the table. If you don’t know how tableViews datasource and delegate work in Objective-C, I recommend you this tutorial: http://www.codigator.com/tutorials/ios-uitableview-tutorial-for-beginners-part-1/ If you already know how them works, lets see how they look like in SWIFT: In the storyboard, Control-click from the tableView to the Stock Table View Controller. Select it as Datasource and Delegate. 
Same method as always right? Now, replace StocksTableViewController.swift code with this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import UIKit //0 class StocksTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { //1 private let stocks = ["AAPL","FB","GOOG"] override func viewDidLoad() { super.viewDidLoad() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } //2 //UITableViewDataSource func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> Int { return stocks.count } //3 func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! { var cell:UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Value1, reuseIdentifier: "cellId") cell.textLabel.text = stocks[indexPath.row] return cell } //4 //UITableViewDelegate func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) { NSLog("cell clicked") } } |
Let’s see the meaning of commented blocks:
- We create an array with some data, in order to use it as our table datasource
- In the mandatory method “numberOfRowsInSection” we have to return the length of our datasource
- In the mandatory method “cellForRowAtIndexPath” we have to create and return one cell for every row of our table
- Finally, we implement the UITableViewDelegate method responsible of the action when a cell is selected
Build and Launch; you should see something like this: 
As you see, our data array is now displayed in the table. We still need to add the value of each stock. Let’s use the new tuples*** of Swift. Search (at the top of the class) and change the commented line for the next one:
|
1 2 |
//private let stocks = ["AAPL","FB","GOOG"] private let stocks: [(String,Double)] = [("AAPL",+1.5),("FB",+2.33),("GOOG",-4.3)] |
He we are declaring an array, which contains tuples. Each tuple is made of 1 String and 1 Double. So we can store each Stock symbol with its value, in a unique array. Now we have to make some changes in the cellForRowAtIndexPath method. We obtain the symbol of the stock from a tuple in an array (not directly from the array), and we can add the stock value from the tuple too.
|
1 2 3 |
//cell.textLabel.text = stocks[indexPath.row] cell.textLabel.text = stocks[indexPath.row].0 //position 0 of the tuple: The Symbol "AAPL" cell.detailTextLabel.text = "(stocks[indexPath.row].1)" + "%" //position 1 of the tuple: The value "99" into String |
***Here you have tuples examples with more detail: raywenderlich tutorial Build and Launch; you should see something like this: 
Okey! We already have a table with some stock symbols and values. The next step will be to give it some style. Remember that designers will pay attention to details! We have to customize our cell so the final result would be equal to our mockup. Add the following methods:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//Customize the cell func tableView(tableView: UITableView!, willDisplayCell cell: UITableViewCell!, forRowAtIndexPath indexPath: NSIndexPath!) { //1 switch stocks[indexPath.row].1 { case let x where x < 0.0: cell.backgroundColor = UIColor(red: 255.0/255.0, green: 59.0/255.0, blue: 48.0/255.0, alpha: 1.0) case let x where x > 0.0: cell.backgroundColor = UIColor(red: 76.0/255.0, green: 217.0/255.0, blue: 100.0/255.0, alpha: 1.0) case let x: cell.backgroundColor = UIColor(red: 44.0/255.0, green: 186.0/255.0, blue: 231.0/255.0, alpha: 1.0) } //2 cell.textLabel.textColor = UIColor.whiteColor() cell.detailTextLabel.textColor = UIColor.whiteColor() cell.textLabel.font = UIFont(name: "HelveticaNeue-CondensedBold", size: 48) cell.detailTextLabel.font = UIFont(name: "HelveticaNeue-CondensedBold", size: 48) cell.textLabel.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25) cell.textLabel.shadowOffset = CGSize(width: 0, height: 1) cell.detailTextLabel.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25) cell.detailTextLabel.shadowOffset = CGSize(width: 0, height: 1) } //Customize the height of the cell func tableView(tableView: UITableView!, heightForRowAtIndexPath indexPath: NSIndexPath!) -> CGFloat { //3 return 120 } |
Here you have the code explanation:
- Inside the method willDisplayCell, we can customize our cell. In the //1 block, we are changing the background color of the cell based on the % value of the stock. If it is positive, we put some green color, if it is negative, we put some red color, and if it is 0.0 we put some blue color.
- Here //2, we are changing the text properties of the labels: color, font and shadow.
- In the method heightForRowAtIndexPath //3, we can specify the row height. We put 120.
Build and Launch:
Yes! This is much better 🙂 –EY! there are still some UI differences from the mockup…but let’s keep them for the end of the tutorial– Our first screen is ready, but we are using some example data (that hardcoded array) not real data. Now, we have to create the array with the proper financial data from Yahoo Finance web services, but this is covered in the next episode, where you will learn:
How to create a Swift project (Part I)How to hide the status bar (Part I)How to use UITableView in Swift (Part I)How to use tuples in SwiftHow to use switch in Swift- How to use singleton pattern in Swift (Part II)
- How to use web services in Swift (Part II)
- How to use the NSNotificationCenter in Swift (Part II)
Here you have the Github project and the download link. Hope you liked this tutorial. Feel free to comment, ask or improve it in the comments section. Bye bye!!!
Follow me: @marioeguiluz
Categories: All, Apps, Development, Tutorial
Code updated for Xcode new beta changes.
If you have compile errors with the code of the post, download the github project at the end to see the changes.