SwiftUI: User Interface Construction | Amos Gyamfi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SwiftUI: User Interface Construction

teacher avatar Amos Gyamfi, Designing UI, Animations & Interactions

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (55m)
    • 1. Introduction to SwiftUI: User Interface Construction

      0:46
    • 2. Tour of the project

      1:11
    • 3. Measuring interface elements and getting color values using Zeplin

      2:29
    • 4. Creating the topbar using SF Symbols and text views

      5:10
    • 5. How to use the visual color picker in Xcode (SwiftUI) 

      2:40
    • 6. How to create an activity/progress ring

      9:09
    • 7. Creating the summary screen

      9:53
    • 8. Creating the graph structure

      6:40
    • 9. How to draw a line graph

      5:16
    • 10. How to create a seamless gradient 

      3:29
    • 11. Project 2: Creating Alarm Screen Using

      7:47
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

24

Students

--

Projects

About This Class

576299d3.gif

Welcome to the SwiftUI: User Interface Construction Class. In this class, students will learn how to design an iOS user interface using SwiftUI. The class involves recreating the beautiful but simple StepsApp's steps activity summary screen.

What will you learn from this class?

There are four screens to design in this class, a screen that contains all the other three screens, an activity ring screen, an activity summary screen, and an activity summary graph. At the end of this class, students will be able to:

  • Compose individual small views into a large one screen view.
  • Use parent containers such as VStack, HStack, and ZStack with confidence
  • Style interface elements using the Xcode color picker
  • Know how to use SF Symbols
  • Know how to exact dimensions and colors of interface elements using Zeplin, before they are recreated in SwiftUI
  • Kow how to draw and design activity/ progress rings in SwiftUI
  • Understand how trimming and stroke work in SwiftUI
  • Draw a line graph using the path in SwiftUI
  • Apply a seamless gradient fill to the peak of a line graph. 
  • understand the tips, tricks, and techniques in designing user interfaces with SwiftUI, Sketch, and Zeplin. 

Contents

  1. Introduction to SwiftUI: User Interface Construction
  2. Tour of the project
  3. Measuring interface elements and getting color values using Zeplin
  4. Creating topbar using SF Symbols and text views
  5. How to use the visual color picker in Xcode (SwiftUI) 
  6. How to create an activity/progress ring
  7. Creating the summary screen
  8. Creating the graph structure
  9. How to draw a line graph
  10. How to create a seamless gradient 

Meet Your Teacher

Teacher Profile Image

Amos Gyamfi

Designing UI, Animations & Interactions

Teacher

I am teaching how to design iOS interfaces and animations using SwiftUI. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to SwiftUI: User Interface Construction: Hi, welcome to my course, SwiftUI: User Interface Construction. My name is Amos. In this course, we'll look at real iOS app and recreate its interface using SwiftUI, and Sketch. recreate its interface using SwiftUI, and Sketch. In this very first video, we recreate the summary screen of the Steps activity app. Over here, you will learn how to create the activity ring. The summary views using SF Symbols. Finally, you will also learn how to draw the graph using the path in SwiftUI, This class is designed for designers. We don't need to know how to write any code. I'm going to guide you on how to create this activity summary screen using SwiftUI. So let's get started. 2. Tour of the project: Hi, welcome to the first video in this course, Swift UI User Interface Construction. Before we begin designing the interface, let's look at what the project involves. You can see over here, I am now in contentView.swift and that contains all the individual screens. You can see from here. We have the navigation, the progress view. summary review and the graph. The progress view is contained in another file. We have the summary.swift that contains all the summary views. Next is the graph which contains only the graph. In contentView.swift, I have combined all the views into one screen. This user interface was first designed in Sketch. It was then recreated using SwiftUI. So see you in the next video where we are going to look at how to measure and get all the attributes of the sketch designs into Xcode. 3. Measuring interface elements and getting color values using Zeplin: Hi. In this video, we'll look at how to get the visual attributes of sketched designs into Xcode so that we can create them exactly as they are in Xcode. For example, when I press command and click on any layer in the inspector, we have the visual attributes. Over here you can see we have the width and height. When I scroll down, you can see there is also the color. Over here. We can use this method to inspect all the layers in Sketch and recruit them in SwiftUI. But the most efficient way is to use a plugin called Zeplin. I have it already installed on my laptop. But if you want to install Zeplin, you can go to zeplin.o and download the plugin and installed that. to your sketch plugins. In order to get the design from Sketch to Zeplin. I'll go to the toolbar and click plugins. You can see I have Zeplin shown over here. In order to get the design from scratch to Zeplin, you can select the individual layer which you want to get into Zeplin, or select the whole artboard. I will go to the plugins again. Go to Zeplin and export selected. That brings this window. So I'm going to click Export. I have this already exported into Zeplin. There are two ways to use Zeplin. You can use the online version. I also have Zeplin App installed on my computer that is what I'm going to use. You're can see over here, this is the same design I showed in Sketch. I have it already uploaded into Zeplin. This is the Zeplin desktop app. With the screen selected, I am going to double-click. Over here, we can select all the individual layers in the same way as I showed in Sketch, with each layer selected. When we go to the inspector on the right, you can see we have all the attributes, the color, the size of the layer. So this is going to help us in SwiftUI. In the upcoming videos, we are going to use Zeplin to measure all the individual attributes so that we can create them exactly as they are with Swift UI. So see you in the next videos. 4. Creating the topbar using SF Symbols and text views: Hi, I would like to welcome you to my course, SwiftUI, User Interface Construction. In this course, we measure user interface elements in Sketch and Zeplin and recreate them exactly how they are with SwiftUI. In this video, we are taking a look at how to create this top bar that contains the gear icon, the today text, and the share icon. Let's look at how to create that with Swift UI. In Xcode. You can see we have this VStack. This is the parent container containing all the items on the screen. Using the VStack, we arrange all the elements on the screen vertically. So the VStack is the parent container for all these items. The top bar is also embedded in an HStack stock. That is that. With the HStack. We arranged the child items horizontally. That is why we have to gear icon, the today text and the share icon arranged horizontally. These two icons, the gear, and the share icon are SF Symbols. Let's look at how to add them. In the HStack, we add an image. And this first image is the settings icon, which is the gear icon. Then we have a text. That is the today text. The next is another image, which is the share icon. Let's begin with the settings or gear icon. Let's open the SF Symbols app. Let's search for gear. The one that is the same as the one we have in the design is this shape, gear shape, with that selected. Let's press Shift + Command and C to copy the name. We come to Xcode and paste. You can see from the screen, we have to gear icon. We can write the text over here, but less copy it from the design. In Zeplin, we can double-click the item and go to the inspector. click on the text to copy to clipboard. Let's come back to Xcode. Press Command and V to paste, we have the gear icon and the today text, arranged horizontally because of the HStack, the container. Next, we have the image. We can add the image. By opening the SFymbols app. With this image, we search for share icon. And the one that is the same as the one we have in the design is this one, square and arrow up. We can click and press Shift + Command and C to copy the name. We come back to Xcode and paste over here. We have all the icons and text for the top bar, arranged horizontally. If we look at the design, you can see there is this wide space between the items. We can add this space using what is called a spacer. Using the spacer, we can distribute the items horizontally or vertically due to the parent container. Since we have an HStack as the parent container, using the spacer will allow us to distribute all the items horizontally based on the available space. Let's write spacer and select from the options. So the spacer occupies the available space between the gear icon and the today and pushes the today text and the share icon to the right. We can select the spacer, press command + C to copy. After the today text. We can press Command V to paste. And that also pushes the today text, to the center. And now we have the space between the gear icon in the today text and the space between the today text and the share icon to be the same. So this is how we can use the space to distribute the items horizontally. Let's go to the design again. Here you can see this text has the size of 18. When we come to the one in Xcode, we can add a modifier to change this text to a title. Let's write .font and select the first option and write .title. And that convinced the text to a title. In the next video, we will take a look at how to create the progress ring. So see you in the next video. 5. How to use the visual color picker in Xcode (SwiftUI) : Hi, in this video, we take a look at how to use the Xcode's color picker to add color to user interface elements. So let's get started. From this design. You can see the gear icon, that is a settings icon and the share icon have green color. When we come to the icons in Xcode, you can see they are white. Let's add the foreground color to these icons so that they have the same color as those in the design. We are using the Zeplin app to get the attributes of the interface elements. We can double-click the settings icon. You can see this is the color of the icon. Let's select and copy the color by pressing Command and C. Now let's go to Xcode from here. We can use the foreground modifier to add the foreground color to the icons. Let's write .foreground. When I click anywhere on the screen, you can see the icon color has now changed to blue. But we're going to use the color picker to add this color. Let's double-click the color and delete. Now, let write color, and select from the options. Let's select the first option. Here we are going to use the color literal that will allow us to pick the color for the items. By default, we get the white color. Let's double-click the color, and that opens the color picker. We can select any of these colors. You can see from here, we have changed the color of the icon. Let's double-click again. If you want more control, we click on other and that opens the detailed color picker. With the color we copied from the design. That was this color. With the color still selected. We can come over here and paste the HEX value, like so, and press enter. And that changes the icon color to green. Like, shown in the design. Let's select the share icon also. You can see they have the same color. So in Xcode, we are going to copy and paste it over here. And the color of the share icon also changes to green. So, friends, this is how you can use the color picker in Xcode to add color to interface elements. In the next video, we are going to take a look at how to create this progress ring. See you in the next video. 6. How to create an activity/progress ring: Hi, welcome to another video of the SwiftUI: User Interface Construction course. In the previous video, I showed how to create the top bar. In this video, we take a look at how to create this activity ring. Before we start, let's look at how this is arranged in Xcode. When we take a look at the design of the activity ring, in Xcode, we can create the same thing using stacks. The parent container over here, is a ZStack. So, when we take a look at this ZStack, which ends at this point, we use that to compose the circle and the text. The text is on top of the circle. First, let us see how to create the text. When we come to the code, we can create the text using VStack. Ok. You can see over here we have the icon, this text and another text arranged vertically. We can do so by placing them in a VStack container. Let's select the icon. With that selected, you can see over here on the right, we have the attributes. This is an SF Symbol. So we are going to use the SF Symbol app. Copy the name of the symbol, and add in Xcode. Let's open the SF Symbol app. I'm going to write figure. This is the same symbol we saw in the design. With that selected, I'm going to press Shift, Command and C to copy the name I will come to Xcode and paste it over here. You can see it shows in the screen, I have already set the font to a large title to reflect that we saw in the design. The next in the VStack container is the total number of steps. We can write that over here. Or we just copy the text in Zeplin. We can click to copy to clipboard. I'll come to Xcode. And over here. This text is using a font size of 90. Next, we go to the goal. With that selected. We go to the inspector, click to copy to clipboard. We now come to Xcode, and paste it over here. With this, we have the text and icon arranged vertically due to the parent container, which is the VStack. Now that the text is created, let's look at how to add the activity ring itself. The ring is made of two parts, the inactive part and the active part. Which is green. Let's start with gray one, which is the inactive part. To create that one, we add a circle, like so, and that takes the width of the screen. Now that the circle is created, what we have to do next is to define the size of the circle. We can do that using the frame modifier. Over here. We set the width of the circle to 342 and the height to 342. So the width and height are the same. And set the alignment to the center. Or we can just remove this part which is not needed. With that still removed, the alignment is still set to the center by default. When we come to the design, you can see the inactive part has this color, which is a green color. We can add that in Xcode using the foreground modifier. Over here. I'm going to uncomment this. So you can see we have the same gray color for the activity ring, which is inactive. Now we have the circle. When we take a look at this, this is a stroke. To convert the circle into a stroke, we use the stroke modifier. And that removes the inner part of the circle. With a stroke modifier, we can use the line width to define the thickness of the stroke. Over here, it is set to 6, but we can change it to something like 12. Let's change it back to 6. Now that we have created the inactive part, let's look at how to create the active part. The active part is also a circle which is converted to a stroke. And using the trim modifier to cut half of the stroke. We can create this in the same way as we created the inactive part. First, we create a cycle. And that takes the whole width of the screen. We can use the frame modifier to define the size of the circle. So over here, we create the circle to be the same size as the inactive one. Next, we define the color of the circle by using the foreground modifier. When we come to the design. This is the color of the stroke. We can use this foreground modifier to define the color. So here we have the green color. Next, we are going to turn this into a stroke using the stroke modifier and that changes to a stroke. And this stroke has the line width of 10. This is a little bit bigger than the line width of the inactive part. Next, we have to cut part of the strok so that we have only half of the stroke left. Let's look at how the concept works in Sketch. Over here, in Sketch, we draw a circle. Using the oval tool. With that done, We go to the inspector and use the border. And uncheck the fill and change the stroke to something like 12. To trim or cut part of this circle. We select the circle and press enter to go into vector editing mode. With this done, we can go to the toolbar and click the scissors tool. With this tool, we can cut any part of the circle. We don't want. By hovering the cursor on the circle, we can click to cut the unwanted part. We can now go to the inspector and round the edges. And that is how you can cut the unwanted part of a circle or stroke in Sketch. By using the scissors tool. To do the same thing in Xcode. We use the trim modifier. Over here. We are cutting half of the circle. I can also, change this to 1/4. And with that, we get this. Or 1/5. You can see from here, we trim the stroke from the bottom. But when we look at the design, the trimmed part is on the left. So we use rotation effect to rotate the stroke to an angle of 90 with the anchor point set to the center. And with that, we have the same activity ring as shown in the design. In the next video, we are going to take a look at how to create the summary. So see you in the next video. 7. Creating the summary screen: Hi, welcome to another video of the SwiftUI: User Interface Construction course. In the previous video, we looked at how to create the activity ring. In this video, we are taking a look at how to create the summary section in Xcode. I have divided them into three screens. The first one is the progress, which consists of the activity ring. Next, we have the summary screen and then, the graph. In this video, we are taking a look at how to create the summary screen. You can see from the design, the summary is made up of three sections. Total calories, total kilometers, and the total duration. Each section is embedded in a VStack so that they are arranged vertically. You can see from here, the circles and the text are arranged vertically. The same as this section. And that also, and together we embed them in an, HStack to arrange them horizontally. So in Xcode, all the sections are embedded in this HStack. I have folded each section. Let's double-click to expand. First, we are taking a look at how to create the total calories section. We draw a circle, and use the frame modifier to define the size of the circle. When we come to the design, if I double-click the circle, You can see it has a width of 50 and a height of 50. So in Xcode, we do the same. We used the frame modifier to define the size by specifying the width as 50 and the height as 50. You can see over here, the inactive section of the circle has this color. We apply similar color in Xcode. We are using the foreground modifier to specify the color of the circle and as you can see this is converted into a stroke. So we use the stroke modifier to remove the inner part of the circle. Next, lets look at how to create the green ring. We embed the circle we just created into a ZStack so that we can put another view in front or the back of it. So we create another circle in front of the one we just created. You can see from here, the green circle also has a width of 50 and a height of 50. So we use the frame modifier to define the size. That is, the width of 50 and a height of 50. We also use the foreground color modifier to define the color and use the stroke modifier to convert it to a stroke. You can see for me, we cut half of the circle. So we're going to use the trim modifier to cut part of the circle. From here, you can see we have removed a bottom part, but we can use rotation effect in order to rotate it at an angle of 90 degrees so that it looks like the one we have in the design. Next, Let's look at how to add the icon at the center of the circle. You can see we have all the views embedded in ZStack so that we can put other views in front or the back of one another. The icon you see over here is an SF symbol. Let's look at how to add that. We are going to add that over here. So I'm going to open the SF Symbol app. Over here, We can search for flame. This is the one that we need. I can press Command, Shift, and C to copy the name. And past over here. That brings the flame icon. Now, what we have to do is to put the test below the circles. So I'm going to uncomment this part. So how do we have the text below the circle? Next, we are looking at how to create the other section, the total kilometers section. Let's uncomment this part of the code. And double-click to unfold it. We only have to circle. To create the test below it, you can see from here, all the views are also embedded in a a VStack. So to create a text below it, We going to add the text over here. In Zeplin, I can double-click and click on the text, to copy to clipboard. Let's click inside the text and press Command + V, to paste. Next, we add the icon at the center of the circle. In the same way, we added the flame icon. Let's bring the SF symbol app and search for arrow. By scrolling down, we can find the arrow we want. Let's pick this one, arrow.forward, and press Shift, Command, and C the copy the name. And that one is this image. So we paste the name over here. You can see on top of the circle is the star icon. Let's look at how to add that. We bring the SF symbol app again and search for star. The one we're looking for is star.square. By selecting it, I'll press Shift + Command and C to copy the name, and then paste it over here. You can see over here it moves on top of the circle because we hope the offset position specified. So we have the X offset to be 10 and Y offset to be -22. Let's comment the offset. You can now see it moves to the center and overlaps with the arrow icon. So we use the offset to move it to the position we want. Let's see how to add the total duration section. The total duration section is also embedded in this VStack. Let's uncomment the code and double-click this icon to unfold it. Since we have written in a VStack. This section also adds the text below the circle. From the design, We can copy the text by selecting it and clicking in the inspector to copy to clipboard. I'll click here and press command fee to paste. Next. We look at how to add the arrow at the center of the circle. That is also an SF Symbol. I'll bring the SF Symbol app and search for clock. The one we're looking for is this one. Which is an outline clock. I will press Shift, Command, and C to copy the name. This is where we have the image. I'll click here, press Command V to paste the name. So we have the icon at the center of the circle. Next, we look at how to add the star and top-right of the circle. We need to add it in the same way. We added the one for the total kilometers. We use an overlay in order to add that on top of the circle. We bring the SF Symbol app again. And search for star. We select the one we are looking for, and press Shift, Command, and C to copy its name. and paste over here. You can see we are using an overlay. We use an overlay to put a view in front of another view. And since we have to offset X property set to ten and a Y property set to -22.5. The star moves to the top of the circle. If I change the offset to 0, you can see we have it at the center of the circle. I'll press Command and Z to undo the change. When we look at the design, you can see the spaces between the sections are very wide. We can achieve the symptom by using a spacer. We have a spacer between the total calories and the total kilometers. Let's uncomment this spacer. And that pushes the content to the edges of the screen. There is also another space between the total kilometers and the total duration. Let's uncomment that as well. And that pushes the total kilometers to the center of the screen and others to the edges of the screen. We have successfully created the summary screen. In the next video, we'll take a look at how to create the graph. So see you in the next video. 8. Creating the graph structure: Hi, welcome to another video of the SwiftUI: User Interface Construction course. In the previous video, I showed how to create the summary view. In this video, we'll look at how to create the top label of the graph, the grid for the graph, and also the day, week, and month views. So let's get started. Let's start with the top label. You can see from the design the labels are arranged horizontally. We do that in SwiftUI using an HStack. You can see from here, we have the HStack. First, We create a text and embed the text in an HStack. By embedding the text in an HStack, we arrange all the child elements of the HStack in horizontal direction. In this HStack, we have Monday to Sunday. So here, we create all the text from one day to Sunday. When we look at the grid for the graph, you can see the horizontal lines and also the vertical lines. For the vertical lines, we create a rectangle, convert the rectangle to a stroke, and then repeat the rectangle a number of times. Let's see how to do that in Sketch. I will press V to bring the vector tool. Click to define a vector point and click again to define find another vector point and press escape. To let go the tool. In the inspector, I will change to something like that. With the line selected, I will go to the toolbar and click on this icon, Make grid, click and drag around to delete the ones below. I'll select both. And click on this icon. Drag to the right to repeat the lines as many times I want. So this how you can repeat elements in Sketch using the Make Grid tool. Let's see how we can do the same. In SwiftUI. We create the rectangle and convert it to a stroke using the stroke modifier. And then, use forEach to repeat as many times we want. Over here in the design, you can see we have 7 vertical lines. So here, we use a range from 0 to 7 so that we have 7 vertical lines. We do the same for the horizontal lines, we create a rectangle, use the stroke modifier to convert it to a stroke and also use the stroke style to convert the line into a dashed stroke by setting the dash value [7, 7]. And with that, we get a horizontal dash stroke. Now, let's look at how to create the day, week, and month views. You can see from the redesign, those views are arranged horizontally as well. We embed all the views in a horizontal stack, that is the HStack. First, we create the text. Let's go to the design and select the day over here in the inspector, we can click to copy to clipboard, come to the code and paste it over here. The next is the icon. Let's open the SF Symbol app and search for arrow up. The one that we need is this, arrow.circle.up.fill. With that selected, let's press Shift, Command, and C, to copy the name. And come to the code, and paste. I have used a foreground modifier to change the color to system green. That is why we have the green color. Next, we have the text, "Mont". With that selected, we go to the inspector in Zeplin, click the text to copy to clipboard. We come to the code and paste over here. From the design, you can see below the up arrow icon is also, the week button. Let's look at how to create that using a rounded rectangle and overlay. We go to the section where we have the up arrow icon. So over here we can put the week button below the up arrow icon. We do this by creating a rounded rectangle. By default, we have corner radius of 25. We can check this from your design. Let's look at the properties of the rounded rectangle. From the inspector, it has a width of 61, height of 21 and a corner radius of 10.5. So we change this from 25 to 10.5. Let's go back again and see it has a width of 61 and a height of 21. We can do the same here by adding the frame modifier and set the width to 61 and height to 21. Like that. Let us look at the color. You can see it has a gray color. Let's add the color using the foreground modifier. Let's use a system color. We can select from different types of grays. For example, systemGray6 or systemGray4. Let's leave it like that. From the design, you can see we have this week's text on top of the rounded rectangle. We can add that using an overlay. So here we are going to add the overlay modifier and the specified text as the argument. Let's go to the design again. Select the text, go to the inspector, click the text to copy to clipboard and paste over hear, in the empty string. With this, we have successfully created the top label, the grids for the graph, the day, week, and month views. In the next video, we will take a look at how to draw the graph using SwiftUI. So see you in the next video. 9. How to draw a line graph: Hi. In this video, we take a look at how to draw this beautiful line graph with this seamless gradient fill using path in SwiftUI. So let us see how this is done. We are going to draw this line graph based on a hand-drawn graph using the normal coordinate system. But before we start, we need to understand how the iOS coordinate system works by comparing that with the normal coordinate system for the hand-drawn graph. When we take a look at a normal coordinate system, as we move up, the Y values increase. And as we move from left to right. The X values increase. The iOS coordinate system starts from the top left corner of the screen. So we have the origin at the top left corner. As we move from left to right, the X coordinate increases. As we move from the top to the bottom, the Y coordinate increases. This is opposite to the normal coordinate system. In a normal coordinate system, as we move down, the Y coordinate decreases. But here in the iOS coordinate system, the Y coordinate increases. So I want to remind you, this line graph was drawn using the normal coordinate system. To achieve the same thing in iOS, we need to flip it. I'll show you how to do that. So let's get started. In Xcode, we draw the line graph using path. I have already created the path over here. As I told you before, using the path, whatever we draw, will be started from the top left corner of the screen. So here, I have used the offset to move the position of whatever we are going to draw. I have also used 2D and 3D rotation effects to flip the orientation of the graph. Let's take a look at how to draw this line graph is Sketch. I have brought the hand-drawn graph is Sketch. To trace this graph, we use the vector tool. I'm going to press V and click to define the starting vector point. I'll move the mouse to this position. Click again to create another point. I'll move to the top. Click to define another point. I'm going to repeat the same process in order to draw the graph. Since everything is done, our press Escape. To let go the tool. From the inspector, we can change the line width over here, and also click here to change the color. Let's look at how to do the same thing in SwiftUI. Over here, we need to define where we want to draw from using path.move. We create the first vector point using path.AddLine. That first point should be the same as where we moved the path to. You can see from here, with path.move, we have the X coordinate set to 20 and the Y coordinate set to -30. And over here, in path.AddLine. That is the first vector point. We have defined the X coordinate to be 20 and a Y coordinate to be -30, which is the same as path.move. If we compare this to what we just drew in Sketch, this point will be the first we have drawn, that is X, 20 and Y, -30. Next, we go to the next point, which is this vector point. So I'm going to uncomment this part of the code. And next, we go to the 3rd vector point, and that is this one. And next, we go to the 4th one, which is this. And the one that follows, which is this one. Now, we move to the one at the peak, which is this path. And the last vector point. As I said in the beginning of this video, anything we draw using the path in SwiftUI will be drawn from the top left corner of the screen. So over here, I have used offset and set the X coordinate to minus 14 and Y coordinate to minus 75 in order to move its position from the top left corner. I have also used 2D and 3D rotation effects to flip the orientation of the graph. Without 2D and 3D rotation, let's look at how the graph looks. So without 2D and 3D rotation, this is how the graph would look. I'll press Command Z to undo the change. In the next video, we will look at how to create the seamless gradient at the peak of the graph. So see you in the next video. 10. How to create a seamless gradient : Hi. In the previous video, I showed you how to draw this line graph with SwiftUI. In this video, we are taking a look at how to create the seamless gradient at the peak using Sketch and SwiftUI. Before we start, let's see how to create that in Sketch and apply the same technique in SwiftUI to draw the seamless gradient at the peak of the line graph. To create this in Sketch, we first need to copy the line graph and make a duplicate. I'll do that by pressing command and D. To make a duplicate. With the duplicate selected, I'll go to the inspector, uncheck the border and check the fill. Then press Enter to go into vector editor mode and press Escape. I'm going into the toolbar to select the scissors tool. With that selected, I'll click here to remove all the unwanted parts we don't need. So it is left with the fill at the peak. I will click the fill, and change the color from solid color to gradient. The gradient has two stops. On the top. I'm going to sample the same color, as the line graph. And at the bottom, I'm going to sample the background using the eyedropper. So this how to create the seamless gradient here inside Sketch. We can apply this same technique to create that with SwiftUI. We already have the line graph, so we make a copy by copying the whole of this. You can press Command + C to copy and paste. After that, we need to remove the stroke. So do we change it to a fill. That is what we did in Sketch. And then remove the part that we do not need. So we start from here and remove this part. So we can see from here, this starts from where we have the X value to be 255. So it starts from here. So this is the only thing you have to do. You first make a copy and then remove the part that we do not need. You can see it is from Monday to Friday. And that is the same thing so we have only 3 points left. The Friday, Saturday, and Sunday. And with the stroke removed, let's uncomment the code. You can see from the graph, we have successfully created the seamless gradient. Using the technique sketch. We copy the same line graph, remove the stroke, and apply the fill. So it is the last video in the SwiftUI: User Interface Construction course. In this course, we've looked at how to create the activity ring, the summary view, and also, the line graph with the seamless gradient. If you find this course to be useful, just subscribe to be a student. From now, I'll be creating more courses like this. Thanks for watching. 11. Project 2: Creating Alarm Screen Using : Hi, in this video, we take a look at using space and Spitzer and pattern in a region user interface elements in Swift July. So let's get started. The user interface you see on the left is the zip line up. You can use the plan to inspect interface element and recruit them exactly AS they're using Swift UI. The user interface on the right contains the swift UI code. So we are going to use the UI indiscipline up as reference for the one on the right, we are going to read the interface element in the same way as the one on the left are used as a blend to measure an inspect all the interface element and recruited them exactly as they are in Swift July. By skeleton, this button you can see on the right when we go to the Properties Inspector, this button has a width of 198 and the height of S21 points. When we double-click the one on the right, that is the Swift UI code. You can see it has the same properties as the one I showed in the zip line. You can see here it has a width of 198 and height of 61, and the same color as I showed in the xy-plane URI. Let's go to the swift UI interface and start with spacing. Spacing is used to adjust the space between child element in a container. So if you have a vista OK, the spacing will be the vertical spacing between the child elements. If you have an H stock, a stock that arranges is start content horizontally. In that case, spacing will be used to adjust the horizontal space between the child elements. Let's select this feedstock. You can see it contains the SF symbol, that is the lock icon, currentTime and debt. We're going to use spacing to artists. The vertical space between the child element, that is the lock icon, currentTime, and did the vista OK, contigs basin as parameter. Let's specify spacing of ten. You can see over here we have adjusted the vertical space between the lock icon and the current time, and between the current time and today's date. Let's widen it by entering data. You can see we now have a large vertical space. So this is how to use spacing to adjust the space between child elements in a container. We are going to change it back to ten. Next, we go to space. You can use a spacer to push child views to the edges of the apparent. Let's look at the UI and discipline up again. You can see we have a wider space from me to the alarm test, and also from this button to the Stop button. We're going to use a spacer in Swift July to achieve symptom. So between the layers on the top and the one in the middle, we're going to use a spacer. And between the layers in the middle and one at the bottom of the screen. We are also going to use a spacer. So let's identify the views in Swift UI and is used the Spitzer to push them to the edges of the apparent. When we select this vista, OK, you can see it ends over here. So soon after the pollution, we are going to add a spacer. Since discharged views are also in a vertical container. The views are pushed vertically to the edges of their parent container, which is this vista. Ok, let's look at the UI in discipline up. Again, let's also use a spacer between the snooze button on the Stop button. So let's identify the snooze button is snooze button and alarm tests are also in a vertical on Dina. After the Vedic OK, on DnaA. We're going to add the spacer. So we copy this spacer on business over here. And that pushes the alarm test and a snooze button to this center of the screen. Let's go back to the xy-plane UI. Again. You can see the space between the content and the top edge of the screen is much wider. And also between the bottom edge and the content is much wider than the one that we have in Swift July. To put a space around a content, we're going to use what is called pattern. So lets identify the parent container, hold an audit views on disk screen. Over here we have the parent container contains or diffuse on the screen by solid indivi stack, you can see we have this blue bounding box and that shows that, that is the parent container containing or diffuse. Let's press command under minus to reduce the font size. So that we're gonna see where does parent container ends. By clicking here, again, you can see it, this is where the parent container ends. So I'm going to press command and blast to increase the font size again. And scroll down. Over here, we're going to add pattern so that we get a wider space at a top edge and a bottom edge of the screen. We can add pattern to the content by using the pattern modifier. You can see we have apply a default button to the content. And the pattern is applied to both edges of the content. Top left, bottom on the right. But that is not what we want. So we can specify a parameter inside the pattern so that we apply it only to the top. What? We can do that by using 2.5th dukkha. And it applies a Vertica pattern to the top and the bottom. We're going to use a custom value. So we bring in coma and unspecified devalue. For example, you can put 50 r. Now, you can see we avoid didn't displace at a top and bottom of the screen. Let's inspect the content in discipline to get to a subspace and value. When we click on this button and move the mouse down, you're gonna see the space between the content and the bottom is 58 points. So we come to Swift URI and to change the padding value from 50 to 58. So in this video, we have few spacing, Spitzer and pattern to arrange the interface elements in Swift, you are in the same way as we have in settling.