7 min workout app in Swift for iOS8

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.

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

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

• Create a New file which subclasses UITableViewCell and call it WorkoutCell. Make sure the cell class is set to WorkoutCell in the identity inspector.

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

• Drag a UIView on top of the index label and set the constraints as below.

UIView doesn't have intrinsic size hence we need to provide the height and width constraints in autolayout without which you will have warnings and wierd behaviours. You might be wondering as to why I only provided the width constraint and not the height, that is because we have specified the height of the tableview cell to be 70

• Change the background color of the view to dark gray color and reduce the alpha value to 0.15

• Provide the cell identifier to Cell and also select the Accessory type to disclosure indicator

• 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. [mks_separator style="solid" height="2"]

• Again the same story of updating the frames.

• Once you update the frame you should have a storyboard like below.

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

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

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