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