iOS App Development iOS Swift Tutorial iOS8 Xcode App Design YikYak

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

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

images

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.

images

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

images

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

images

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

images

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

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

images

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

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

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

For the down button the attributes should look something like this
images

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.

images

Similarly we will add constraint to the labels on the left side.
images
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.

images

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

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

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.

images

//
//  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
}

Github Repo
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.

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

  • vscarpenter

    Another great tutorial Shrikar. Great job.

    • http://shrikar.com shrikar

      thank you!

  • john

    Could you please make this project available on Github?

    • http://shrikar.com shrikar

      Hi John sorry for the delay here is the github repo https://github.com/sarchak/YikYak

      • steve

        Does not work, gives the error linker command failed with exit code 1 (use -v to see invocation)

        • Luis

          Same error here. Any solution?

          • http://shrikar.com shrikar

            Can you please provide what version of Xcode you are using ..?

          • Nik Edwards

            Im using version 6.3.2 and still get the same message as Steve

          • Nik Edwards

            Will this work without using pod file?

          • http://shrikar.com shrikar

            Also you need to use the xcworkspace project and not the default one.. Once you do pod install it will create a xcworkspace project file.. Open that one in the xcode

  • http://www.exohive.com/ Adam

    Can you do a side-by-side comparison for Objective-C along with Swift?

    • http://shrikar.com shrikar

      I will try too.. But I am not completely sure if I can make it..

      • http://www.exohive.com/ Adam

        I think it would be good. Since Swift is still such a young language and isn’t widely adopted yet. Plus you’ll double your readers of your post if you include both!

  • Peter Carnesciali

    I enjoyed the tutorial, but I have a suggestion.

    numberOfRowsInSection should really be “yaks.count” instead of being hard-coded as 5. Good coding practice for people to develop, even just for temporary data.

    • http://shrikar.com shrikar

      Completely agree.. In the next section that will be taken care of.. I just put 5 as an example.

    • http://shrikar.com shrikar

      Thanks I fixed the code above.

  • John

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(“Cell”, forIndexPath: indexPath) as TableViewCell
    cell.yakText.text = yaks[indexPath.row]

    Thought there might be a mistake here just wanted to clarify.
    Shouldn’t it say “myCell” instead of “cell” because that is what you selected it as the identifier? in the Main.storyboard under Table View Cell?

    • http://shrikar.com shrikar

      Hey John.. I think I have set the identifier as the Cell. But in any case it should be the same as what identifier you provide in the identity inspector.

  • samrakkaus

    This tutorial is outdated. You should update it.

  • GM

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

    let cell = tableView.dequeueReusableCellWithIdentifier(“Cell”, forIndexPath: indexPath) as TableViewCell
    cell.pollText.text = polls[indexPath.row]

    cell.pollText.text = polls[indexPath.row]

    cell.count.text = “((indexPath.row + 1) * 5)”

    cell.time.text = “((indexPath.row + 1) * 3)m ago”

    cell.reply.text = “((indexPath.row + 1) * 1) replies”

    note i changed the variable to poll text.. this is giving me an error saying the uitableviewcell has no member named this. how do i fix this?

  • Kane Toomer

    You should do a complete youtube tutorial for the Yik Yak clone!

/* ]]> */