SwiftUI For Dummies. Wei-Meng Lee

Storyboard. Layouts are now also specified declaratively using code (the VStack in this example stacks all the views vertically). Delegates are now replaced with closures. More important, views are now a function of state (and not a sequence of events) — the text displayed by the Text view is now bound to the state variable label. When the button is tapped, you change the value of the label state variable, which automatically updates the text displayed in the Text view. This programming paradigm is known as reactive programming.

Figure 1-2 shows the various views in action.

FIGURE 1-2: SwiftUI is a state-driven declarative framework.

Getting the Tools

      To start developing using SwiftUI, you need the following:

       Xcode version 11 or later

       A deployment target (Simulator or real device) of iOS 13 or later

       macOS Mojave (10.14) or later (Note that if you're running macOS Mojave, you won’t be able to use Live Preview and design canvas features; full features are available only in macOS Catalina (10.15) and later.)

To install Xcode, you can install it from the App Store on your Mac (see Figure 1-3).

      Alternatively, if you have a paid Apple developer account (you need this if you want to make your apps available on the App Store, but this is not a requirement for trying out the examples in this book), head over to https://developer.apple.com, sign in, and download Xcode directly.

      FIGURE 1-3: Installing Xcode from the Mac App Store.

For this book, our focus is on developing iOS applications for the iPhone. Developing iPad, watchOS, tvOS, and macOS applications using SwiftUI is beyond the scope of this book.

      Hello, SwiftUI

      After you’ve installed Xcode, you’ll probably be very eager to try out SwiftUI. So, let’s take a dive into SwiftUI and see how it works! Follow these steps:

      1 Launch Xcode.

      2 Click Create a new Xcode project (see Figure 1-4).

      3 Select Single View App and click Next (see Figure 1-5).

      4 In the Product Name field, enter HelloSwiftUI (see Figure 1-6).

      5 In the Organization Name field, enter your name.

      6 In the Organization Identifier field, enter a unique identifier, such as the reverse domain name of your company.

      7 From the User Interface drop-down list, select SwiftUI.

      8 Click Next and save the project to a location on your Mac.You should see the project created for you (see Figure 1-7). The ContentView.swift file contains the UI for your application's main screen.

      FIGURE 1-4: Launching Xcode.

      FIGURE 1-5: Selecting the Single View App project type.

      FIGURE 1-6: Naming the project.

FIGURE 1-7: Viewing the project that you’ve created.

      Automatically previewing your user interface using the canvas

By default, you should see the Inspector window on the right side of the Xcode window. For building your UI using SwiftUI, you usually don’t need the Inspector window, so you can dismiss it to gain more screen estate for previewing your UI using the canvas. To dismiss the Inspector window, click the button on the upper-right corner of Xcode (see Figure 1-8).

      FIGURE 1-8: Dismissing the Inspector window.

With the Inspector window dismissed, you should now see the canvas on the right side of Xcode (see Figure 1-9). The canvas lets you preview the UI of your application without needing to run the application on the iPhone Simulator or a real device.

      

If you don’t see the canvas, you can bring it up again through the Editor ⇒ Canvas menu.

To preview your UI, click the Resume button on the canvas. You should now be able to see the preview (see Figure 1-10).

      

If you don’t see the Resume button, make sure you’re running macOS Catalina (10.15) or later.

Now let’s modify the ContentView.swift file with the code that you’ve seen earlier (see Figure 1-11).

You may notice that the automatic preview has paused. This sometimes happen when the file you're previewing has some changes that caused the containing module to be rebuilt. When that happens, click the Restore button, and you should see the preview again (see Figure 1-12).

      FIGURE 1-9: The canvas allows you to preview your application without deploying it on the iPhone Simulator or a real device.

      FIGURE 1-10: Previewing your app on the canvas.