This is the part 1 of the multipart series of Building an app every month in 2015. In this month we will build a Yik Yak iOS app clone .

What you will learn as a iOS developer

• Designing layouts for an iOS application
• Getting users location using CoreLocation
• Saving data to a cloud backend Parse.
• Fetching data around your location
• UITableViews and Customization.

First and the foremost thing is go ahead install the app Yik Yak and play around with it to get a feel of how the application works.

Yik Yak helps you to find what people are talking about around you. Around you is the key to the app being so viral these days. I personally feel that the apps which provides context like location are really interesting.

With that said lets go ahead and create a single view application. Since we are going to build the app from scratch, delete the single view controller which you see in on the Main.storyboard.

From the object library drag a Tableview controller, click on the is intial view controller checkbox , then go to editor embed in Navigation controller.

With the table view cell selected go to the size inspector and change the height to 100.

With the table view cell selected go to the attributed inspector and change the identifier to Cell

Drag 3 labels and a button from the object library and arrange it as shown below.

At this point we need to create two imageset in our image asset library which we will be using for our up and down arrow buttons. Click on the Images.xcassets in the xcode and create a new image set. You can download the icons from here if you want or you could use your own icons.

Click on the button. Delete the default title and change the image to up.

Hold alt and drag from the icon you just designed as shown in the image.. Make sure you change the background image to down.

Drag a label in between the two button and change the text to 100

Lets align the buttons and label correctly at this point. For the up button the attributes should look something like this

For the label in between the buttons the attributes should look something like this

For the down button the attributes should look something like this

Lets add some autolayout constraints to these elements. Cmd+Click on the two button and the labels. Click on the pin icon and set the constraint on the right to 10. You should see add 3 constraints, click to add the constraints.

Similarly we will add constraint to the labels on the left side.

Also CTRL+ Drag from the `5m ago` label to the left content view and select leading space to container margin. CTRL+Drag from the `5m ago` to `4 replies` label and select horizontal spacing.

At this point lets create our custom class for the UITableViewController and UITableViewCell. CMD+N to create a new Cocoa touch file

Select the main storyboard make sure the table view controller is an instance of class TableViewController in identity inspector. Similarly the type of the cell should be an instance of class TableViewCell.

Now open up the assistant editor with the table view cell selected on the left side and the right side to have the TableViewCell class opened.

• CTRL+DRAG from the text lable to the TableViewCell create a outlet as yakText.
• CTRL+DRAG from the 5m ago lable to the TableViewCell create a outlet as time.
• CTRL+DRAG from the 100 to the TableViewCell create a outlet as count.
• CTRL+DRAG from the 4 replies lable to the TableViewCell create a outlet as replies.

//
//  TableViewController.swift
//  YikYak
//
//  Created by Shrikar Archak on 12/31/14.
//  Copyright (c) 2014 Shrikar Archak. All rights reserved.
//

import UIKit

class TableViewController: UITableViewController {

    let yaks = \["Getting Started with building a Yik Yak Clone in Swift","Xcode 6 Tutorial using Autolayouts",
        "In this tutorial you will also learn how to talk to Parse Backend", "Learning Swift by building real world applications", "Subscribe to get more info"\]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableView.estimatedRowHeight = 60
        self.tableView.rowHeight = UITableViewAutomaticDimension

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.yaks.count
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as TableViewCell
        cell.yakText.text = yaks\[indexPath.row\]
        cell.count.text = "\\((indexPath.row + 1) \* 5)"
        cell.time.text = "\\((indexPath.row + 1) \* 3)m ago"
        cell.replies.text = "\\((indexPath.row + 1) \* 1) replies"
        return cell
    }

    @IBAction func topButton(sender: AnyObject) {
        let hitPoint = sender.convertPoint(CGPointZero, toView: self.tableView)
        let hitIndex = self.tableView.indexPathForRowAtPoint(hitPoint)

        NSLog("Top Index Path \\(hitIndex?.row)")
    }

    @IBAction func bottomButton(sender: AnyObject) {
        let hitPoint = sender.convertPoint(CGPointZero, toView: self.tableView)
        let hitIndex = self.tableView.indexPathForRowAtPoint(hitPoint)
        NSLog("Bottom Index Path \\(hitIndex?.row)")
    }

}

Custom Table view cell

//
//  TableViewCell.swift
//  YikYak
//
//  Created by Shrikar Archak on 12/31/14.
//  Copyright (c) 2014 Shrikar Archak. All rights reserved.
//

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var yakText: UILabel!

    @IBOutlet weak var count: UILabel!
    @IBOutlet weak var time: UILabel!
    @IBOutlet weak var replies: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Customize the app using UIAppearance API’s . Make sure the `didFinishLaunchingWithOptions` looks like this

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: \[NSObject: AnyObject\]?) -> Bool {

    let navbar = UINavigationBar.appearance()
    navbar.barTintColor = UIColor(red: 168.0/255, green: 215.0/255, blue: 111.0/255, alpha: 1)

    let tabbar = UITabBar.appearance()
    tabbar.barTintColor = UIColor(red: 168.0/255, green: 215.0/255, blue: 111.0/255, alpha: 1)
    tabbar.tintColor = UIColor.whiteColor()

    return true
}

Please let me know if you have any question/comments. Stay tuned for the next post.