How to build Instagram Story UI with SwiftUI

Introduction:

In this tutorial, we will explore how to create a stunning Instagram Story user interface using SwiftUI. Instagram Stories have become an integral part of the platform, allowing users to share photos and videos that disappear after 24 hours. We will break down the components step by step, from the circular profile picture with a colorful border to the username text, and guide you through the process of recreating this UI element.

Step 1: Import SwiftUI and Define the View

import SwiftUI

struct InstaStory: View {
    var body: some View {
        // child element
    }
}

In this step, we import the SwiftUI framework and define the InstaStory view, which will represent the Instagram Story UI element.

Step 2: Create a Vertical Stack

VStack(alignment: .center) {
    // child element
}

We create a VStack, which is a vertical stack that arranges its child views vertically. We set the alignment to .center, ensuring that the elements inside the stack are centered vertically.

Step 3: Create a ZStack for Circular Border and Profile Picture

ZStack {
    // child element
}

Within the VStack, we create a ZStack. A ZStack allows us to overlay multiple views on top of each other.

Step 4: Circular Border with Gradient

Circle()
    .fill(Color.clear)
    .frame(width: 92, height: 92)
    .overlay(
        RoundedRectangle(cornerRadius: 50)
            .stroke(
                LinearGradient(
                    gradient: Gradient(colors: [.purple, .pink, .yellow]), 
                    startPoint: .topTrailing, 
                    endPoint: .bottomLeading
                ),
                lineWidth: 4
            )
        )

Inside the ZStack, we create a circular border using the Circle shape. We customize it by setting its fill color to Color.clear to make it transparent. We then set its size with a width and height of 92 points. Inside the circle, we overlay a RoundedRectangle with a corner radius of 50 points, creating a circular border. We give it a stroke (border) with a gradient (linear gradient from purple to pink to yellow) and a line width of 4 points.

Step 5: Profile Picture

Image("abir") // Replace "abir" with your image name
     .resizable()
     .frame(width: 82, height: 82)
     .clipShape(Circle())
}

Still inside the ZStack, we place the user's profile picture using the Image view. Replace "abir" with the name of your image. We make the image resizable, set its frame size to 82x82 points, and clip it to a circular shape using the clipShape modifier.

Step 6: Username Text

Text("abir_raj_pal")
    .font(.subheadline)
}

Outside the ZStack, we add the username text using the Text view. We set the text to "abir_raj_pal" and apply a .subheadline font style to it.

Step 7: Preview

code#Preview {
    InstaStory()
}

Finally, we add a preview section to display the InstaStory view in the Xcode canvas.

That's it! You've now broken down the Instagram Story UI code into individual steps, making it easier to understand how each component contributes to the overall UI. You can customize and build upon this foundation to create your own Instagram-like stories in SwiftUI.

How to build Instagram Story UI using SwiftUI

Table of contents