7 min workout app Xcode App Design

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.

7min_featureimage

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

7min1

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

7min2

7min3

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

7min4

7min5

 

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

7min6

 

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

7min7

  •  Drag a UIView on top of the index label and set the constraints as below.
Pro Tip
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 

 

7min8

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

7min9

 

 

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

7min10

  •  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

 

 

7min12

  • Again the same story of updating the frames.

7min13

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

7min14

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

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

7min16

7min17

 

7min18

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

About the author

Shrikar

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

  • Zac Wolff

    Thumbs up man. Good you took care of design and UI before logic and code. Keep it up.

    • https://shrikar.com shrikar

      Hey Zac the next tutorial is uploaded.

      • Zac Wolff

        Thanks @shrikar:disqus. Good job!

  • http://ericmseitz.com/ Eric M. Seitz

    I am excited to try this tutorial Shrikar. I just took this step, “Drag a UIViewController next to this story board” and now have an error: https://dl.dropboxusercontent.com/u/69497751/random/Screen%20Shot%202015-06-02%20at%2012.06.52%20PM.png

    Should I keep moving ahead, or attempt to resolve before adding the navigation? Did you have this error? I am using xCode 6.3.2

    Thanks!

    • fbara

      Delete the original View Controller, you don’t need it. The warning is just saying that you have a scene, the View Controller, that won’t be ‘reached’ because nothing is referencing it.

    • https://shrikar.com shrikar

      Sorry for the delay in replying but yes delete the controller as fbara mentioned.

  • Mick Soum

    Hi Shrikar,

    I’m having issues with my label being shifted to the left counter when I scroll the tableview up or down. It looks like the constraints are wiped out when the cells are dequed. The rows looks great when it initially loads, but the error only occurs when I scrow. Thanks for your help!

/* ]]> */