SwiftUI - Using built-in Shapes

---

---

SwiftUI supports some in-built shapes that are used to develop a custom design and user interface component. These shapes are easy to use and can customized in various style, colors, fills, transformations, etc. They are commonly used to in clipping content, creating custom views, components, etc. SwiftUI supports the following in-built shapes −

• Circle
• Ellipse
• Rectangle
• Rounded Rectangle
• Capsule

Now lets discuss each of the shape in detail and then in the end of this chapter we will create a simple cell using these shapes.

Circle

We can create a circle using Circle(). It creates a circle in the center of the view frame. The radius of the circle is half the length of the frame. By default the circle is solid and in black color but we can modify it using various modifiers like fill, stroke, frame, etc.

Syntax

Following is the syntax−

Circle()

Example

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing circle
      Circle().fill(Color.brown).frame(width: 50, height: 50)      
   }
}
#Preview {
   ContentView()
}

Output

Ellipse

Ellipse is a two dimensional ovel shape or we can say it is look like a stretched circle. The width and height of the ellipse are different. In SwiftUI, we can create ellipse shape using Ellipse(). It creates an ellipse that is aligned inside the view frame. We can modify ellipse according to our need using modifiers.

Syntax

Following is the syntax−

Ellipse()

Example

import SwiftUI

struct ContentView: View {
   var body: some View {    
      // Drawing ellipse
      Ellipse().stroke(Color.blue, lineWidth: 8).frame(width: 50, height: 100)      
   }
}
#Preview {
   ContentView()
}

Output

Rectangle

Rectangle is most commonly used shape. So we can easily create a rectangle using Rectangle(). It aligned the rectangle inside the view frame. It support various property which allows it to have a stroke or can use as a mask.

Syntax

Following is the syntax−

Rectangle()

Example

import SwiftUI

struct ContentView: View {
   var body: some View {    
      // Drawing rectangle
      Rectangle().fill(Color.blue).frame(width: 100, height: 200)
   }
}
#Preview {
   ContentView()
}

Output

Rounded Rectangle

SwiftUI also provide built-in RoundedRectangle() to create a rounded rectangle shape. The rounded rectangle is a very useful shape that comes with rounded corners(cornerRadius) and style properties. It is used to create buttons.

Syntax

Following is the syntax−

RoundedRectangle(cornerRadius:CGSize, style: RoundedCornerStyle)

It takes the following parameters−

• cornerSize: It contains the radius of the corners.
• style: It represent the style of the rounded corners.

Example

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing rounded rectangle
      RoundedRectangle(cornerRadius: 20, style: .circular)
         .fill(Color.pink)
         .frame(width: 300, height: 200)
   }
}
#Preview {
   ContentView()
}

Output

Capsule

SwiftUI also provide a special shape named as a capsule(). It is a pill like shape or an elongated oval shape with rounded ends. It is commonly used to create buttons, badges and other UI components.

Syntax

Following is the syntax−

Capsule()

Example

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Drawing capsule
      Capsule().fill(Color.pink).frame(width: 300, height: 100)
   }
}
#Preview {
   ContentView()
}

Output

Now, we will create a layout to understand the actual use of these shapes. Here we will create a login page using shapes such as Rectangle() for background, RoundedRectangle() for box, Circle() for logo and Capsule() for button

Example

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle()
            .foregroundColor(.brown)
            .ignoresSafeArea()
         HStack {
            Circle()
               .fill(Color.mint)
               .frame(width: 70, height: 70)
               .overlay(Text("T").font( /*@START_MENU_TOKEN@*/.title /*@END_MENU_TOKEN@*/))
            VStack {
               Text("TutorialsPoint").font(.title)
               HStack {
                  Capsule()
                     .fill(Color.gray)
                     .frame(height: 30)
                     .overlay(Text("Login").font(.headline))

               }.frame(width: 120)
            }
         }.padding()
         .background(Color.white)
         .clipShape(RoundedRectangle(cornerRadius: 50))
      }

   }
}

#Preview {
   ContentView()
}

Output