Our First iOS App

1. Open an iOS > Application > Single View Application

2. Hit Next, call the project firstApp >

Language: Swift > Devices: Universal

3. To use an Image in our App you need to add it to the Asset catalog.

Hit the + next to AppIcon. In Safari, download an image to your

desktop (I chose a Smiley Face). At the bottom of screen hit the +

to add an image set and drag your image into 1x box.

Asset Catalog

Add an image

set

4. You design an app’s UI (user interface) in its storyboard.

Select Main.storyboard in Navigation area (left side).

Each screen is represented as a scene.

5. In Library area, Object tab is selected, scroll and find the

ImageView, drag and drop it onto the View Controller.

Utilities

Library

Navigation

Object Tab

Attributes

Inspector tab

Size

inspector

6. In the Utilities area, find the Attributes Inspector tab. Under

Image, drop down and select Image (it should be the pic you

added to the asset catalog).

7. Change the Mode to Aspect Fit

8. Now select the Size inspector in the Utilities area. Change height to

300 and Y attribute to 300 (the image should move to the bottom

half on the screen).

9. Now to add a label. Go to the Library and find a label. Drag and

drop it to the View Controller. In the Size inspector change the

label’s width to 600 and height to 300. Move it to the top half of

the screen.

10. Select Attribute inspector, add the text “Welcome to iOS App

Development” where it says Label. Change Alignment to center;

Line to 2; Font to 55 ; Autoshrink to Minimum Font Scale.

11. Now the View Controller Scene:

a. Hold down the Control key, select the Label and drag it to the

Top Layout Guide (called a control drag).

b. Control the Image View to Bottom Layout Guide

c. Control the Label to View select Leading Space to Container

Margin

d. Control the Label to View select Trailing Space to Container

Margin

e. Repeat c. and d. using the ImageView

f. Control drag the Label to the ImageView selecting Equal Heights

and Vertical Spacing.

12. Click Scheme selector at the top choose iPhone 6 and run

13. The simulator will show the entire app. You can select Window >

Scale 50% (for a smaller version). And you can see portrait versus

landscape by selecting Hardward > Rotate Left / Right

14. Hit to to stop. You try running on the iPad Air.