Built-in shapes in SwiftUI

Shapes in SwiftUI are a very innovative, exceptionally simple way to build a user interface component. In this article, we will take a look at simple shapes like rectangle, rounded rectangle, ellipse, circle and capsule. The common use of built-in shapes is clipping content, creating custom views, custom component etc. Using the built-in shapes, I will create a cell at the end of this article.

Rectangle

It creates a box with specified dimensions.

Rectangle()
  .fill(Color.red)
  .frame(width: 100, height: 100)

Rounded rectangle

It provides a rectangular shape with rounded corners. We can simply create a rounded rectangle from the rectangle. It is aligned inside the frame of the view containing it. Mostly used in cell and overlay.

RoundedRectangle(cornerRadius: 30)

Circle

Use Circle to circular shape. The circle’s radius equals half the length of the frame rectangle’s smallest edge. Mostly used for clipping the avatar.

Circle()
  .fill(Color.red)
  .frame(width: 70, height: 70)
  .overlay(Text("IA").font(.title))

Capsule

A capsule is an enhanced version of a rounded rectangle where the corner radius is half the length of the rectangle’s smallest edge. Normally used to create a badge or a button.

Capsule()
  .fill(Color.purple)
  .frame(height: 20)
  .overlay(Text("Beginner").font(.caption))

Ellipse

The Ellipse is a distorted version of a circle. An ellipse aligned inside the frame of the view containing it.

Ellipse()
  .fill(Color.gray)
  .frame(width: 30, height: 20)

Output

I have used Rectangle to create an orange background. Other built-in items are used to create red name avatar, purple badge and grey chip.

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.orange)
                .ignoresSafeArea()
            HStack {
                Circle()
                    .fill(Color.red)
                    .frame(width: 70, height: 70)
                    .overlay(Text("IA").font(.title))

                VStack(alignment: .leading) {
                    Text("Shapes in SwiftUI").font(.title3)
                    Text("Basic built in shapes").font(.caption2)

                    HStack {
                        Capsule()
                            .fill(Color.purple)
                            .frame(height: 20)
                            .overlay(Text("Beginner").font(.caption))
                        Ellipse()
                            .fill(Color.gray)
                            .frame(width: 30, height: 20)
                            .overlay(Text("1 m").font(.caption))
                    }
                    .frame(width: 120)
                }
            }

            .padding()
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 30))
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

✍️ Written by Ishtiak Ahmed

👉 Follow me on X ● LinkedIn

---

Get Ready to Shine: Mastering the iOS Interview

• Ace iOS Coding Interview
• Uplift iOS Interview - A Comprehensive Guide to iOS Interview

---

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.