The code for this chapter can be found at https://github.com/PacktPublishing/SwiftUI-Projects/tree/master/Chapter02.

We are going to build a small app that will just get your feet wet. We will create a List which we will use to navigate us through our small app. Charts will link to charts and Colors will link to another colors list. One will show you Charts, and the other will show you a List from an Array. You will create three charts in this chapter – Bar, Activity Ring, and Wedge. We will build out a PageView, which will allow us to swipe from left to right to see each one. For the List, you will create a list and display it using an array. Here are what the screens will look like when we are finished:

Figure 2.1

SwiftUI is now fully supported in watchOS 7, which means we do not have to work with some of the older controllers pre watchOS 6. We will first create our entire navigation, and then we will go back and build out each view. Let's get started by opening ContentView first.

Creating a static list

Our List, in this view, is going to be a static list with just two links. One will present a modal, and the other will do the standard push to detail view. Add the following after the struct declaration:

@State private var isPresented = false

In the last chapter, we skipped @State because it was not in scope, and I will do it again as I cover this in greater detail in Сhapter 5, Car Order Form – Data. But I will, for now, just say we are creating a Boolean that keeps track of the modal presentation. Next, inside the body variable, replace Text ('Content View') with the following:

List {
    Button('Charts') { // Step 1
        self.isPresented.toggle() // Step 2
    }
    .fullScreenCover(isPresented: $isPresented, content:       ChartsView.init) // Step 3
	// Add next step here
}

We just added a few lines of code; let's break down each step:

1. As we covered in the last chapter, we have a button with its label set to Charts. In watchOS, buttons have a default look to them, so as long as you give it a label and an action, you will get all of the stylings. You might also notice we created our button slightly differently. There are a couple of different ways to create buttons, and this is just another implementation of it.
2. We call the toggle() method on the isPresented boolean.
3. In this step, we are using the fullScreenCover modifier and passing it the isPresented variable and the destination view, which in this case is ChartsView.

Now let's add our last bit of code by replacing // Add next step here with the following:

NavigationLink(destination: ColorsView()) { // Step 1
    Text('Colors') // Step 2
}.navigationTitle('Home') // Step 3

Let's discuss the code we just added:

1. We are using a NavigationLink and this requires a destination view and also a label.
2. The label is a view, and, in this case, we are using a text view.
3. We set the title of the page here by using .navigationTitle set to Home.

We are done with our static List, so build and run the project, and you will be able to hit each item and see the following:

Figure 2.2

You now have the main navigation done but let's look at how we can create a page view navigation in the next section.

Next, we are going to create a Page View navigation controller. Just as you would expect on a phone, you will be able to swipe from the right to left and see different content on each page. You will also see some dots at the bottom of the page, which shows which page is being displayed currently.

Open ChartsView and let's get started. Inside the body variable, replace Text('Charts View') with the following:

TabView { // Step 1
    BarChartView() // Step 2
    WedgeChartView() 
    RingView() 
}.tabViewStyle(PageTabViewStyle(indexDisplayMode: .automatic))     // Step 3

We just added all of the code for ChartsView, so let's look at what we did:

1. We wrap all of our views inside a TabView.
2. Next, we set up each page by just listing them inside the TabView.
3. We set the .tabViewStyle() modifier to PageTabViewStyle(indexDisplayMode: .automatic), which sets TabView to a page control.

If you build and run now, and then select Charts from the List, you will see the following:

Figure 2.3

We are done with getting all of our navigation set up. Next, we will create the first List using an array in the next section.

We are going to display a SwiftUI List view. Our List is going to display a list of colors. First, we need to create a color model.

Open the ColorModel file inside the Model folder and add the following:

struct ColorModel: Identifiable {
    var id = UUID()
   	var name: String
}

This struct has two properties: id and name. We have also set our model so that it conforms to Identifiable. When using a List in SwiftUI, our List is required to be unique, and there are two ways to handle this. We can either pass data, for example, the name as our unique ID, or we can use UUID and use this as our ID. The more you work with SwiftUI, the more ways you will encounter to handle Identifiable. If your data was coming from a feed, then you could use id if it were unique.

Open ColorsView.swift and add the following code inside the ColorsView struct, before the body:

@State var colors: [ColorModel] = [ ColorModel(name: 'Red'),
                                	ColorModel(name: 'White'),
                                	ColorModel(name: 'Blue'),
                                	ColorModel(name: 'Black'),
                                	ColorModel(name: 'Pink'),
                                	ColorModel(name: 'Yellow')
]

Inside the body variable, replace Text('Hello World') with the following code:

List {
    ForEach(colors) { color in // Step 1
        NavigationLink(destination: EmptyView()) { // Step 2
            Text(color.name) // Step 3
        }
    }
}

We just added another list; let's break down the rest of the code:

1. We have a ForEach loop inside our List, and as it loops through the array, it gives us a color.
2. Our ForEach loop creates a NavigationLink every time it loops through. NavigationLink is used to link to another page, but you might be wondering why you don't see EmptyView() in the folders. EmptyView() is an empty view that we get with SwiftUI and is excellent for prototyping. Using this allows us to deploy a simple placeholder that we can use until we create our actual detail view. For this example, we won't change it, but in later chapters, we will.
3. Text(color.name) is our button label.

We are finished setting up our Colors View. Hit Command + R and you should now see a list of colors where, when you tap on an item, it goes to a blank screen with a back button:

Figure 2.4

Instead of displaying an empty view, we can use a Text view to display our detail view. Update NavigationLink(destination: EmptyView()) to NavigationLink(destination: Text(color.name)). Now, if you build and run, you can tap on the color and will see it in the detail view.

We covered this in the last chapter, but before we write any SwiftUI code, we will look at a SwiftUI file. Open BarChartView and you'll see our struct view, which we looked at in the previous chapter. If you scroll to the bottom, you will see static var previews. Previews are used to preview our design without having to launch the simulator. You should see a blank space to the right of your code, and at the top of this, you will see a button named Resume:

Figure 2.5

Click Resume, and you will see the preview appear:

Figure 2.6

Let's move on to building some charts.

Building charts is pretty fun in SwiftUI because it requires very little code. Here is an example of the three screens that we are looking to create in this section:

Figure 2.7

We will start on the Bar Chart first using the Capsule shape.

Bar charts

Bar charts are a great way to display information to users. In this example, we will create a static Bar Chart that you can use to display data on the watch. We can also take all of these examples and show them on the larger screens of other devices. Whenever we work in SwiftUI, we will use Swift Previews to review our work, making our workflow go much faster than having to wait for the simulator to launch and display. Please note that to use Swift Previews, you must be on macOS Catalina. If you are not, then just run the simulator.

Creating a header

First, we will start by creating our header for our view. This view is just two text views stacked horizontally next to each other. Open BarChartView, and we will start by first replacing Text ('Bar Chart') with the following code:

HStack(spacing: 0) {
    Text('BAR')
        .fontWeight(.heavy)
    Text('CHART')
        .fontWeight(.thin)
}
.foregroundColor(Color.red)
// Add next step here

In this code, we have an HStack with two Text views, which also has a spacing of 0. We apply a foregroundColor of red to the HStack; this gives a red color to both Text views.

You should see the following in the Preview:

Figure 2.8

Next, we need to create the container that our bar chart will go in. Replace // Add the next step here with the following:

VStack(spacing: 0) { // Step 1
    // Header
    HStack(spacing: 0) { // Step 2
        Text('BAR')
            .fontWeight(.heavy)
        Text('CHART')
            .fontWeight(.thin)
    }
    .foregroundColor(Color.red) // Step 3
    
    // Add next step here
}

We are adding our Header first; let's break down the code:

1. We use a VStack as our main container with 0 spacing.
2. Inside the VStack, we have an HStack that we are using for a header.
3. We set the foreground to red for the entire HStack. Both BAR and CHART will now be red.

You should now see the following in the Swift Preview:

Figure 2.9

Now that we have our header, let's add our capsule. Replace // Add next step here with the following code:

HStack(alignment: .bottom, spacing: 2) { // Step 1
    VStack { // Step 2
        VStack(spacing: 2) { // Step 3
            Text('99')
                .font(.system(size: 11))
                .foregroundColor(Color(.gray))
            Capsule()
                .frame(width: 10, height: 100)
                .foregroundColor(Color(.red))
        }
        Text('M') // Step 4
            .font(.system(size: 12))
            .fontWeight(.black)
            .padding(.top, 0)
    }
}
.padding(.top, 10) // Step 5

We have a lot going on inside this HStack so let's go through each step together:

1. We are using an HStack for alignment purposes only. The alignment is set to bottom with the spacing set to 2. I am putting the alignment to the bottom because I want my graph to start bottom-up. If I weren't trying to get everything aligned to the bottom, I wouldn't use the HStack.
2. Next, we have a VStack that is our actual main container.
3. Inside the main container, we have another VStack that holds the Capsule shape and the Text view for the value.
4. Here, we use a Text view to display the day of the week.
5. We add a 10-pixel padding to the top to create a bit of space between the Capsule and the title.

When you are done, you will see the following in the Preview:

Figure 2.10

We need to make this a bit more dynamic because we want to create more than one instance of our Capsule shape. Let's refactor this code so that we can reuse this.

Cleaning up our code

Creating child views is a great way to clean up our code, and we can clean up two things in this view. First, our Header code will be used for multiple views, so we can move the headers into a child view. Lastly, the Capsule code we just added can also be made into a view to be dynamic. Let's check out our code and see what I mean:

Figure 2.11

We want to take the HStack that holds our header contents and move it to HeaderView. We also want to take the other HStack and move it to CapsuleView.

Creating a reusable header view

First, highlight and cut the first HStack that we have inside our VStack. Then, open the HeaderView class, and paste it into the body variable in place of Text('Header View'). Save the file and you should see the following inside HeaderView:

struct HeaderView: View {
    var body: some View {
        HStack(spacing: 0) {
            Text('BAR')
                .fontWeight(.heavy)
            Text('CHART')
                .fontWeight(.thin)
        }
        .foregroundColor(Color.red)
    }
}

Next, go back to BarChartView and type HeaderView() on the line where we just removed the code. Then hit Resume in Swift Previews, and you should still see the bar chart just as you did before. Let's do the same with our Capsule code.

Creating a reusable bar view

Find the remaining HStack that is inside the VStack, then select and cut the code. Open CapsuleView, which is inside the Views folder, and inside the body variable, paste the Capsule code in place of Text ('Capsule View'). Save the file, go back to BarChartView, and under HeaderView(), add CapsuleView().

When you are done, your BarChartView code will now look like the following:

struct BarChartView: View {
    var body: some View {
        VStack(spacing: 0) {
            HeaderView()
            CapsuleView()
        }
    }
}

Your code is now refactored, but we need to allow each view to take data. First, let's update our HeaderView so that it can take a title and subtitle.

HeaderView with dynamic text

Open the HeaderView file again and above the body variable but below the struct declaration, add the following variables:

let title: String
let subtitle: String

Then, under Swift Previews, update the preview variable by replacing HeaderView() with the following: HeaderView(title: 'BAR', subtitle: 'CHART').

That now gets rid of our errors, so let's update the two Text views to use both the title and subtitle variables. Update BAR inside our body variable with title.uppercased().

Then, update CHART inside our body variable with subtitle.uppercased(). Lastly, back in BarChartView, update HeaderView() with HeaderView(title: 'BAR', subtitle: 'CHART').

We should still see what we saw before, but now we can reuse this view in our next two examples. Lastly, we want to make it so that we display seven capsules (covering the week from Sunday to Saturday). Let's do this now.

Capsule with dynamic data

For our Capsule, we need to pass two values, one for day and another for value that we use at the top of the bar, which we also use for the height. Setting this up is similar to what we did with HeaderView. Open the Capsule view and file and, above the body variable but below the struct declaration, add the following variables:

let value: Int
let day: String

Then under SwiftPreviews, update the preview variable by replacing HeaderView() with the following:

CapsuleView(value: 75, day: 'S')

Next, let's update our Text('99') view with Text('\(value)'). Then, update the Capsule height with CGFloat(value).

Finally, update the Text('M') view with Text(day.uppercased()), then back in BarChartView, update CapsuleView() with CapsuleView(value: 75, day: 'S').

Now, we want to display seven of these CapsuleViews, so press Command + click on the CapsuleView text and select Embed in HStack. Sometimes, holding Command and clicking doesn't work, so you might have to restart Xcode or do it manually.

Now, copy and paste seven CapsuleViews into the HStack, as follows:

HStack {
    CapsuleView(value: 75, day: 'S')
    CapsuleView(value: 100, day: 'M')
    CapsuleView(value: 50, day: 'T')
    CapsuleView(value: 25, day: 'W')
    CapsuleView(value: 40, day: 'T')
    CapsuleView(value: 25, day: 'F')
    CapsuleView(value: 40, day: 'S')
}

Mix up the data however you'd like. When you've finished, notice that our data is not lining up correctly in the Preview:

Figure 2.12

The HStack container we are using needs the alignment set. Add HStack(alignment: .bottom). You should now see that all of the capsules, no matter their heights, line up along the bottom of our view:

Figure 2.13

We are done with Bar Charts, so we can now move on to Activity Rings next.

Activity Ring

In this section, we want to create an Activity Ring. First, we need to create our container and HeaderView. Open the RingView file and find the following line inside the body variable:

Text('Ring View ')

Once found, replace it with the following code:

VStack {
    HeaderView(title: 'ACTIVITY', subtitle: 'RING')
    
	// Ring goes here
}

We now just need to add the code for our Activity Ring. Find the following comment:

// Ring goes here

Replace this with the following code:

ZStack { // Step 1
    Circle() // Step 2
        .stroke(lineWidth: 20)
        .fill(Color(.darkGray))
    Circle() // Step 3
        .trim(from: 0.5, to: 1)
        .stroke(Color(.red), style: StrokeStyle(lineWidth: 12,            lineCap: .round, lineJoin: .round))
        .rotationEffect(.degrees(180))
        .rotation3DEffect(.degrees(180), axis: (x: 1, y: 0, z: 0))
}
.frame(width: 130, height: 130) // Step 4
.rotationEffect(.degrees(90), anchor: .center)
.padding(.top, 10)

We now have an activity ring, but let's discuss what we just added:

1. We are using a ZStack as our container. Since the ZStack lets us stack views on top of each other, it's a no-brainer what to use here.
2. We have two Circles in a ZStack (which allows us to overlap the Circles). The first circle in our ZStack has a stroke line width of 20 and a fill color of Dark Gray.
3. In the other Circle, we have trim set to 0.5, which specifies how much of the ring is filled. In this case, 0.5 equals 50% of the ring. We added a StrokeStyle, which lets us add a round lineCap and lineJoin with a lineWidth of 12. We have two rotation effects applied to this circle. We use this to flip the inner ring, filling it from the top and rotating clockwise. If you remove one of the rotation effects, it flips and makes the ring go counterclockwise.
4. Our ZStack also has a rotation of 90 degrees, which means that it starts from the center and top of the circle at the 12 o'clock position.

In the Preview, you should see the following:

Figure 2.14

We have completed our Activity Ring, and we can now move on to our last chart, the Wedge.

Creating our wedge

In our final view, we are going to make a wedge shape. To simplify this next shape, I have already created the Wedge shape for you. Open WedgeView in Views. Now, just like we did for the Bar Chart and Activity Ring, let's add our HeaderView inside a VStack. Add the following code inside the body variable, replacing Text ('Wedge Chart'):

VStack {
	HeaderView(title: 'WEDGE', subtitle: 'CHART')
	
	// Last step
}

Good, now we have our title displaying before we create our wedge. We need to create an array of wedges. Above the body variable, add the following array:

let wedges = [
    Wedge(startAngle: -43, endAngle: 43, color: Color.blue),
    Wedge(startAngle: 43, endAngle: 150, color: Color.green),
    Wedge(startAngle: 150, endAngle: -43, color: Color.red)
]

Our array creates three wedges we can use to make our WedgeShape. You can mess with the start and end angles and change the color of each wedge. Finally, replace the comment 'Last step' with the following code:

ZStack {
    ForEach(0 ..< wedges.count) {
        WedgeShape(
            startAngle: Angle(degrees: self.wedges[$0]. 
        startAngle),
            endAngle: Angle(degrees: self.wedges[$0].endAngle),
            lineWidth: 24
        )
        .foregroundColor(self.wedges[$0].color)
    }
}.frame(width: 140)

In the preceding code, we use a ZStack to hold all of the wedges. We then use a ForEach loop and loop through our wedges array. Each time we loop through, we create a new Wedge shape, taking the start and end angle along with the color from our array.

In this chapter, we got to work on some basic SwiftUI views. This chapter was a primer to help you get a bit more comfortable using SwiftUI. From here on out, our UIs will become more complex. In the next chapter, we will build an NBA Draft app for the Apple Watch. We will work with animations as well as loading data from a plist. I hope you're excited as I am because this is the kind of stuff that made me want to write this book.