Make App Pie

Training for iOS Developers and Artists

Make App Pie

Training for Developers and Artists

Make Swift Playgrounds Apps: Create New Files and Views

Transcript

We have the wireframe for the menu page of our takeout order app, but we have only one menu Item, and we probably want more than that. How can we get more items?  Let’s find out. 

Swift and SwiftUI are a modular language. You build small pieces that do one thing and then and fit them together. 

SwiftUI has Views, but you can make your own from other views. The HStack we have for the menu item can be turned into a view we can use several time to get more menu items. 

Let’s try this. New views need their own files, so first we create the file. 

Open the side tab if It isn’t open yet

 and tap the new file button.  

Select Swift File from the menu that appears. 

In the Code section of the sidebar, New File is highlighted so you can change the name to something else. When Making view we usually end with view. I’ll call this MenuItemView. 

Tap in the code and the code change to alphabetical order. 

In the code on Line 2 Type View and press return.  All the required code for a view appears.In later lessons We’’l explain what this is all about.  For now you’ll see that MyView is Highlighted in a rectangle. Change that to MenuItemView.

 You’ll also notice the preview now has two dots and some arrows. Tap the arrows ad you’ll see the Hello world from the body.  Delete that. And you get an error. 

Tap Back to ContentView. Highlight all of the HStack Code. 

Cut it. 

Now go to MenuItemView.  Paste it where Hello World was. 

Preview should change to the menu Item code. IF it doesn’t ,try going to ContentView and then back to MenuItemView or leaving the app and returning to it.

You’ve made your own view. Now to use it. 

Go back to Content View and under the divider, Type in 

MenuItemView()

Menu Item show up again. 

Add another MenuItemView Under that one.  And we have two. 

Making views like this is a big part of SwiftUI. You make smaller parts you assemble tog her in a view hierarchy that becomes your app. 

With some of the major parts assembled we can start to add a little content. In the next lesson, we’ll Add some images in place of the circle and rectangle. 

←
→

2 responses to “Make Swift Playgrounds Apps: Create New Files and Views”

  1. Peter Lewis Avatar
    Peter Lewis

    Creating new files: I typed “View” and pressed Return, but all I got was an error message. No code was generated. What am I missing?

    Reply
    1. Steven Lipton Avatar
      Steven Lipton

      Make sure you get a autocomplete pop-up that says View to appear and make sure it is selected. if you are using an older version of Swift playgrounds than 4, it may not show up in autocompletion. The alternative is to type the code in that you need. 

      struct MyView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

struct MyView_Previews: PreviewProvider {
    static var previews: some View {
        MyView()
    }
}
      Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.