SwiftUI Tutorial – Creating and Combining Views

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.

Swift UI Logo

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.

Swift UI Create Project

Hello SwiftUI!

Project comes with default files AppDelegate, ContentView, SceneDelegate files.

The output for above code would be like as follows:


How to create new view?

Go to File > New > File… and select SwiftUI View


Above view will crate a circular image view with shadow.

Combine View

Now we will combine it to main content view.

updated view


Now we will add another horizontal stack in main content view.

Here, from top text view we will ignore the safe area to stick that view to the top of screen.

Swift UI Conclusion


It’s amazing update by the apple. I’ll love to explore more.

Happy Coding 🙂