Lesson One

Most of the exercises we undertake in this class come from sources other than me, but I decided to create this one to get us off to a nice and easy start. In this exercise you will create a very basic app with a series of links that lead to screens of different colors. I do not give detailed explanations of what is actually going on in this lesson because the goal is simply to get your fingers wet so to speak. But don’t worry. The other lessons that come after this one give LOTS of detailed explanations.

  1. Open Xcode and make sure that you have the most up to date version, which at this point seems to be 13.4.1. If you have an earlier version, please update. If you are having a bad day, you may also need to upgrade your operating system before you can use the latest version of Xcode.
  2. Now create a new project by clicking on File, New and then project.

  3. Select Ios App and click the next button.
  4. As shown below, name your project,
    1. give it an organization name (your name is fine) and
    2. an organization identifier.
    3. If you have a website you can base the identifier on your domain name. For some reason, the convention is to start with the suffix first as in come.emuel.
    4. To create a team, you will login to your Apple account and select the Team with your name.
    5. Make sure the language is Swift and the User Interface is set to SwiftUI

  5. At this point you should be looking at the ContentView.swift file on the left and a preview pane on the right.  If for some reason you are not seeing ContentView.swift and the preview pane, Select View, Navigators, Show Project Navigator as shown below.

    When everything is set up properly, your Xcode display should look similar to the one below.

  6. Click the Resume button in the upper right portion of the content pane. The words “Hello World” should display in a background that looks like a phone.
  7. Now it’s time to create some new views that we can link to from the first view. Select File, New File (or use the keyboard shortcut Command N), make sure that SwiftUi View is highlighted and click Next.

  8. Name the file one.swift, save it and create three more named two.swift, three.swift and four.swift.
  9. Open one.swift and add a Zstack around the Hello World text with its color set to purple. Later on you will learn a LOT about Zstacks; for now, just put one to work.

  10. Change the text from Hello World to Purple.

  11. Repeat the process for views two, three, and four, using a different color for each one.
  12. Return to ContentView.swift and, using the screen capture as a guide, create a link to one.swift (the one with the purple background). To do this, replace the Text (“Hello World”) and .padding() with the NavigationLink. Also, change the font of the link to largeTitle and match the ACTUAL color to the written color by adding a foreGround color (see below).

  13. One more thing. Before your link will actually work, you have to wrap a Navigation View around it. Like this:

  14. Click the live preview button at bottom right of your preview pane. As soon as you are able to (live preview takes a few moments to crank up), test your link. Hopefully the purple screen appears! Make sure you switch your simulator to an iOS device. By default Xcode uses MacOS for the simulator.
  15. If that worked, now it is time to add a new link. Before we add anything new, however, we have to add a ‘container’ that is referred to in SwiftUI world as a stack.
    There are three types of stacks: Vertical stacks  (Vstack), horizontal  stacks (Hstack), and the Zstack that you just used . In this case we are going with the Vstack, You could ‘hand code’ the Vstack, but we are going to create it the easy way.
    Command click     on the word NavigationLink and select Embed in Vstack.
  16. That’s it! Your new Vstack should contain the NavigationLink as shown below.
  17. Add a new NavigationLink to two.swift below the first one. I suggest that you copy, paste and modify the first one. When you are done, your code should look like this (although you probably have a color other than yellow).

  18. Once that works, add the additional links to three and four. At this point you should have a functional, and funky, app that connects all five views and is easily navigable. But wouldn’t it be cool if your links were larger and matched the color of the view they link to, like the image at right?  Fortunately that goal is easily attainable. Simply click on the word Text, as in Text(“Purple”) and use the Attribute Inspector to set the size to Large Title. Then set the font color to whatever you choose. Repeat the process three more times and you are done!

  19. But wait, wouldn’t it be nice if those links were aligned to the left? Easy. Simply click on Vstack and use the attribute inspector at right to re-align everything that is inside of the Vstack.

  20. Still confused? Here’s the whole thing!

  21. If you have time, find an image of YOU,
    1. make sure it is jpg format
    2. size it to approximately 800px width and name it me.jpg
    3. via finder, drag it onto Assets.xcassets in Xcode.

    4. create yet one more more swiftui file named myimage and add the image to it like this: Image(“me”)

    5. Link that one up as well.
  22. Now connect your phone to your computer via the mouse or keyboard cable.
  23. Follow these instructions to put the app on your Iphone. If you don’t have an Iphone, just use a simulator.