SwiftUI- Clone Instagram Home Page in Less Than Hour

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.

  1. Apple SwiftUI tutorial
    The author always know what are better for their consumer
  2. Apple WWDC2020 Videos for SwiftUI introduction and the “What’s new
  3. Understand Data flow (@State, @Binding and @EnvironmentObject) in these two videos (Data flow and Data essential)
  4. There are still a bunch of great SwiftUI guides provided by Apple in order for us to understand deeply
  5. Start looking for other simple tutorials and implementation
  6. Make a simple project with UI only
  7. Start integrating with navigation, static data and API request

Awesome! Now, let see how we could clone the Instagram home UI.

Project Scope

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.

Let’s Begin!

Before we start, let see how we can break down this page into smaller components (that’s the purpose of SwiftUI - clean and maintainable)

Instagram screenshot from iTunes

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 HomeView.

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

1. TitleView

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.

2. StoryView

Create a new file with the type “SwiftUI View”, namely StoryView and add StoryView and 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.

3. PostView

This view will be quite a long code, but as we can see all just about HStack and VStack. Then, some resize and frame updates.

Update HomeView

Great, all child views are done. Now, we can add up into our main HomeView.

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 🤗

What’s Next?

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”

iOS Developer focusing on Swift — “Learn, that’s how we grow our skill”.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store