Defining the UI using SwiftUI

- [Instructor] Open up Xcode and create a new iOS project. Select Single View App, and enter WeatherApp as the Product Name. We'll use SwiftUI, but we don't need Core Data, nor Unit Tests, and let's proceed. SwiftUI is a new paradigm, and you will need some time to wrap your ahead around it even if you've implemented several iOS apps already. SwiftUI lets us lay out user-interfaces in a declarative way. Now, select the ContentView.swift file. There are two structures. Content view conforms to the view protocol. The body property defines the view's content. Rephrase. Content view conforms to the view protocol. The body property defines the view's content, layout, and behavior. The generated code has a text view that displays the text, "Hello World!" The content view preview structure conforms to the preview provider protocol. Xcode uses the types that adopt the preview provider protocol to generate previews. This feature only works with MacOS Catalina. We're going to define the views of our app within the content view structure. Now, let's revisit our goal. We build an app that retrieves current weather for a location. The user interface will be clean and simple. We'll use a TextField to enter the location's name. And we display the weather information in a Text view. Now, let's start by deleting the text view and create a TextField instead. The TextField takes two parameters, a title and a binding. The title is the placeholder string. Let's display, "Enter city". The second parameter is the binding. The binding acts as a reference to a mutable state. It needs to refer to a property marked explicitly with a state property wrapper. This annotation tells SwiftUI to keep the value of the property between UI updates. When the state value changes, the view gets refreshed. So, let's declare a state property. I make it private. It needs to be a variable, and let's call it input, of type string. And I initialize it to an empty string. This variable represents the text entered by the user in the TextField. Now, finish the TextField initialization. I need to use the dollar graphics to access a binding to a state variable. $input. Next, I display the input using a Text view, and I simply print the input. Now, let's embed the two views in a vertical stack. Vstack, and let's close it. If we ran the app, it should display what we type and mirror it in the TextView. As I type, it is mirrored in the TextView. All right, now let's improve the appearance of our UI. I'm going to add a divider between the TextField and the Text view. This will display a horizontal line as a visual separator between the UI elements. And I set the TextField's font to the title text style. .font, and it should be title. For Text, I use a smaller body font. Finally, I apply a default padding to the entire vertical stack. This prevents our views from touching the edges of the main view. Now, let's hit run, and see what we did here. Yeah, it looks much cleaner. All right, it looks much better now, but we're not done yet. We'll come back and add more logic once we implement the missing pieces.