Everything You Need To Know About SwiftUI

Published in

Developer in Making

6 min readJun 6, 2019

One of the latest framework which Apple introduced in Swift and Xcode 11 is SwiftUI.

During Apple’s 2019 WWDC event HomeKit ,macOS, and tvOS weren’t the only platforms that Apple touched, It also announced SwiftUI, a framework that complements its open source compiled programming language for iOS, macOS, watchOS, tvOS, Linux, and other platforms alongside a reimagined development experience in Xcode 11.

What is SwiftUI?

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.
In practice, it reduces hundreds of lines of code to just a few, and it provides default support for common features like localization for right-to-left languages
The vision for Swift has always been about making development faster, easier and more interactive, and a modern UI framework is a huge part of that vision.
SwiftUI provides an extremely powerful and intuitive new user interface framework for building sophisticated app UIs.
Using simple, easy-to-understand declarative code, developers can create stunning, full-featured user interfaces complete with smooth animations.
SwiftUI saves developers time by providing a huge amount of automatic functionality including interface layout, Dark Mode, Accessibility, right-to-left language support and internationalization.
SwiftUI apps run natively and are lightning fast.
SwiftUI is the same API built into iOS, iPadOS, macOS, watchOS and tvOS, developers can more quickly and easily build rich, native apps across all Apple platforms
SwiftUI is truly native, so your apps directly access the proven technologies of each platform to beautifully implement everything users love about the Apple ecosystem.

Declarative syntax — Write simpler code that clearly states what your user interface should do.
Native on all Apple platforms — Your apps gain incredible native performance and take advantage of the proven technologies, controls and user experience
Design tools — Drag and drop to construct or edit your interface. Quickly make changes to visual UI elements with pop-up inspectors.
Live mode — You get a hot reload of design instantly whichever change you make in Xcode.

Supported Xcode and iOS Version for SwiftUI:

SDKs to work with SwiftUI Framework:

iOS 13.0+
macOS 10.15+
UIKit for Mac 13.0+
tvOS 13.0+
watchOS 6.0+

Xcode11 Beta download - https://developer.apple.com/download/

The latest OS releases for Mac, iPhone, iPad, iPod touch, Apple Watch, and Apple TV are available to all developers on the download page.
To download, you’ll need to sign in with your Apple ID associated with your Apple Developer Program membership.

Where to Learn SwiftUI:

There are many places to learn about SwiftUI, many developers ,bloggers and YouTubers have posted about SwiftUI and I think they are also know about this framework for past 2 days and they also learned about this by referring the apple documentation.
I personally think apple documentation is best place to understand the core and basic concept of SwiftUI and for detailed implementation you can learn by referring blog or YouTube.I’m not saying what everyone should, I’m just suggesting this might be best move for developers out there.

Creating Sample Project — SwiftUI:

Open Xcode 11 Beta → New -> SingleViewApp

Select Use SwiftUI checkBox to work with SwiftUI framework

Make sure SwiftUI checkbox is selected -> ProjectName(Eg: ListUsingSwiftUI) -> Next -> Create.

Sample Implementation:

In the Project navigator, click to select ContentView.swift

By default, SwiftUI view files declare two structures. The first structure conforms to the View protocol and describes the view’s content and layout. The second structure declares a preview for that view.

import SwiftUI
struct ContentView: View {
var body: some View {
Text(“Hello World”)
}
}
#if DEBUG
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif

In the canvas, click Resume to display the preview.
Note: If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

Inside the body property, change “Hello World” to “SwiftUI Implementation”.
As you change the code in a view’s bodyproperty, the preview updates to reflect your changes.
In the preview, Command-click the greeting to bring up the structured editing popover, and choose Inspect.
The popover shows different attributes that you can customize, depending on the type of view you inspect.

VStack and HStack View:
Below code shows text in Verticle Stack:

struct ContentView: View {
var body: some View {
VStack {
Text(“VStack1”)
Text(“VStack1”)
Text(“VStack1”)
}
}
}

Below code shows text in Horizontal Stack:

struct ContentView: View {
var body: some View {
HStack {
Text(“HStack 1”)
Text(“HStack 2”)
Text(“HStack 3”)
}
}
}

NavigationView and Lists:
Below code shows how to create a static list and how to use NavigationView.

struct ContentView: View {
var body: some View {
NavigationView {
List {
Text(“Row 1”)
Text(“Row 2”)
Text(“Row 3”)
}
}.navigationBarTitle(Text(“SwiftUI List”))
}
}

NavigationView is used in above sample code and by using navigationBarTitle, we have given a title name for navigation.
List is used and for each row static text is declared.

Create Sample List which shows mobileNumber,ProfileImage and Name:

ContentView.swift

import SwiftUI
struct Contact: Identifiable {
var id: Int
let username,mobileNumber ,imagename: String
}
struct ContentView: View {
let contacts: [Contact] = [
.init(id: 0, username: “Bill”, mobileNumber: “5347637558”, imagename: “Bill”),
.init(id: 1, username: “Steve”, mobileNumber: “4564637558”, imagename: “Steve”),
.init(id: 2, username: “Mark”, mobileNumber: “3556558”, imagename: “Mark”),
.init(id: 3, username: “Daniel”, mobileNumber: “5347645668”, imagename: “Daniel”),
.init(id: 4, username: “Arya”, mobileNumber: “534764656”, imagename: “Arya”)
]
var body: some View {
NavigationView {
List {
Text(“Contacts”).font(.largeTitle)
ForEach(contacts.identified(by: \.id)) { contact in
ContactRow(contact: contact) //Declared its properties in ContactRow File
}
}.navigationBarTitle(Text(“Contact List”))
}
}
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif

In above code we have create a array of Contact and for each row we have created a custom Row for Contact List’s rows
Contact structure has three initializers username,imagename and mobileNumber.
Each row contains userImage,username and mobileNumber

**ContactFile.Swift** File for Reference

Create a new file to implement ContactRow swift file to implement view for each row’s in List
File -> New -> File -> SwiftUI View -> Naming the File -> Create

ContactRow.swift

import SwiftUI
struct ContactRow: View {
let contact: Contact
var body: some View {
HStack {
Image(contact.imagename)
.resizable()
.clipShape(Circle())
.overlay(Circle().stroke(Color.black, lineWidth: 4))
.frame(width: 75, height: 75)

VStack (alignment: .leading) {
Text(contact.username).font(.title)
Text(contact.mobileNumber).font(.subheadline)
}.padding(.leading, 8)
}.padding(.init(top: 12, leading: 0, bottom: 12, trailing: 0))
}
}

HStack — Make inside items align horizontally
VStack — Make inside items align vertically
In above example VStack is used inside HStack, username and mobileNumber is aligned vertically in VStack where image and VStack is aligned horizontally in HStack.
Now each row contains username,image and mobilenumber
clipShape(Circle()) -> make the image shape as circle.

Wrapup:

Completed Project ScreenShot of iPhoneXR Simulator

Sample project implementation is fully completed and now build your project in simulator.

You will see a list of contact which you have mentioned in the coding.

For each contact,you will have imageName,username and mobilenumber.

Each image is rendered perfectly and image is in circle shape.

It also automatically adjusted for all other iPhone sizes.It will resize automatically to screen size of iPhone we use.

Thanks for Reading:)

If you like this content, press the clap button and share it.If you have any queries, feel free to comment below and let me know what you think of this article.

Let’s connect!

You can find me on Twitter | LinkedIn | GitHub