Introduction to SwiftUI

In this video, I'll give you a tour of SwiftUI, 0:01 Apple's modern framework for building user interfaces. 0:04 Today, you'll learn how to start a SwiftUI project in Xcode, 0:07 explore the template code, preview and test your UI, work with essential 0:11 layout tools VStack, HStack, and ZStack, 0:16 add and style text and buttons, 0:20 adjust spacing and run actions when buttons are tapped. 0:23 By the end of this video, 0:27 you'll have a solid foundation in SwiftUI's essential building blocks. 0:28 Let's get started. 0:33 First, let's open Xcode and create a new project 0:34 by clicking the Create New Project button. 0:38 Next, we need to choose a template. 0:41 Since we're building an iPhone app, select iOS 0:43 and then choose App as the application type. 0:47 Now let's name our project. 0:50 For this video, I'll name it SwiftUI Basics. 0:52 The organization identifier is usually set to your name. 0:56 Ensure SwiftUI is selected 1:01 as the interface and set the language to Swift. 1:03 Finally, choose a location to save your project and we're ready to go. 1:07 Xcode has 1:12 created a new project with a default SwiftUI template, 1:13 setting the stage for building a UI in a clear and interactive way. 1:17 For this video, we'll be working in the contentview.swift file, 1:22 so I'll close the navigator to focus on the code. 1:26 Now let's break down what's inside this default template. 1:30 Import SwiftUI brings in the SwiftUI framework, 1:34 which provides all the tools needed to build the UI. 1:38 Struct contentview defines 1:42 a view called contentview. 1:45 In SwiftUI, almost everything is a view. 1:48 Think of a view as a screen or part of a screen. 1:52 It could display a list, a button, or even a simple message , Hello world. 1:55 In SwiftUI, views are how we build 2:01 and organize the user interface. 2:04 The body property describes the content and layout of the view. 2:07 In this case, it uses a VStack or vertical stack, 2:12 which arranges views vertically on the screen. 2:16 Inside the VStack, we have an image that displays a system icon, a globe. 2:20 The .imgscale.large and 2:26 .foregroundstyle.tint modifiers just adjust its appearance. 2:29 Text Hello World adds a text view to the screen. 2:35 .padding adds space around the VStack 2:40 to keep things from being too cramped. 2:43 At the bottom, the hash 2:46 preview section lets Xcode display a live preview of your UI, 2:48 so you can see changes instantly as you work. 2:54 This template provides a great starting point 2:58 for building your own SwiftUI interfaces. 3:01 On the right side of Xcode, you'll find the Canvas preview. 3:04 If you see a resume button, click it to start the live preview of your UI. 3:09 This real-time preview is one of Xcode's best features. 3:14 It allows you to see changes instantly as you modify your code, 3:18 making UI development much faster and more interactive. 3:23 SwiftUI uses layout containers 3:27 called stacks to arrange UI views. 3:30 In our template, we're using a VStack, which stacks views vertically. 3:33 That's why the globe icon appears above the text. 3:38 To arrange views horizontally, we use an HStack instead. 3:42 Let's change VStack to HStack and see what happens. 3:47 Now the globe and text are placed side by side instead of stacked vertically. 3:52 SwiftUI also provides a ZStack, 3:57 which overlays views on top of each other. 4:00 Let's change HStack to ZStack. 4:04 Now the text appears on top of the globe icon. 4:08 The order of views inside a stack matters. 4:12 In a ZStack, the last view in the code appears on top. 4:15 In our example the text appears above the globe 4:19 because it comes after the image in the code 4:23 Let swap their positions 4:26 Now the globe icon appears on top of the text instead 4:29 Stacks are a powerful way to control layout in SwiftUI, 4:34 and understanding their behavior will help you build great-looking interfaces. 4:39 Now let's add some text to our UI. 4:44 First, I'll change our ZStack back 4:47 to a VStack and clear the views inside it. 4:49 SwiftUI makes adding text to the screen simple using the text view. 4:53 You just write text, parentheses, 4:59 and inside the parentheses, enter a string wrapped in quotation marks. 5:01 Let's add two text views. 5:06 I'll have this text say, top of the screen. 5:09 I'll copy the text view and have the second text say bottom of the screen. 5:13 Now, you don't need to do this. 5:20 I'm mostly doing this so that you at home can view the text in the preview better. 5:21 By default, these text views appear in the middle of the screen. 5:26 But what if we want the first text at the top and the second text at the bottom? 5:30 SwiftUI provides a special view called spacer, 5:36 which fills available space and pushes other views apart. 5:39 Let's add a spacer between our two text views. 5:44 Now the first text moves to the top and the second text moves to the bottom. 5:49 You can use multiple spacer views 5:54 and they will evenly distribute the space between views. 5:56 For example, let's add another text view in the middle 6:00 with the message middle of the screen 6:04 and below it another spacer view. 6:07 Now all three text views are evenly spaced on the screen 6:10 because each spacer takes up an equal amount of space. 6:14 Feel free to play around by adding more spacer 6:18 views and text views to see how they affect the layout. 6:21 Understanding how spacer works will help you control 6:25 spacing and positioning in SwiftUI. 6:28 Now that we know how to add text to the screen, let's explore how to style it. 6:31 SwiftUI makes it easy to customize the appearance of text using modifiers. 6:36 To change the color of our text, we use the .foregroundstyle modifier. 6:42 This modifier allows us to style or color views on the screen. 6:48 For example, let's change our text color to blue. 6:53 Inside the parentheses, type . 6:57 to see a list of default color options available in SwiftUI. 6:59 To change the font size and style, use the dot font modifier. 7:05 Typing a dot inside the parentheses will display 7:10 a list of default fonts you can choose from. 7:12 I'll select title, but feel free to explore other options. 7:16 You can 7:20 add multiple modifiers to style your text even further. 7:21 Try these. 7:24 Dot bold makes the text bold. 7:26 Dot strikethrough adds a line through the text. 7:28 Feel free to style the other text views however you . 7:32 If you're curious, try experimenting with different modifiers. 7:35 Just type a dot after text to see all the options available. 7:39 Playing around with code is one of the best ways to learn 7:44 and discover new possibilities in SwiftUI. 7:47 Next, let's add a button to our UI. 7:51 But first, I'll remove the spacer views 7:54 and the extra text so we can focus on the button. 7:56 In SwiftUI, a button is a special view 8:00 that listens for user interaction and runs an action when tapped. 8:03 A button consists of two main parts. 8:08 The label, what the button looks , text, an icon, or even both. 8:11 The action, what happens when the button is tapped. 8:16 Let's write our first button. 8:19 We'll start by writing the label of the button. 8:21 I'm going to have the button say, tap me. 8:24 Now let's define the action. 8:27 We do this by adding a set of curly braces right after the parentheses. 8:30 Inside these curly braces, we'll write 8:35 the code that should run when the button is tapped. 8:37 For now, let's have the button print, the button was tapped in the console 8:41 with print, the button was tapped. 8:44 Before we test it let open the console Click the Show 8:48 the Debug Area button at the bottom right of Xcode Make sure the Show 8:52 Console button is highlighted in green 8:57 Now press the button in the preview. 9:00 You should see the message appear in the console. 9:02 The button was tapped. 9:05 If the message didn't appear for you, make sure the view is in 9:06 live mode, then tap the button. 9:10 Awesome. 9:13 Now we have an interactive button that responds when tapped. 9:14 Before we learn how to use a button to change variables, let's first style 9:18 our button, because right now it really doesn't look a button. 9:22 The tapme text looks just the top of the screen text. 9:26 Let's make it look a real button by adding a background and adjusting the shape. 9:30 First let's use the .background modifier to give our button a green background. 9:35 Since modifiers are applied after the view, 9:40 we'll add the modifier after the closing curly bracket 9:43 we'll add it this dot background parentheses dot green 9:47 the dot background modifier allows us to set a color 9:53 or image behind the buttons text now our button has a green background 9:56 but there's a problem the text is hard to read against the green 10:01 background earlier in this video i showed you how to change text color 10:05 pause the video and try to change the text color to white yourself. 10:10 All right, to change the text color, 10:16 we use the dot foreground style modifier and set it to white. 10:18 Now the text is easier to see, but the button still doesn't look right. 10:24 The background is too close to the text. 10:28 It needs padding. Padding adds extra 10:31 space around the content so it doesn't feel too cramped. 10:34 Let's add the dot padding modifier. 10:37 With the dot padding modifier, if you leave the parentheses 10:40 blank, Swift will use its default padding amount. 10:44 But wait, something unexpected happened. 10:48 Instead of adding space inside the button, 10:51 it moved the entire button away from the top of the screen text. 10:54 Let's open the selectable preview 10:59 by clicking this button to investigate what happened. 11:01 Select the button in the code. 11:04 You should now see a green box around the button. 11:07 This green box represents the button's container, 11:11 and it grew larger because of the padding, but not in the way we expected. 11:14 If we delete the padding modifier, you'll notice 11:19 that the green box shrinks back to just around the text. 11:22 This happens because in SwiftUI, modifier order matters. 11:25 Right now, our code is telling Swift to first color the background green, 11:30 then change the text color to white, finally add padding, 11:35 but it's affecting the entire button, not just the text. 11:38 What we actually want is for Swift to first add 11:43 the padding around the text, then color the expanded area green. 11:45 To fix this, add the padding modifier before .background. 11:51 Now the button looks right. 11:56 The text has some breathing room, the background fills 11:58 the entire padded area, and the button stands out properly. 12:01 The last modifier I want to show you is .ClipShape. 12:05 This modifier allows you to cut your view into a specific shape, 12:09 a rectangle with rounded corners or even a perfect circle. 12:14 Since I want to shape the entire button, 12:18 I'll add .ClipShape at the end of the button's modifiers. 12:21 When we type a dot inside the parentheses, 12:26 Xcode shows us a list of shape options. 12:29 Let's start by selecting Dot Button Border. 12:32 This will round the corners of our button 12:36 while keeping its rectangular shape. 12:38 Great, now our button has smooth rounded corners. 12:41 Now let's turn this button into a circle. 12:45 To do that, I'll change Dot Button Border to Dot Circle. 12:48 Oh, now the button looks too small. 12:52 That's because the default padding isn't enough to give our circular button 12:55 the right shape. 12:59 Let's go back to our padding modifier and add 13:01 more padding to make the button larger. 13:03 When typing inside .padding, we see different options. 13:06 .top, .bottom, .horizontal, and .vertical 13:10 allows you to adjust padding in specific directions 13:14 Passing a single number applies padding equally to all sides 13:18 I set the padding to 40 so our button has enough space 13:23 40 is the amount of space measured in points to add as padding. 13:27 Feel free to play around with the padding value and see how different sizes look. 13:32 You can also move the dot clip shape modifier to a different position 13:37 in the modifier change to see how the order affects the final image. 13:40 This is a great way to understand how SwiftUI applies styling to views. 13:45 Now let's introduce one of 13:51 the most powerful features in SwiftUI, state. 13:53 Think of state as a special storage box that holds a variable or some information 13:57 about your app, a little memory that keeps track of changes. 14:02 The best part, Whenever state changes, SwiftUI automatically updates 14:06 the part of your screen that depends on it. 14:11 To see this in action, we'll create a counter 14:14 that updates every time the button is tapped. 14:17 We want our app to display counter zero. 14:21 Each time we tap the button, the counter should increase by one, 14:25 updating the text dynamically to counter 14:29 one, counter two, counter three, and so on. 14:31 In SwiftUI, a views layout is stored inside the body property. 14:35 But state is not a view. 14:41 It's a special kind of variable that tracks changes. 14:42 Because of this, we declare it outside the body property. 14:46 To create state, we use the 14:51 atStatePropertyWrapper, followed by declaring the variable. 14:53 Let's add it now. 14:57 I'll name our variable counter and set it at zero. 14:59 What this atState keyword does is tell SwiftUI, hey, 15:04 keep an eye on this variable. 15:09 Whenever it changes, update the UI automatically. 15:10 Now let's display the counter in our UI. 15:14 We want our text to say counter 15:17 and have the value update as the counter state changes. 15:19 We can do this by using string interpolation, 15:23 which we learned in the Swift Basics video. 15:26 If you remember how it works, pause the video 15:29 and try it yourself. 15:31 All right, let's modify our text view. 15:34 I'll replace the two with backslash parentheses 15:38 and the name of our state, which is counter. 15:42 Now our preview updates the show counter zero. 15:45 Right now, tapping the button doesn't increase 15:49 the counter, it just prints a message to the console. 15:51 Let's fix that. 15:55 Inside the button's action, the curly braces after the label, 15:56 we'll increase the counter by one by 16:01 typing counter equals counter plus one. 16:03 This line adds one to 16:07 counter, then updates the variable with the new value. 16:09 Now, every time the button is tapped, the counter will increase. 16:13 I'll also remove the print statement since we don't need it anymore. 16:18 To see this in action, 16:23 make sure you're in the live preview mode, then tap the button. 16:24 Each tap should now instantly update the counter in the UI. 16:28 No extra work needed. 16:33 This is the power of state. 16:35 It makes your UI dynamic and interactive 16:37 without requiring any manual updates. 16:40 Before we wrap up, I encourage you to take some time and experiment with the code. 16:44 Add some modifiers to style the app how you . 16:49 Change the text or button label. 16:52 Add spacers to adjust the layout. 16:55 The best way to learn is by playing around with the code and seeing what happens. 16:57 That wraps up our introduction to SwiftUI. 17:02 In this video, we covered how to start a SwiftUI 17:05 project and explore the default template. 17:08 How to preview and test our UI in real time. 17:11 How to use layout stacks VStack, HStack, and ZStack. 17:15 How to add and style text and buttons. 17:20 and how to use state to update the UI dynamically when a button is pressed. 17:22 Ready for a challenge? 17:28 With everything you've learned now, 17:29 you have the skills to build our dice rolling app. 17:31 If you're up for the challenge, 17:34 try building it yourself before watching the next video. 17:35 In the next video, I'll show you how I build my version of the dice roller app. 17:40

You need to sign up for Treehouse in order to set up Workspace

Sign up