Skip to content

food-tracker.md

Latest commit

 

History

History
72 lines (52 loc) · 4.98 KB

food-tracker.md

File metadata and controls

72 lines (52 loc) · 4.98 KB

Food Tracker App

This tutorial will guide you through creating a Food Tracker app, it is based on the Apple Guide for developing iOS apps, I found the guide great to work with, but unfortunately it wasn't up to date with all the latest changes that have been made in Swift v3.1

Each section will build upon the previous one and eventually help you build an app that lets you view/edit/delete food that you may have eaten.

Content
Basic UI

Before we start you'll need to

  • create a new Xcode project(name it whatever you wish, FoodTracker might be a good) 
  • It needs to be an iOS Single View application
  • look through the files that Xcode has created for you to get yourself ready to dive in(especially ViewController.swift, Main.storyboard)
  • open Main.storyboard

Basic UI

Add an Input Field
  • Add an input field (found in the Object Library)
    screen shot 2016-12-01 at 11 47 35
    • Align the left and right edges of the text field until you see three vertical layout guides
    screen shot 2016-12-01 at 11 38 05 - In the Attributes inspector add a placeholder for the input `Enter meal name` - Also change the Return Key dropdown from `default` to `Done` - Also select the Auto-enabled Return Key checkbox screen shot 2016-12-01 at 11 40 28
Add a Label
  • Add a Label to the storyboard
    • Align it so that it is in line with the left side and above the text field
    screen shot 2016-12-01 at 11 49 46 - Edit the name of the label by double clicking it and changing it to `Meal Name`
Add a Button
  • Add a Button to the storyboard
    • Align it so that it is in line with the left side and below the text field
    screen shot 2016-12-01 at 11 52 14 - Edit the name of the button by double clicking it and changing it to `Set Default Label Text`
Creating an Auto Layout

Why:question: We want the design to be universal so that it works across all iOS devices from iPhone 5 to iPad Pro and this is one way to go about solving this issue.

  • Select all items on the storyboard by pressing the shift key and selecting the text field, label and button.
  • Stack the items together (groups them together either vertically or horizontally, Xcode is clever and will do this automatically)

screen shot 2016-12-01 at 11 57 12

- You can view the stacked items in the outline view

screen shot 2016-12-01 at 11 59 38

- In the Attributes Inspector change the Spacing field to 12 (this will add space in between each element) - **Pin** the stacked items to the boundaries by adding new constraints - Select the **Pin** menu

screen shot 2016-12-01 at 12 01 16

- Add New Constraints to the left(0), right(0) and top(60) and select `Contrain to margins` checkbox

screen shot 2016-12-01 at 12 04 15

- Select `Items of New Constraints` from the Update Frames dropdown and Add them ![screen shot 2016-12-01 at 12 06 17](https://cloud.githubusercontent.com/assets/2305591/20793479/1557ebac-b7bf-11e6-9f25-38021df6dddc.png)
  • Apply constraints to the left(0) and right(0) to the input field so that it stretches out (make sure that the input field has been selected)
    screen shot 2016-12-01 at 13 00 44
  • Also change the Intrinsic Size from Default to Placeholder in the Size Inspector

screen shot 2016-12-01 at 13 02 14

Run it in a simulator to see the Basic UI in action

If you've come across any issues and are unable to get your code up and running then here is the link to the XCode project for this Tutorial.