Build a SwiftUI view in Swift Playgrounds

Hello and welcome to WWDC.

Hi I'm Matt and I'm the engineering manager of the Swift Playground's team. And today I'm going to be walking you through the process of using Swift Playground's to prototype a SwiftUI view many people knows with Playground's as a great way to learn to code using Swift. What you may not know is that it's a full featured environment for prototyping and coding in Swift far beyond the Learn to Code Series. Today we'll start out by creating a Playground that's compatible with Xcode and showing a SwiftUI view as the Playgrounds live for you. We'll take a tour of some of Swift Playgrounds unique editing features that can make prototyping faster and easier. And we'll look at how to move your code into multiple source files for building more complex Playgrounds. Lastly we'll take a look at a couple of tricks for building custom interactive previews with more than one SwiftUI view at once. So as so many engineers do at one point in their lives I'm working on building a task tracking app with tasks grouped into milestones for a particular project. One thing it's missing though is a nice summary of my progress through the project as a whole. I want to do a little something like this. Now clearly my hand-drawn art isn't quite ready for primetime. So we're going to build this view using SwiftUI and I'm going to do it in a Playground. Today I'm using an iPad with a Magic Keyboard attached but you can do this just as easily using the onscreen keyboard or using Swift Playground's on Mac. Since I know I'm gonna be bringing my work into Xcode when I'm done. I'm going to create a blank Xcode Playground rather than a blank Playground book. I can do that by tapping the see all button in the bottom right hand corner of the screen scrolling to the end of the starting points and then tapping get next to Xcode Playground which will create a new blank Xcode Playground in the top left corner of the my Playground screen. I'll give it a more interesting name before we start which I can do by tapping and holding or in my case two finger clicking on the Playground choosing rename and then entering a new name. We'll call it "my progress view". I'll tap done and then can open the Playground by tapping on it.

And we're ready to start coding. Since I'm building a SwiftUI view, the first thing I'm going to do is import SwiftUI.

I'm also going to import the Playground support framework which is what you use to customize the behavior of your Playground including showing live views. Next we'll create our view, which is going to be a struct called "ProgressView".

It will conform to the view protocol and it will have a property called body which returns an opaque view type. For now let's just say "hello world".

We're ready to show our view now. So I'll move down to the end of the document and I'll use the Playground page type to access the current page and then call the set the liveView method. Now you might have noticed that while I've been typing I've been getting completion suggestions at the bottom of the screen. I can either tap those with my finger or in this case I'll click using the trackpad and then I'll create a new ProgressView. To see what this looks like I'll tap to run my code button in the bottom right hand corner of the screen and voila. Our first SwiftUI view. Now this text is just a placeholder and I think we want to get started by building out the basic shape of our live view which if you remember from my crudely drawn mockup is kind of a circley type shape. So I'll delete the text that I've written here, and replace it with a circle view the arc in the mockup has a blue stroke on the outside of it. So I'll use the stroke modifier and I'll start typing line width and then I can tap the first suggestion at the bottom the screen to complete it. For now let's say 25. And since I'd like to indent my modifiers below the view that they belong to, I'm going to use the Command-right square bracket keyboard shortcut to indent the code. We'll also want to give this a foreground color and we'll set that color to blue. We can take a look at this by running it which this time I'm going to do using the Command-R keyboard shortcut and then we have it a blue circle. I'll admit it's a little bigger than I thought it was gonna be. And that stroke isn't quite as heavy as imagined either. But that's pretty easy to change. For the stroke with, I can either single tap or double click on 25 to select it and then we'll say maybe 40 instead.

And we can give the view a little padding by adding a padding modifier of maybe 150. If I hit Command-R again this time it looks a lot closer to what I had in my head. The next thing we're going to build is the text in the middle that tells us how far we are through our project as a percentage. So I'm going to add a text view to contain that text and then put it in a ZStack with my circle. I'll click above the circle type ZStack and create a pair of curly braces. But rather than move my code inside of those braces manually I can tap on the ending brace or in this case hover my pointer over it, press, and drag down to encompass the circle and it's modifiers. Finally we'll add a text view and for now we'll just hard code 25 percent. If I hit Command-R, looking good. We're really cooking now and making great progress through this view. So it's time to get. Oh well I guess our designer has actually already done all of the hard work for us. It looks like they started their Playground and put it in a shared I cloud folder. So I'll close this document by tapping the X button in the top left hand corner and I can access files outside the Playground's folder by tapping the locations button. And there it is. So I'll open that and then I'll tap the run my code button, and you can see, yeah, they got a lot further along than I did. In fact it looks so good, I'm not sure what they want me to change about it. It's pretty perfect. Oh ok. So it looks like they want us to try tweaking with the colors a little bit. So let's see if we can't make this look a little snazzier. It's really easy to play with colors in Swift Playgrounds because it has an awesome built in color picker. So you can see on this line here at the top of the screen we have the two gradient colors which are the SwiftUI colors blue and purple. The color type actually has another initializer that'll take a UIColor. So we'll use parentheses to open that. And then if you look at the bottom of the screen one of the options there is this gray square that represents a color literal. When I insert it, I get a color picker with tons of options provided by Swift Playground's. I think we'll pick this nice raspberry color for the first one and then for the second color we'll follow the same steps. I'll open the parens, insert a color literal. And this time pick a nice deep purple. And now if I hit Command-R you can see it looks a lot livelier than it did before. I think we're really about done with this now and ready to wrap it up. Unless of course our designer has other ideas, and they have a great suggestion as always. We should see what this looks like in Dark mode. Now one of the great things about working with SwiftUI in Swift Playground's is that this entire live view area is your canvas. So if I want to show my view more than once I can do that really easily. First though I want to give myself a little bit more breathing room in the main page. So we're going to move ProgressView to a file all of its own. I can add a new file by tapping on the file button in the top left hand corner or on a Mac by opening the sidebar and then tapping the new file button.

I'll give it the name ProgressView. Press return to accept it and then I can tap outside the popover to close it. And here we are a new empty file in it's own tab called ProgressView. I'll switch back over to the main page. And now what I want to do is move this entire ProgressView struct over into the file we just created. I can do that by single tapping or two finger clicking on the struct keyword and then choosing cut.

I can then switch back over to the progress tab with the command shift right brace keyboard shortcut, tap to enter code and then press Xmd-V to paste and then we have it. It's in a file all its own. Right away you can see it has some issues though. The biggest one is that I haven't yet imported SwiftUI into this file, so I'll do that.

I'm also going to want to mark my struct public since it's now in a separate module so I'll do that as well. Now that I've done that you can see there's one new issue for us to address. And if I tap on the issue dot it's reminding me that body needs to be made public as well. I'll tap fix to accept the fix it. And while I'm here I'm also going to mark the initializer as public because I'm about to use it on the main page.

I can use Command-Shift-left brace to switch back and if I hit Command-R you can see the live views unchanged. Now I want to look at two of these at the same time so I can compare what it looks like in light mode versus dark mode. So to do that I'm going to create a new view to act as my preview. We'll create a struct called Preview that conforms to the view protocol like before. And in this case the body is going to be a VStack. We'll add a little bit of spacing. And inside it will create two ProgressViews.

While we're at it I'm going to spruce it up a little bit so that it looks nice. I'm going to get rid of the padding we specified down below using option delete to delete by word and then I'm going to add some padding to the VStack.

I'm also gonna add a background modifier so it's easier to see the differences between the light and dark mode variants of our view.

Here I'll use a color and I'll pass in the UIKit secondarySystemBackground color which I'll let code completion fill in for me. Lastly we'll switch the progress view initializer at the bottom of the file to our new preview initializer, by single tapping or double clicking its name and typing preview.

I'll use Command-R to run and you can see that now I've got two different previews of our ProgressView. I did want one of them to be in dark mode though. So for the second one I can add an environment modifier and we'll set the color scheme to dark. Now when I hit Command-R you can see we have one in light mode one in dark mode looking great. The last thing I want to do is take a look at how this view feels in action with different progress values and with animation. Since the live view is fully interactive. I'm going to do that by adding a button to step through different values in 25 percent increments. I notice that the progress view accepted double as an argument to its initializer. So let's wire that up in our preview.

I'll create a new state variable called Progress and I'll set that to 25 percent. I can then pass that in to each of our ProgressViews. And when I hit Command-R the value updates. With that in place we can now add our button. I'll create a new method called increment which is just going to add 25 percent to our current progress value. And since I did promise animation we'll add a with animation block on top of it and like before drag the closing brace to encompass our incrementing statement.

Now I'll create a new button view inside our VStack and I'll set its action to the method that we just created. Lastly we'll give our button a label which is just going to be a text view with the message "increment progress".

If I hit Command-R now, you can see we have a new button. And if I tap it we have a working ProgressView. And that's building a SwiftUI view using Swift Playground's. In summary Swift Playground's has loads of features like color literals, brace dragging and a full suite of keyboard shortcuts that make it easier to edit complex code. If you're gonna be bringing your work back to Xcode, it usually makes sense to start with the Xcode Playground starting point. You can split your code across multiple source files to make it easier to understand. This is especially useful with SwiftUI views where you can put your view code in a module and use your main source file for previews. And remember you can customize your previews and add interactivity by creating your own views just for that purpose. Thanks for watching and enjoy the rest of the awesome content from WWDC.