SwiftUI - Shapes

Shapes are used to create graphic elements for the user interface in SwiftUI. They are re-sizable, customizable, and reusable. They can create complex and user-friendly designs very efficiently. SwiftUI provides various predefined shapes such as rectangles, circles, etc., and allows us to create any custom shape using the Shape protocol easily.

We can customize any shape with the help of predefined modifiers such as fill(), background(), etc. In this chapter, we are going to learn how to create shapes and learn about the predefined method, and modifiers, provided by SwiftUI.

Creating a Custom Shape in SwiftUI

In SwiftUI, we can create shapes either using pre-defined methods or using Shape protocol. Here the Shape protocol is used to create custom shapes. So to create a custom shape we need to create a structure that conforms to the Shape protocol.

In this structure, we call the path(in:) method to define the path of the shape with the help of the Path struct. After that, we use this structure in the ContentView to customize the shape and get the live preview of the shape. We can also create shapes simply by using the Path() structure.

Example 1

The following SwiftUI program is used to create a custom square shape using Shape protocol.

import SwiftUI

struct mySquare: Shape {
   func path(in rect: CGRect) -> Path {
      var path = Path()

      path.move(to: CGPoint(x: rect.minX, y: rect.minY))
      path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
      path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
      path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
      path.closeSubpath()
      return path
   }
}

struct ContentView: View {
   var body: some View {
      mySquare()
         .fill(Color.green)
         .frame(width: 100, height: 100)
   }
}

#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program is used to create a custom square shape using Path() structure.

import SwiftUI

struct ContentView: View {
  var body: some View {
    Path { xPath in
      xPath.move(to: CGPoint(x: 50, y: 50))
      xPath.addLine(to: CGPoint(x: 110, y: 50))
      xPath.addLine(to: CGPoint(x: 110, y: 100))
      xPath.addLine(to: CGPoint(x: 50, y: 100))
      xPath.closeSubpath()
    }
    .stroke(Color.red, lineWidth: 5)
  }
}

#Preview {
  ContentView()
}

Output

Methods Used to Create Shapes in SwiftUI

SwiftUI supports various in-built methods that are used in developing various types of shapes which makes the UI more attractive. Some of the commonly used methods are as follows−

Modifiers Used to Customize Shapes in SwiftUI

SwiftUI supports various in-built modifiers to modify the shape according to the requirement of the user interface's design. We can use single or multiple modifiers on a shape. SwiftUI executes modifiers sequentially so apply them accordingly. Some of the commonly used modifiers are−

Built-in Shapes in SwiftUI

SwiftUI provides some in-built shapes that are used to desgine various compoenents. These shapes are easy to use and easy to customize such as styling, coloring, padding, etc., with the help of modifiers provided by SwiftUI. Follow are the in-buil shapes supported by SwiftUI−