Getting Started with SwiftUI
Apple announced at WWDC 2019 that they will be providing us a brand-new user interface framework which is SwiftUI.
So what is SwiftUI?
SwiftUI is the new UI framework developed by Apple. You can build robust and stunning user interfaces with SwiftUI. Using declarative Swift code, SwiftUI offers us newest and easiest way to create user interfaces across all Apple platforms. It is easy to read and natural to write. In another words, no need for storyboards! That’s not all, you can preview the view side by side with the code. When one side is changed, the other side is updated. You can see the changes live.
Prerequisites
You should have macOS Catalina in order to see live preview SwiftUI views. In additional to this, you need to download Xcode 11 which includes Xcode previews and all APIs that you need to work with SwiftUI.
If you have completed the requirements, let’s start 🥳
In Xcode, create a new project and choose “Single View App” template for it. There is a point to consider in the next step. Name the project and then select SwiftUI, not Storyboard in the User Interface menu. As a last step, decide where the project will be created.
Before the coding, let’s examine the project navigator. When you open the project group, you will realize that there are no more storyboards or view controllers. If you take a brief look at project group, you will encounter 3 main Swift file which are AppDelegate, SceneDelegate and ContentView.
If you were interested in iOS development before, AppDelegate will sound familiar. AppDelegate and SceneDelegate class are created as default when you create an app using one Xcode’s templates.
Let’s touch briefly AppDelegate and SceneDelegate 🤓
AppDelegate is a heart of an application. Many logics and states are handled from it. It is the place where responding to application lifecycle events happen, such as launching, entering background, resuming or terminating the app. It has too many responsibilities. With iOS 13, the responsibilities of AppDelegate have been split between AppDelegate and SceneDelegate.
From iOS 13, AppDelegate is responsible for the application lifecycle and setup. SceneDelegate is responsible for scene lifecycle related events.
Let’s take a closer look at the ContentView 🤓
ContentView.swift file contains two struct: ContentView and ContentView_Previews. So what are these?
The ContentView struct conforms to the View protocol and it is responsible for content and layout of the screen. It also includes a new computed property which is called as “body”. That computed property returns something which conforms to the View protocol. SwiftUI creates a Text view component that initialized with a string which is “Hello, World!”.
The ContentView_Previews struct conforms to the PreviewProvider protocol and it is responsible for creating the preview in right pane. It creates a view that contains an instance of ContentView. Also you can customize the preview code for selecting different device, setting a custom frame. In addition to these, you can see your design in multiple devices at the same time.
Time for coding 😎
Let’s try to replace the text view that is “Hello, World!”, with an image which is shown Harry Potter ⚡. Drag your image in assets catalog and use it in Image type. You can customize the image as you want.
Alright, how can we add another type in the body? 🤔
When you trying to add another type in the body, a compile error can occur. One specific type which conforms to View protocol can return for the body. In such cases, we need to use stack.
If you want to return multiple things, you can use VStack for vertical, HStack for horizontal, ZStack for overlapping views.
In this article, I made a small introduction to the magical world of SwiftUI. Thank you for reading. Keep coding 🤓
