Introduction to IBOutlets and IBActions

Create a new Xcode project and drag a Text Field onto the top of the screen. 

Make the text field stretch over the entire width of the apps screen.

 In the Attribute Selector set the Placeholder value to "Enter your name".

The Placeholder text will appear in the text field in a light grey colour.

Click on the pin constraints button and set the top, left and right constraints.

Press the "Add 3 Constraints" button

Drag a button onto the screen under the text field and set the label of the button to be "Enter"

Click on the pin constraints button and set the top constraint.

Press the "Add 1 Constraint" button.

Click on the align constraints button and tick the check-box for the option for Horizontal Center in Container.

Press the "Add 1 Constraint" button.

 Drag a label onto the screen under the button. 
Make the label stretch over the entire width of the apps screen.

 In the Attribute Inspector set the Alignment to be Centered.

Click on the pin constraints button and set the top, left and right constraints.

Press the "Add 3 Constraints" button

 Open the Assistant Editor. 

It is the icon with the 2 circles overlapping.

Select the text field then hold down the control key and drag to the Assistant Editor. 

Under the class declartion is a good spot for IBOutlets.

A popup will appear, set the properties as follows and then press connect.

• Connection: Outlet
• Name: nameTextField
• Type: UITextField
• Storage: Strong

The code for the IBOutlet will be added to the editor.

Select the label then hold down the control key and drag to the Assistant Editor. 

A popup will appear, set the properties as follows and then press connect.

• Connection: Outlet
• Name: welcomeLabel
• Type: UILabel
• Storage: Strong

The code for the IBOutlet will be added to the editor.

Select the button then hold down the control key and drag to the Assistant Editor.

Under the didReceiveMemoryWarning method is a good spot.

A popup will appear, set the properties as follows and then press connect.

• Connection: Action
• Name: enterBtnPressed
• Type: UIButton
• Event: Touch Up Inside
• Arguments: Sender

The code for the IBAction will be added to the editor.

 Under the viewDidLoad method add the viewWillAppear method.
The method should autocomplete once you start typing.

In the viewWillAppear method add the following code.
welcomeLabel.text = ""
The will set the initial value for the label to be "" instead of "Label"

In the IBAction method for enterBtnPressed add the following code.

welcomeLabel.text = "Hello \(nameTextField.text), it's nice to meet you."

You will notice I've added \() around nameTextField.text. This is a simple way to add variable values to a string.

Run your app in the iOS simulator and check everything is aligned correctly.

Enter your name in the text field the press the "Enter Button".

The label should display the welcome message with the value you entered in the text field.

Rotate your app to the right to make sure everything still line up.

The UIViewController Lifecycle

viewDidLoad
This method is only called once when during the life cycle of the view controller object. This function is a great place for the initial setup of objects the view controller needs.

viewWillAppear
This method is called just before the view appears on the screen. This function is a great place for showing or hiding items on the screen or any operations that need to happen every time before the view is visible.

viewDidAppear
This method is called right after the view appears to the user. This function is a great place for starting any animations.

viewWillDisappear
This method is called before the view is actually removed and before any animations are configured.

viewDidDisappear
This method is called once the view has been removed from a view hierarchy. You can use this method for any cleanup that is required.

This diagram illustrates the UIViewController Lifecycle of a simple 2 screen app.

Using Constraints to align a button bottom center of your app.

Select your button and position it in the bottom center of your app.

Press the pin button and select the bottom constraint and then press the 'Add 1 Constraint' button

Press the align button and check the check-box for Horizontal Center in Container and then press the 'Add 1 Constraint' button

Your 2 new constraints will appear in the View Controller Scene

Run your app in the iOS simulator and your button will appear in the bottom center.

Rotate your app to the right and your button will still appear in the bottom center.

Using Constraints to align a button top left of your app.

Select your button and position it in the top left corner of your app

Press the pin button and select top and left constraints and then press the 'Add 2 Constraints' button

Your 2 new constraints will appear in the View Controller Scene.

Run your app in the iOS simulator and your button will appear in the top left corner.

Rotate your app to the right and your button will still appear in the top left corner.

Using Constraints to align a button in the center of your app.

Select your button and position in the center of your app

Select the align icon and check the check-boxes for Horizontal Center in Container and Vertical Center in Container and then
click Add 2 Constraints.

Your 2 new constraints will appear in the View Controller Scene.

Run the iOS simulator and your button will appear in the center of the app

Rotate your app to the right and your button will still appear in the center of the app.

How to use Adobe Illistrator to create 1x, 2x & 3x image assets automatically for your app

Design or open a vector graphic in Adobe Illustrator at the proper @1x size then go to the File menu and then Save As.

Enter a name for your file and select Adobe PDF (pdf) in the format field.

Make sure you select the following options and the press the Save PDF button

• Preserve Illustrator Editing Capabilities
• Embed Page Thumbnails
• Create Acrobat Layers from Top-Level Layers 

In Xcode select Images.xcassets from the navigation menu then press the + icon and select 'New Image Set'

Give you image set a name

In the Attribute Inspector set Scale Factors to Single Vector

Open finder and drag the pdf document you previously created into the icon space provided in Xcode

Your icon will now display

In the navigation menu select Main.storyboard and drag a UIButton onto the editor.

Select your button and then in the Attribute Inspector delete the default text 'button' and select your image from the Image field.