Unit 17: Actions & Outlets

Question 1

Action

Answer 1

connects a method in source code and a control in Interface Builder

the connects allows particular code to run when a user interacts with the app’s controls

e.g., a certain method may be associated with an action, such as a button tap or a switch change

Question 2

CGFloat

Answer 2

a type of number that can have a decimal point, such as 3.5, 7.0, or -5.5; interacts with UIColor (a common type)

Question 3

Enabled

Answer 3

a button or control is available for interaction

Question 4

Disabled

Answer 4

the user can still see the UI element, but touching or otherwise trying to activate the control will yield no effect on the app; appears slightly dimmed

Question 5

Outlet

Answer 5

connects a variable in source code to an object in the storyboard; the connection allows the code to access those objects and get information or make changes when the app is running

Question 6

Slider

Answer 6

a type of control in the UI that enables the user to select a single value between a minimum and maximum number

Question 7

Switch

Answer 7

control that acts like an on/off button (like Airplane Mode or Bluetooth in the Settings app

Question 8

There are two kinds of connections between storyboards and code:

Answer 8

Outlets connect variables in your code to objects in the storyboard, so you can access those objects within your code and get information or make changes when the app is running.
Actions connect controls like switches and buttons to methods in your code, so tapping a button, for example, will run a particular method.

Question 9

Creating Outlets

Answer 9

When you develop an app, you want your code to refer to objects in a storyboard. To do this, you must make connections, called outlets, between the two.
In this part, you’ll add a view to the user interface, define and connect an outlet that connects to the view, and use the outlet you defined to set the background color of the view in code. When you’re done, the app will look like the image to the left.

Question 10

Follow these steps to get started

Answer 10

Create a new Xcode project using the Single View Application template:

“1. Name the app “ColorMix” and fill in the rest of the details:
“2. Using the project navigator, open Main.storyboard.
“3. Find a view in the Object library. Remember you can use the Filter field to narrow down the list of options.
“4. Drag the view onto the View Controller Scene. Use the guides to align it to the top of the scene and center it horizontally.
5. A white view on a white background is hard to see. Choose Editor > Canvas > Show Bounds Rectangles to display an outline of everything on the scene.
6. Open the assistant editor by going to View > Assistant Editor > Show Assistant Editor. If you can’t see ViewController.swift in the assistant editor, make sure the jump bar at the top of the assistant editor looks ​
like this: ​
​
Control-drag (hold down the Control key, then click and drag with the mouse or trackpad) from the view into the code.

Question 11

Enter “colorView” in the Name field and click Connect

Answer 11

Here’s what you’re seeing, from left to right:
Circles: The filled circle indicates that the outlet is connected. If the outlet wasn’t connected, it would be an empty circle.
@IBOutlet weak: This signals to Xcode that the property on this line is an outlet.
var colorView: This is the declaration of a property you’re already familiar with.
: UIView!: The type of the property is UIView!. The exclamation point means that if the outlet is not connected and you try to access this property, your app will crash. UIView is the basic view type used in all iOS apps. Almost everything you see on the screen is a kind of UIView, which ​
is responsible for drawing and handling touches.
The important thing to remember is that when you use colorView in the ViewController.swift code, you’re referring to the view you’ve just added to your storyboard.
Find the function viewDidLoad(). As you learned when printing to the console from the SinglePhoto app, this function is called when your view controller is ready to appear on the screen. Add the following code inside the function:
colorView.backgroundColor = .black

Question 12

When the items from the storyboard have all been created and the outlets and actions have all been connected…

Answer 12

…viewDidLoad() is called. The code above sets the background color of the view to black. The view you see in the storyboard doesn’t change color, because the code isn’t run until the ​
app is run.
In the device menu, choose the iPhone 6s simulator, then build and run the app. You’ll see a black rectangle at the top of the screen.
Disconnected Outlet or Action—Fixing a Crash
Sometimes you’ll build and run your app with no errors, but the app immediately crashes on launch. Your device (or the simulator) shows your Home screen with an error in the console, like this:
“*** Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key someNameFromYourApp”
The error message doesn’t tell you that the problem actually stems from a view in Interface Builder, but that’s exactly where you need to look.

Question 13

Open the storyboard and select View Controller…

Answer 13

…either in the document editor or by selecting the yellow circle at the top of the main editor in Interface Builder.
Now open the Connections inspector on the right side of the screen. The Connections inspector lists all the outlet and action connections for the selected view controller.
If you look carefully at the list of outlets, you’ll notice that most connections have either an empty circle or a filled-in circle, just like the circles you see in the gutter of a Swift file with IBOutlets or IBActions. One connection, though, displays an exclamation point instead—and that’s the source of the crash.

Question 14

Imagine that in this case…

Answer 14

…you created an outlet from Interface Builder to the Swift code file, but entered bleuSlider as its name instead of blueSlider. After creating the outlet, you noticed the typo, fixed it, and made sure the slider was hooked up to the new name.

Question 15

Interface Builder project

Answer 15

But that adjustment won’t fix the problem. You need to go back to Interface Builder to inform the storyboard about the outlet’s new name. Without that step, the mismatch won’t be discovered until the app launches and tries to hook up all its connections—at which point, the storyboard file will try to open a connection to a name that no longer exists. And your app will crash.
You can remove invalid connections by clicking the “x” next to the element’s name. (You can remove valid connections this way, too.) Once you’ve removed all invalid connections, this mysterious error will no longer crash your app on launch.

Question 16

Creating Actions

Answer 16

To make buttons, switches, and other controls useful in an app, something has to happen when the user interacts with them. This is done by creating actions, which run your code when the user does something. For example:
When the value of a switch is changed (from off to on, or from on to off)… call switchChanged(_:)… on this ViewController.
In this part, you’ll add a UISwitch control. You’ll define an action method and connect it to the switch. When the switch is tapped, your code will change the color of the color view. When you’re done, your app will look ​
like the image to the left.
Follow the steps below to create an action:
In Xcode, open Main.storyboard.

Question 17

Find a switch in the Object library…

Answer 17

and drag it onto the scene. Use the guides to center it horizontally and vertically:
In the Attributes inspector, set the Value of the switch to Off:
​
​
​

Open the assistant editor so that ViewController.swift is visible.
Control-drag from the switch into the code file, and release.
Choose Action from the Connection pop-up menu.
Enter “switchChanged” in the Name field.
Enter “UISwitch” in the Type field.

Question 18

The pop-up menu should look like this:

Answer 18

Click Connect.
A new method is created for you inside the ViewController class. It looks much like other functions and methods you’ve seen and created, with a ​
few additions.

Here are some details, from left to right:
Circles: The filled circle indicates that the action is connected.
@IBAction: This line signals to Xcode that the method on this line is ​
an action connected to a control in Interface Builder.
sender: The sender argument is the instance that sent the action. ​
You chose the type of switch, UISwitch.
Add the following code inside the method:
colorView.backgroundColor = .red

Question 19

Checkpoint

Answer 19

Build and run the app. When you turn the switch on, the view changes to red. But when you turn it off, it stays red. What’s going on? This is because the action method is called every time the value of the switch changes, and the action method always sets the background color to red.
To make the switch behave like a real switch, delete the line you added above and add the following code:
if sender.isOn {​
colorView.backgroundColor = .red​
} else {​
colorView.backgroundColor = .black​
}
isOn is a Bool property of UISwitch that describes if the switch is on or not. The updated version of this method now checks the state of the switch (which is available as the sender argument of the function) and sets the color appropriately.

Question 20

Multiple Actions and Outlets

Answer 20

When you see color on the screen, you’re actually seeing three components: red, green, and blue. In this part of the lesson, you’ll add two more switches to the app, so you’ll have one switch for red, one for green, and one for blue. Switching each one on or off will add that color component to the color displayed on the screen.
To make this work, you’re going to need to create outlets for each switch so that the isOn property of each switch can be checked when creating the color to be displayed. At the end, the app will look like the image to the left.
Follow these steps to add the new switches:
Open Xcode and go to Main.storyboard.
Select the switch.
Type Command-D to duplicate the switch. Drag it underneath the first one, using the guides to line them up.
Repeat step 3 to add a third switch.
Open the assistant editor to show ViewController.swift.
Control-drag from each switch to the code file to create outlets. ​
Call them redSwitch, greenSwitch, and blueSwitch.

Question 21

A common technique is to…

Answer 21

…connect outlets and actions to the same object. Select the top switch and open the Connections inspector in the utilities area.
The image to the left shows all of the outlets and actions the selected switch is connected to.
In Sent Events, you can see that the Value Changed event is linked to switchChanged: in ViewController. Although you could link to the other events, only the Value Changed event is sent when a switch is switched.
Referencing Outlets shows that the switch is referenced by redSwitch in ViewController.
Select the middle switch and look at the Connections inspector. Because ​
you duplicated the switches instead of adding new ones, they’re already connected to the switchChanged action.
Follow these steps to learn another way to connect actions.
In the Connections inspector, click the X by the Value Changed event. ​
This will disconnect that switch from the action.
In the ViewController.swift file in the assistant editor, find the circle icon in the gutter next to the action method. When you mouse over it, ​
the red switch and blue switch will be highlighted in the storyboard to indicate that they’re connected.

Question 22

Next steps [cont’d]

Answer 22

The pop-up menu should look like this: There are many ways to connect outlets and actions.

Control-dragging ​from the storyboard to code creates new outlets and actions. Once they’re ​
in place, they can be connected, disconnected, and reconnected either ​
from the Connections inspector or using the circle icons in code files.
Which is better? Use the Connections inspector if you want to know which outlets and actions a particular object in the storyboard is connected to. Use the circle icons in code if you want to know which objects a particular outlet or action is connected to.
Now that you’ve created the user interface and connected all the outlets ​
and actions, it’s time to write the code.
The action method is not the best place to update the color of the view. There’s already some repeated code in the file: The color is set to black in viewDidLoad and again when the switch is turned off. A better design is ​
to create a single function that makes the correct color based on the state ​
of each switch, and to call this both from the action method and from[…]”

“Add the following code to the ViewController class:
func updateColor() {​
    var red: CGFloat = 0​
    var green: CGFloat = 0​
    var blue: CGFloat = 0​
    if redSwitch.isOn {​
        red = 1​
    }​
    if greenSwitch.isOn {​
        green = 1​
    }​
    if blueSwitch.isOn {​
        blue = 1​
    }​
    ​
    let color = UIColor(red: red, green: green, blue: blue, alpha: 1)​
    colorView.backgroundColor = color​
}
This method starts with three variables representing the red, green, and blue components of a color, initialized to zero. It checks each switch value and sets the component to 1 if the switch is on. ”

“Finally, a color is created from the components, and the color of the colorView is set.
To update the action method to call this new function, remove the code that was setting the color and replace it with the single line updateColor().
From viewDidLoad(), remove the line that was setting the color and replace it with updateColor().
Build and run the application. Change each of the switches, and you’ll see the colors mix together.

Question 23

Sliders

Answer 23

Your three switches now control the three components that make up a color, but you only end up with eight possible colors. In this part of the lesson, you’ll add slider controls, like the brightness or volume sliders on an iOS device, to provide finer control over colors. At the end, your app will look like this image to the left.
First, you need to make some room in the interface for the sliders. You could put them all underneath the switches, but it would make more sense for the slider to be next to the switch that controls it. So you need to move all the switches to the left, space them out a little, then add a slider next to each switch.
Follow these steps:
Select all three switches by Shift-clicking each one or by dragging a selection box around them.
Drag the group of switches over to the left and up, so that the central switch is vertically centered in the scene and all three switches are aligned to the left margin guide. ​

Question 24

Sliders [con’t]

Answer 24

Select the top switch only, then hold down the Shift key and press the Up Arrow key four times to move it farther from the central switch.
Select the bottom switch, then hold down the Shift key and press the Down Arrow key four times to move the switch farther down.
Why add space between the switches? At the moment, you’re using the simulator with a cursor, which allows you to hit a very small object with precision. But when you’re using a device with your finger, you need more room around interface elements.
Follow these steps to add the sliders:
Find a slider in the Object library and drag it onto the scene. Using the guides, align it vertically with the top switch and horizontally within the scene.
Repeat this for the other switches, so each switch has a slider next to it. The scene should look like this:

Question 25

Drag or Shift-click to select all three sliders.

Answer 25

In the Attributes inspector, set the Value to 1. Notice that a slider also has a minimum and maximum value:

Open the assistant editor so ViewController.swift is showing.
Control-drag from each slider into the file to create outlets. Name them redSlider, greenSlider, and blueSlider.
Follow these steps to connect the actions.

Control-drag from the top slider into the ViewController.swift file to create an action, called sliderChanged.

Drag from the circle icon in the gutter by the new action to each of the other two sliders, one at a time, so all sliders are connected to the same action.
The sliderChanged action method is simple: Just call updateColor(), the same as the switchChanged action method.
But the updateColor() method needs updating. Currently it sets the value of each color component to 1 if the switch is on.
You need to use the value property of each slider, which is set to return a value between 0 and 1.
Update each line so that it uses the value of the corresponding slider instead. This example is for the red switch. Follow the same pattern to update the other two switches:
if redSwitch.isOn {​
red = CGFloat(redSlider.value)​
}
redSlider.value returns a value of type Float, which is a kind of decimal number. But to make a UIColor, you need something called a CGFloat. The code above creates a new CGFloat from the Float value of the slider and assigns it to red.
When you’ve updated the code for the green and blue switches, run the project again. You can now adjust the levels of each color component, so you’re set[…]

Question 26

Reset Button

Answer 26

One of the most common controls used in iOS apps is a button. A button can contain text, an image, or a mix of both. When the user taps the button, something happens. In this part of the lesson, you’re going to add a reset button, which will be handy if you accidentally pick a really horrible color. ​
At the end, your app will look like the image to the left.
Open Main.storyboard and find a button in the Object library. Drag it ​
onto your scene, using the guides to center it horizontally and place it near the bottom of the screen.
Select the button and change the title to “Reset” by double-clicking it and editing the text or by using the Attributes inspector:

The button should look like the image to the left.
Open the assistant editor, making sure it’s displaying ViewController.swift, then Control-drag from the button to the code file to create an action. ​
Call the action reset. It should look like this:
@IBAction func reset(_ sender: AnyObject) {​
​
}
Open the Connections inspector. You’ll see that the button has been connected to the Touch Up Inside event. This is the standard event used ​
for most buttons.
Your reset button will set the value of each slider to 1 and the isOn property of each switch to false. Add that code to the new action method.
You’ve updated the switches and sliders using code, but you want the same behavior as if the user had changed the switches. When the user changes a slider or a switch, the color displayed on the screen updates. To have the same behavior occur when the reset button is tapped add a call to updateColor() at the end of the action method.
Build and run the app, set a color, then try the reset button.

Question 27

Polishing the Interface

Answer 27

Your app is working well now, but there are some things about the interface that could use improvement:
All of the switches and sliders look the same. There’s no way to tell what control does what without using it.
When all components are on, the color view disappears into the background.
If a switch is off, the slider can still be operated but it doesn’t do ​
anything—which may be confusing for the user.
At the end of this part, your app will look like the image to the left.
Tinting the switches
To correct the first issue, you can use the tinting options available for many controls. A switch can have two custom colors: the on tint and the thumb tint. These affect the following areas of the switch: Now change the on tint for each switch to match the color it controls. ​
Follow these steps to make the purpose of your switches clearer:
In Xcode, open Main.storyboard and select the red switch.
Open the Attributes inspector. Under the Switch heading are two tint options. Change the value in the On Tint pop-up menu.

Question 28

Select a red for this switch (project – con’t)

Answer 28

Select a red for this switch. Use the RGB sliders on the color picker to choose a pure red.
​
Watch this video to see these steps in action.​

For each of the other two switches, follow the same steps to select a green and a blue.
You’ll notice that the scene doesn’t change when you change the colors. That’s because the switches are all set to off.

Question 29

Tinting the sliders

Answer 29

Sliders have three tinting options. You can set the color of the track (the line that the handle moves along) on the minimum and maximum sides of the thumb, and you can set the color of the thumb itself.
Select one slider at a time, then use the Attributes inspector to set the ​
Min Track color to be red, blue, or green, as appropriate.
​
With these changes, it will be clearer to your users what each switch and each slider will control in the color view.

Question 30

Adding a Border

Answer 30

To make the color view stand out from the background, regardless of the color you have at the moment, you can add a border to the view.
You can make this change in code. Switch to ViewController.swift and add the following lines to viewDidLoad():
colorView.layer.borderWidth = 5​
colorView.layer.cornerRadius = 20​
colorView.layer.borderColor = UIColor.black.cgColor
The code above uses the layer property of a UIView, which in turn has its own properties. Now you’ve created a black border, five points wide, with rounded corners.

Question 31

Disabling Sliders

Answer 31

For your final refinement, you want to prevent each slider from working when its associated switch isn’t turned on.
All controls have a property, isEnabled, that allows the control to be activated or deactivated. The status of a control is accompanied by a change in its appearance of the control, such as a dimming effect.

Add a new method to make sure all of the sliders are enabled properly:
func updateControls() {​
redSlider.isEnabled = redSwitch.isOn​
blueSlider.isEnabled = blueSwitch.isOn​
greenSlider.isEnabled = greenSwitch.isOn​
}
This function must be called whenever a switch is changed. Add this line inside the switchChanged action:
updateControls()
Then add a call from viewDidLoad() so that the sliders are enabled correctly when the app first launches. Also add a call from reset(_:) so it works when you reset the app.
Build and run the app. You’ll notice that the sliders can’t be used until the switches are turned on. And when each switch is on, its color matches the color of the slider.

Question 32

Troubleshooting

Answer 32

Common problems with actions and outlets
When you create an action or outlet, you’re making changes in two places. ​
In Swift, you add the @IBOutlet or @IBAction line. In the storyboard file, you add information that links the view with the outlet or the control event with the action.
If you delete the code part of the action or outlet but don’t change the storyboard, your app will likely crash. That’s because when the outlet is assigned or the action is fired, there won’t be any code matching it—and that’s a crashing error. To resolve this problem, you must disconnect unwanted actions and outlets from the storyboard, as well as delete them from your code.