Build a Basic UI

This chapter lets you familiarize yourself with Xcode to write applications. You'll be familiar with the structure of the Xcode project and learn how to navigate through the basic project components. Throughout the course, you will begin to create a simple user interface (UI) for the Foodtracker application and view it in the emulator. When you're done, your app will look something like this:

Learning Goals

At the end of the course, you will be able to:

1. Create a project in Xcode
2. Identify a Xcode project template
3. Opening and switching files in a project
4. Running the emulator application
5. Add, move, and adjust UI elements in storyboard
6. Editing the properties of a UI element in storyboard using attributes Inspector
7. Use the outline view to view and rearrange UI elements
8. Preview the storyboard UI using the Preview assistant editor
9. Use auto layout to automatically adapt to the user's device size

Create a new project

XOCDE includes some built-in application templates, in order to facilitate the development of common iOS application types such as games, label-based navigation applications, and tabular view-based applications. Most templates have pre-configured interface and source code, this chapter we use the template for single View application

Open Xcode:

Select Create a new Xcode project:

Select single View application, and then click Next:

Input Product Name:foodtracker

Organization name:apple Inc.

Organization Identifier:com.example

Bundle Identifier: Automatic generation

Language:swift

Devices:universal (This is a universal app that runs on both the ipad and iphone)

Use Core Data: Not selected

Include Unit Tests: These two are not in Xcode6.3, regardless (appearing in Xcode7)

Include UI Tests: These two are not in Xcode6.3, regardless (appearing in Xcode7)

Once the input is complete, we'll click Next and we'll see that the workspace appears in Xcode:

Build a Basic UI