trailhead

Create a Button and an Action (Guided Project Light)

Project Objective

You've learned the basics of Xcode and Interface Builder. Now you'll apply your knowledge of these tools by building an app.

By the end of this guided project, you'll have created an app named Light that changes the screen from black to white and back again when the user taps a button. To successfully build this app, you need to use Xcode documentation, add breakpoints, and create outlets and actions.

Note

Note

This project gives you an opportunity to write some Swift code. Don't be discouraged if you struggle at first. You'll continue to improve with more experience.

Step One: Create a Button and an Action

First, start a new project:

  1. Create a new Xcode project using the Single View App template that you've used in previous lessons.
  2. Name the project Light.
  3. Select Main.storyboard in the project navigator to open your storyboard in Interface Builder.

Selecting the storyboard from the Project Navigator.

The storyboard includes an instance of ViewController. ViewController is a subclass of UIViewController that Xcode predefines as part of the Single View App template and lists in the project navigator. 

Verify the view controller's identity:

1. Click the Show Document Outline button Square icon with a vertical stripe along its left edge to reveal all the view controllers defined in Main.storyboard.

The View Controller in Document Outline.

2. Select View Controller in the Document Outline view.

3. Click the Identity inspector button Identity inspector icon at the top of the utilities area to confirm that this particular view controller is of type ViewController.

The Custom class of type ViewController field with the Inherit Module From Target option selected.

You can use either Simulator or your own device for this project, but the size of the view controller on the canvas needs to be the same as the size of your screen. Verify that your view controller is the correct size:

  1. If you’re using your own device, continue to step 2. If you're using Simulator, select the iPhone 8 simulator from the pull-down menu on the left side of the Xcode toolbar.
  2. Click the View as button at the bottom of the canvas to select the iPhone 8 configuration or the size of the view controller that corresponds to your device.
  3. Leave the view in portrait orientation.

Changing canvas size, including options for Device and Orientation.

Changing Simulator size with iPhone 8 Plus selected.

Look at the view controller's attributes:

  1. Select the view controller's view.
  2. Open the Attributes inspector Attributes inspector icon , which you can use to customize the attributes of any interface element.

The background color for this view defaults to white. This white background is the desired state of your app on launch, so you don't need to change anything yet.

Next, you'll create an interaction that mimics the visual effect of turning on a light. Add a button that changes the view's background color from black to white:

1. Add a button to the view by clicking the Object library button in the toolbar and dragging a button object onto the view.

The Object Library, filtered by buttons called Button, Bar Button Item, Fixed Space Bar Button Item, and Flexible Space Bar Button Item.

After placing the button onto the view, the button appears in the Document Outline as a subview.

The Button added to the canvas in the View Controller Scene.

2. Move the button to the upper-left corner of the view.

The layout guides help you align the object into the correct position.

The Button alignment with margin guides, aligned on the top left of the canvas.

Give your button an action to perform when a user taps it:

1. Click the Assistant Editor button Assistant editor icon.

2. Connect an action from the button to your view controller source.

The action should associate the button's touchUpInside event with a method named buttonPressed(_:) in your view controller.

3. Build and run the app.

When you tap the button, nothing happens because the buttonPressed(_:) method is empty. 

4. To verify that the method executes, add a breakpoint within the method definition.

5. Tap the button to trigger the breakpoint.

The Xcode breakpoint trigger on line 12 in the code.

6. Remove the breakpoint.

In the next part of the project, you'll add code to change the background color.

retargeting