The purpose of this lesson is to review concepts learned in the first module of this course by reproducing the user interface of the Home app on iOS.
Along the way, you will learn a few new concepts that will allow you to build more interesting user interfaces.
Let’s get started!
Hybrid tutorial
This is a hybrid tutorial.
Rather that cover every edit from start to finish in writing, each chapter of the written tutorial will include a link to a chapter of a video hosted on YouTube. Only the main concepts for each chapter of the tutorial will be outlined in writing.
NOTE
Further, at the moment, I am not feeling well; I have a confirmed case of COVID. I had intended to speak while recording this video, but I am just not up to it. So rather than speak during the video, I will add subtitles.
At the end of this tutorial I will send you to a survey. I’d love to take your feedback regarding how approachable you found this format for learning.
Create the project and a remote
In this chapter you will:
- create the initial project
- organize project files to remove the generic files and use groups
- create a remote
At the end of this chapter, a commit is made with this message:
Re-organized project files.
When you are finished this chapter of the tutorial, your project in Xcode should look like this:
Use Stickies to hold the reference image
In this chapter you will:
- open the Stickies app
- learn how to make a sticky note stay on top of other windows
- drag and drop the reference image into the sticky note
This will allow you to easily refer to the reference image as you work in Xcode.
When you are finished this chapter of the tutorial, your desktop should look like this:
Create a basic gradient
In this chapter you will:
- create a basic linear gradient using built-in colors
- use Digital Color Meter to obtain custom colors from the reference image
- adjust the gradient to use the custom colors
- change the start and end positions of the gradient
At the end of this chapter, a commit is made with this message:
Created a basic linear gradient for the background.
When you are finished this chapter of the tutorial, your desktop should look like this:
Apply abstraction to put gradient in its own view
In this chapter you will:
- apply abstraction by creating a helper view to hold the gradient
- use the helper view from within the main
HomeViewfile
At the end of this chapter, a commit is made with this message:
Abstracted the gradient out into its own helper view so we can use it later on more easily.
When you are finished this chapter of the tutorial, your desktop should look like this:
