Built-in shapes in SwiftUI

Uplift iOS Interview

"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.

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.

Built-in shapes in SwiftUI - Shapes
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

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


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.

If you know someone who would benefit from reading this article, please share it with them.