iOS App Design using Xcode 6 and Interface Builder - Yik Yak clone Part 1

December 31, 2014

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.

This is what you will be building

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.

This tutorial includes detailed steps. If you prefer to watch a video instead click here Yik Yak Clone

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. images

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.

<Image alt="iOS App Design using Xcode 6 and Interface Builder - Yik Yak clone Part 1" objectFit="contain" src="/static/images/yikyak14.png" height={350} width={1000} placeholder="blur" quality={100} /> 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. <Image alt="iOS App Design using Xcode 6 and Interface Builder - Yik Yak clone Part 1" objectFit="contain" src="/static/images/yikyak15.png" height={350} width={1000} placeholder="blur" quality={100} />

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
}

Here is the link to the github repo YikYak

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