SwiftUI: Take a look at all SwiftUI available shapes

SwiftUI has several shapes. It can be used to compose a graph or a nice UI without having to draw each one separately. It is also used a lot for the background. These views are also Push-out views. It means if you don’t set a frame to the shape, it stretches as far as it can go. Let’s take a look at each one!

What is Push-Out View?

SwiftUI has two types of view. Views that can take as much space as it needs are called Push-In Views. Text() is the example of Push-In View. Push-Out Views, however, without frame defined, take as much space as possible. All shapes in SwiftUI are Push-Out Views.

Shape’s most common usecases

• View Background with .clipShape
• View Background with .shape
• Graphs
• Custom View

Rectangle

Rectangle

Rectangle()
  .fill(Color.brown)
  .frame(width: 400, height: 400)

Circle

Circle

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

RoundedRectangle

Rounded Rectangle

RoundedRectangle(cornerRadius: 25.5, style: .continuous)
  .fill(Color.blue)
  .frame(width: .infinity, height: 100)

Capsule

Capsule

Capsule()
  .fill(Color.green)
  .frame(width: 100, height: 50)

Ellipse

Ellipse()
  .fill(Color.purple)
  .frame(width: 100, height: 50)

Path

Triangle drawn with path

Path { p in
  p.move(to: CGPoint(x: 100, y: 100))
  p.addLine(to: CGPoint(x: 100, y: 300))
  p.addLine(to: CGPoint(x: 300, y: 300))
  p.addLine(to: CGPoint(x: 100, y: 100))
}
.stroke()

When there’s no specific shape you need, then you can create your own shape with Path.

Conclusion

SwiftUI Shapes

• Rectangle()
• RoundedRectangle()
• Circle()
• Ellipse()
• Capsule()

When there’s no shape available for your needs, then create your own shape with Path.