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.