SwiftUI - Building First Application

---

---

SwiftUI is a framework developed by Apple for creating Apps for all its platforms including iOS, macOS, watchOS, tvOS, visionOS, etc. It uses declarative syntax for creating apps, which means the developer only needs to describe what the user interface should look like and how it behaves.

For example, we declare what a list should do rather than how to implement a list's action step-by-step. It also unifies the codebase, which means a single codebase can work across all Apple platforms.

SwiftUI works seamlessly with Xcode. Xcode is Apple's integrated development environment. It provides a robust platform for developing UIs. SwiftUI integrates Xcode to provide live previews of the UI code, drag-and-drop design tools, and debugging and testing tools. So before building a new application first of all we understand the basics of project structure−

• ProjectFile.swift: In the Project Navigator, select "ProjectName". It is an app that uses a SwiftUI app life cycle with a structure conforming to the App protocol. This structure returns one or more scenes, which provide content for display. Here the @main attribute represents the app's entry point.
• ContentView.swift: In the Project Navigator, select ContentView. It contains a view file and preview. Here the view files are declared as a structure that conforms to the view protocol. It also contains the view content and layout. Here the preview declaration is used to create the preview of that view.
• Canvas: It is used to display the preview of the code automatically. If canvas is not visible then go to Editor then Canvas to show it.
• Simulator: It is a tool that mimics a real device's hardware and software environment to run apps and see how they will behave without any physical device. It helps developer to test and debug their newly created app.

Creating First App Using SwiftUI

To create an app in Xcode follow the following steps −

Step 1 − Open Xcode.

Step 2 − Click on "Create New Project".

Step 3 − Now select iOS as a platform, then select an App template and click on the Next button.

Step 4 − Enter the name of your product, select "SwiftUI" as an interface and "Swift" as a language. Now click on the Next button.

Step 5 − Now select the location where you want to store your project and then click on the create button.

Step 6 − Now we are ready to create our app.

Step 7 − Replace the default content with the following content.

import SwiftUI
struct ContentView: View {
   @State private var mtext = "Hello, Tutorialspoint"
   var body: some View {
      VStack {
         ZStack{
            Rectangle().fill(Color.green).frame(height:100)
            Text(mtext).font(.largeTitle).padding()
         }
         Button(action: {
            mtext = "Hello, SwiftUI!"
         }) {
         Text("Tap Me")
		    .font(.title).padding()
            .background(Color.red)
            .foregroundColor(.white)
            .cornerRadius(15)
         }
                    
      }
   }
}
#Preview {
   ContentView()
}

Step 8 − The preview will display automatically on the canvas.

Build First App Using SwiftUI

When the code of the UI is completed we can run our app on the simulator to check how it will behave in the real device so for that follow the following steps−

Step 1 − Open Xcode and open the completed project.

Step 2 − Select the simulated device that you want to use such as iPhone 12, 13, 14, 15, etc.

Step 3 − Now click on the play button or press "cmd + R" or play button to run our app in the selected simulator.

Step 4 − Selected simulator will open. Now open the created app.