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()
    }
}

---

Rev Up Your iOS Skills: Take a Dynamic Learning Journey

iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks

---

Get Ready to Shine: Mastering the iOS Interview

• Uplift iOS Interview - A Comprehensive Guide to iOS Interview
• Xcode Cheat Sheet for Swift
• Xcode Cheat Sheet for SwiftUI

---

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. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.

---

Connect with me on

Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.