SwiftUI was firstly introduced in WWDC19 and the API has been rapidly improved in every single day. Since last year, Apple has made huge improvement in SwiftUI including layouts, animation and graphics.
There are so many sources that we can use to learn SwiftUI. But, which one will be the best to help us to quickly understand the whole concept. However, it depends and I won’t say that my approach will be the best for everyone. At least, after going through these steps, I can understand (not the whole) how to develop iOS apps in SwiftUI. The good thing when we understand the idea, we perhaps will be able to solve the future problem - know how to search and find references.
Best Learning Source
Here is the main source that I had gone through in my initial learning stage.
- Apple SwiftUI tutorial
The author always know what are better for their consumer
- Apple WWDC2020 Videos for SwiftUI introduction and the “What’s new”
- Understand Data flow (@State, @Binding and @EnvironmentObject) in these two videos (Data flow and Data essential)
- There are still a bunch of great SwiftUI guides provided by Apple in order for us to understand deeply
- Start looking for other simple tutorials and implementation
- Make a simple project with UI only
- Start integrating with navigation, static data and API request
Awesome! Now, let see how we could clone the Instagram home UI.
This article will be focusing on UI development and demonstrate how to quickly create layouts using SwiftUI. Please take note, that I am not using the actual fonts, icons and colours as currently implemented in the Instagram apps. All these cosmetic things you may easily update later. Also, no API data will be integrated into this project.
Before we start, let see how we can break down this page into smaller components (that’s the purpose of SwiftUI - clean and maintainable)
We have divided it into 3 main components. You may break more on the PostView if needed.
Create New Project
Open Xcode and create a new project. Make sure to select SwiftUI for “Interface” and “Life Cycle”
See the main
ContentView.swift file with the beautiful “Hello world” text.
The best practice is to rename the file using “refactor” (as shown in the image below). Change the name to
Image Placeholder and Demo Data
1. Add a placeholder image to “Assets”. I just added a plain grey image and name it as “placeholder”. We are going to use this image everywhere.
2. Create a
DemoStore.swift to supply a sample data to our Views later.
Three Main Components
Create a new file with type “SwiftUI View”, called
TitleView (as the first View at the top), and paste this code (explanation is inside the code). I believe that everyone is familiar with the Stack, button, and text. You may notice that I simply use the system icon to make it quick.
Create a new file with the type “SwiftUI View”, namely StoryView and add
StoryItemView as shown in below codes.
In this section, we are going to use scroll view with horizontal Stack. Create the StoryItem first as the individual View.
This view will be quite a long code, but as we can see all just about
VStack. Then, some resize and frame updates.
Great, all child views are done. Now, we can add up into our main
Simply add the
PostView in few lines. Later, you can change it to support dynamic data. Also. notice that I am using LazyVStack to keep the performance of the app as stated in the document that it will not create items until it needs to render them onscreen.
Cool, let’s try to run the code and check the result. The preview already display the expected UI. Yeaaay! we are done. Please clap to your self 🤗
You may check a full project in my GitHub here. Try to explore the SwiftUI and start your project today.
Thanks for reading and don’t forget to clap 👏 and share with your friends. Feedbacks are most welcome.
“Learn, that’s how we grow our coding skills”