Cool! I just completed my first "from scratch" iOS app, and it works! I live-blogged my way through the process for posterity.
WARNING: If you are also taking Udacity's iOS Dev course, this may contain spoilers. Or helpful hints, depending on how you look at it.
May 22, 2023 at 7:44 AM
I’m about to attempt to build a color picker from scratch using three sliders. I feel fairly confident. I’m sure I’ll get there, but I’ll probably struggle with the details.
First step is to diagram this thing.
May 22, 2023 at 8:01 AM
Well, right off the bat, my iPencil was dead, so I fixed breakfast while it charged. Now I’m eating and diagramming…
May 22, 2023 at 8:29 AM
I feel medium confidence this diagram doesn’t look like a newbie’s nonsense. But it’s something to start from. I made it using Pdf Expert on my iPad.
Time to open a new Xcode file.
May 22, 2023 at 8:39 AM
Ha! Dragging items in from the library, I notice I could drag in a “color well”, and application done! But that goes against the spirit of the assignment.
Dragging in three sliders, four labels, and for the color display — not sure what to drag in. Maybe just an empty view?? I don’t see a shape view or anything like that.
What this looks like so far:

May 22, 2023 at 8:43 AM
Next I will set some attributes for these elements to make everything look at least close to what it should look like.
May 22, 2023 at 8:55 AM
Spent some time trying to figure out how the previous example app displayed a color in a square view with a border. Turns out the border is not a feature of the view itself; they stacked one square on top of a slightly larger square. Anyhow, maybe I’ll get that fancy if I have time. For now I want to get to the functionality. So here’s what it looks like:

The label at the bottom is not a requirement of the assignment. I just want to be able to see the numbers. Now to define some variables, write an action, and connect everything up.
May 22, 2023 at 9:02 AM
I struggle so hard with syntax. Looking at the previous project to see how I should set up the sliders.
Okay… getting lots of error messages already. I’m hoping these will go away when I connect up the outlets??
Oooh! I put my sliders inside viewDidLoad! Not where they need to be. Moved them out and all the warnings went away. Also those little open circles showed up to connect up the outlets with. Context matters!
May 22, 2023 at 9:19 AM
Working on my action and realized I needed a variable for the color view. When I set it up the little circle filled in automatically. Weird. I guess it knew there was only one view object on the canvas to choose from??
May 22, 2023 at 9:27 AM
Okay, I have my action written. Based on what previous examples look like, I feel like I might be thinking too simplistically about it. But we’ll see what happens:
The CGFloat() functions were a hint given in instructions for this assignment. You have to convert a floating point variable into CGFloat type to use it in a color declaration. At least that’s how I understand it. I feel like I’m speaking a foreign language and I probably just asked where to find the bathhouse instead of the bathroom.
Now to connect up the IBOutlets and IBActions and try running this sucker. I find it easiest to open the assistant editor and drag straight from the open circle to the element on the canvas. The IBAction goes to each of the three sliders in this case so a change from any one of them will call the function.
Hitting “play” ... (I’m a musician so that little triangle looks like a play button to me.)
Building…
Launching…
Controls are showing on the screen…
May 22, 2023 at 9:39 AM
Time to test this. I’m nervous. Here we go…
Well, it died. Also, I realize I forgot to do anything with the numbers label I made, but that’s okay. Let’s get the sliders working first.
Error message is "Found nil while implicitly unwrapping an optional value." Oh, Swift, I love you so much.
This happened with one of the earlier examples which we were supposed to debug. So I’m pretty sure… nope everything’s connected right. Oh, I’ll bet redSlider.value is not the way to retrieve a number from the slider. Checking into that… no, that should work.
I’m stumped. Going back to the previous app as an example. I know they used some weird syntax I don’t understand, so I’m just going to copy that for retrieving the slider values and see what happens.
May 22, 2023 at 9:55 AM
If I use the same syntax as for a switch from the previous project, I get errors.
From the UISlider documentation:
“To be notified when the slider’s value changes, register your action method with the valueChanged event.”
Trying the syntax there… no, it seems like that’s for if you aren’t using storyboard where you can connect actions and outlets directly.
I’m trying adding self. in front of the constants (that’s how they are in the previous example)…
Ran it again. Same result. Not surprised.
May 22, 2023 at 10:04 AM
Unexpectedly found nil. So which thing is nil? Here is my IBAction function with the error attached:

Here is the analogous function from the previous example app:

So, what I see and understand:
Theirs has a check to see if the controls are connected, which was necessary because we were supposed to connect the controls ourselves. In mine, the controls are connected. I’ve double checked. I’m checking again right now.
May 22, 2023 at 10:25 AM
Crap! My colorView was not connected! Remember when I said, “oh, it connected automatically, that’s weird?” Well, I think it connected to the wrong thing. When I say connected I mean the variable in the code has to be connected to the correct object on the canvas. Those connections are represented graphically by little circles that get filled in if the circles are connected to something. Just because a circle gets filled in doesn’t mean it’s connected to the correct something. You can use the assistant editor to see what they're connected to on the canvas.
(Also I went down a rabbit hole trying to get my assistant editor to show me the right bit of code. Somehow it’s stuck showing me other stuff. I can’t figure that out.)
Anyhow, guess what? My app works now!

I just need to connect up that label at the bottom so it shows the correct numbers.
Doing that…


May 22, 2023 at 10:41 AM
Okay!
It works!
It looks sloppy as heck with the spacing all wonky, and Xcode is shrieking at me to use restraints. Rotating to landscape mode sends things off the screen. But the point to this was to connect up the UI elements for functionality, and I did it!
I would clean up the appearance first if I were turning this in, but this is a self-graded assignment. I’m calling it good for today.
Oh, yeah, one more thing: I’m curious to see the action function from Udacity’s solution to this app. Here it is:

The only difference between theirs and mine is they converted to CGFloat when setting the constant values, and I converted while changing the backgroundColor instead.
Also, they used self. when reading values from the sliders, but not when setting the colorView. I used it in both spots, and it worked. When do you need self. and when do you not need it??? That’s gonna have to be a question for another day.
If you read this far, wow! Thanks!
Please feel free to leave comments, suggestions, or questions.
Top comments (0)