7 min workout app in Swift for iOS8

Shrikar Archak / May 03, 2015

5 min read

UITableView Delegate and Datasource in Swift

Learn how to build 7 min workout app in Swift for iOS 8 in less than 7 days. This is the app you will be building.

UITableView Delegate and Datasource in Swift

What you will learn

You can build the 7 min workout app in Swift using the basic components which iOS provides. Here are a few things which you will learn today

  • UITableViews and how to customize them.
  • Timers
  • Displaying youtube video in your app

Lets get started

  • In the main storyboard on the existing view controller drag a UITableview and place it as shown below. Also set the constraint. I have set constraints as per what I think is ok. I suggest you to play around and change these constraint to see what fits your need
UITableView Delegate and Datasource in Swift
  •  Drag a UITableviewCell on top of the UITableView. Set the height to 70. Also drag in a a couple of label for showing the index and the workout title. Select both of the label and align their vertical center.
UITableView Delegate and Datasource in Swift
UITableView Delegate and Datasource in Swift
  • Select the index label and set the constraints as below. Also if you see some orange color warning around the label try updating the frames to see if that goes away. 95% of the time this one fixes the issues unless there are some conflicting constraints.
UITableView Delegate and Datasource in Swift
UITableView Delegate and Datasource in Swift
  • Create a New file which subclasses UITableViewCell and call it WorkoutCell. Make sure the cell class is set to WorkoutCell in the identity inspector.
UITableView Delegate and Datasource in Swift
  • Open up the assistant editor with the storyboard and the correspoding WorkoutCell side by side .CTRL+DRAG from each of the label onto the WorkoutCell.swift file and call them count and textCell label.
UITableView Delegate and Datasource in Swift
  •  Drag a UIView on top of the index label and set the constraints as below.
UITableView Delegate and Datasource in Swift
  • Change the background color of the view to dark gray color and reduce the alpha value to 0.15
UITableView Delegate and Datasource in Swift
  •  Provide the cell identifier to Cell and also select the Accessory type to disclosure indicator
UITableView Delegate and Datasource in Swift
  •  Drag a label for the 7 min workout app change the font size to 40 and the type to Avenir. Also select the number of lines to be 2. And also set the constraints as below. 7min11[mks_separator style="solid" height="2"]
UITableView Delegate and Datasource in Swift
  • Again the same story of updating the frames.
UITableView Delegate and Datasource in Swift
  • Once you update the frame you should have a storyboard like below.
UITableView Delegate and Datasource in Swift
  • Drag a UIViewController next to this story board . Select the view controller goto Editor -> Embed in -> Navigation controller. Now CTRL+DRAG from the UITableview cell to the Navigation controller and select Modal.
    UITableView Delegate and Datasource in Swift

Create a new file which subclasses UIViewController and call it DetailViewController.swift. Select the UIViewController go to identify inspector and provide the class as DetailViewController. Select the modal segue and provide the identifier as detailview

UITableView Delegate and Datasource in Swift
UITableView Delegate and Datasource in Swift
UITableView Delegate and Datasource in Swift

If you go ahead and run the project you will probably see a skeleton of the App with no data. Thats ok . We will cover that in the next part. Stay tuned for the next post about UITableview Delegate and Datasource

Shrikar Archak

@shrikar84

IndieHacker and Software Developer. Getting started to build in public.Tweet me @shrikar84 for any collaboration opportunity or brainstorming.

#developer#ml-engineer#seo

Subscribe to the newsletter

Get notified when new content or topic is released.

You won't receive any spam! ✌️