Let your joy be in your journey - not in some distant goal. -Tim Cook
In this lab, you'll make an application where you can change the color of a light bulb.
As you've been working through these lessons, a few light bulbs have no doubt turned on in your head as you've connected the dots of Swift programming. To celebrate, why not make an application where you can turn a light bulb a different color?
Specifically, your task is to create an app with this UI:
Pretty simple, right? Can you tell what user interface elements it consists of?
There are only two user interface elements in this application:
- A view that draws a colored light bulb.
- A segmented control that allows the user to select a color.
When the user selects a different color, the light bulb's hue should change. Easy, right? Here's what it looks like when the user presses Green:
Part of being a competent Swift programmer is being able to use and modify an existing code base to accomplish your task. To reinforce this idea, part of this app has been provided for you. Open up LightBulb/LightBulb.xcodeproj
in Xcode to see what has been given to you.
Let's go over the parts of the app that are already present in that project.
Open up Main.storyboard
. You'll notice that a standard view controller has already been created for you. Notice, too, that the light bulb view has also been placed. However, it has not been connected to anything yet—it's up to you to hook it up to the view controller's code properly.
Now open up ViewController.swift
(you can open it up in an Assistant Editor from Interface Builder if you want). Parts of this file have already been filled in for you, too. It already has an IB action named colorSelected(_:)
, but that IB action is not hooked up to anything. It also has a UIView
outlet called lightBulb
, but that has not been hooked up to anything, either.
You have also been provided with a method for turning strings into colors. For example, you can call "red".color
to get a red color. "blue".color
, "yellow".color
, and "green".color
are also allowed. This should help you easily create UIColor
objects and use them in the existing methods.
You can also call color
on segmented control objects. For example, given a segmented control called sender
(such as the one passed to colorSelected(_:
), you can call sender.color
to get the color associated with it.
Finally, there are three method stubs that have TODO
markers indicating code that you have to write: viewDidLoad()
, changeColor(to:)
, and colorSelected(_:)
.
Now, on to your tasks.
If you complete the following steps, you should end up with a properly working app:
- Hook up the
lightBulb
IB outlet inViewController.swift
with the light bulb view inMain.storyboard
. - Add a segmented control underneath the lightbulb.
- By default, a segmented control only has 2 buttons. Yours needs to have 4. Do you know how you can change that? (If you guessed "in the Attributes Inspector", you'd be correct!)
- The individual parts of a segmented control also have default names. Try to figure out on your own how you can change those names. (Hint: Look for a section in the Attributes Inspector called Segment. It is a popup menu that should list all the parts of your segmented control. You'll want to change an attribute called Title for each segment part.)
- Hook up the segmented control to the
colorSelected(_:)
IB action inViewController.swift
. - Modify the
colorSelected(_:)
method where shown. It should change the background color of thelightBulb
view to the chosen color.- Doing this might be a bit tricky. Notice that there is a
print
statement above the part of this method that you need to modify. Thatprint
statement is a hint as to how you can figure out which segment the user selected. Remember: You can get help using Xcode's documentation. - The selected part of the segmented control will be returned as an
Int
. Remember: You have already been provided with a method that can turn anInt
into a color!
- Doing this might be a bit tricky. Notice that there is a
- Modify the
changeColor(to:)
method to change the background color of thelightBulb
view. - Finally, modify
viewDidLoad()
to set the initial color of the light bulb to red.- Remember: You have two methods to help you. One is
colorFromString(_:)
, which can take a string like "red" or "blue" and return a color. - You also have your trusty
changeColor(to:)
method, which can change the light bulb's color to any color you want.
- Remember: You have two methods to help you. One is
Have at it! This is definitely one of the most challenging labs you've had so far, but you've been provided a lot of helpful pieces to get you started, and covered all the material you need to know in previous lessons, so you should do great with it!
View UI Lab: Light Bulbs on Learn.co and start learning to code for free.