SwiftUI announced in WWDC 2019. It’s an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. In previous blog I have shared some references from apple documents.
We will learn it by examples. First of all let’s start with simple UI.
Create New Project
Create new project by selecting the Use SwiftUI checkbox in project creation window.
Hello SwiftUI!
Project comes with default files AppDelegate, ContentView, SceneDelegate files.
|
1 2 3 4 5 |
struct ContentView : View { var body: some View { Text("Hello SwiftUI!") } } |
The output for above code would be like as follows:
How to create new view?
Go to File > New > File… and select SwiftUI View
|
1 2 3 4 5 6 7 8 |
struct ImageView : View { var body: some View { Image("ProPic") .clipShape(Circle()) .overlay(Circle().stroke(Color.blue, lineWidth: 2)) .shadow(color: Color.green, radius: 10) } } |
Above view will crate a circular image view with shadow.
Combine View
Now we will combine it to main content view.
|
1 2 3 4 5 6 7 8 9 10 |
struct ContentView : View { var body: some View { VStack() { Text("Hello Ashish!") .font(.title) .color(.red) ImageView() } } } |
Finally
Now we will add another horizontal stack in main content view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import SwiftUI struct ContentView : View { var body: some View { VStack() { Text("Hello Ashish!") .font(.title) .color(.red) .edgesIgnoringSafeArea(.top) ImageView() HStack() { Text("iOSDev") Spacer() Text("India") }.padding() Spacer() }.padding() } } |
Here, from top text view we will ignore the safe area to stick that view to the top of screen.
Conclusion
It’s amazing update by the apple. I’ll love to explore more.
Happy Coding 🙂