How to create different shapes in SwiftUI

Introduction

SwiftUI is a robust framework for creating user interfaces in Apple's ecosystem. One of its key features is the ability to construct custom shapes and designs using a combination of paths and modifiers. We can quickly create visually attractive and unique app interfaces by leveraging these tools.

In this article, we will learn the procedure of making shapes in SwiftUI, from explaining basic paths to applying modifiers that customize their appearance. We will also cover some key concepts and techniques involved in creating dynamic and complex shapes, as well as best practices for designing functional and visually appealing interfaces. Whether we are seasoned SwiftUI developers or just getting started with the framework, this article will provide valuable insights into the world of custom shape creation in SwiftUI.

If you want to explore what is new in Swift 5.8, this article is a great place to start- What's New In Swift 5.8.

Defining Paths

In SwiftUI, paths specify custom shapes by combining lines, curves, and other geometric shapes. Paths can be created using built-in drawing functions, such as move(to:), addLine(to:), addArc(center:radius:startAngle:endAngle:clockwise:), addCurve(to:control1:control2:), and addQuadCurve(to:control:).

Basic Shapes

SwiftUI provides several pre-defined basic shapes that can be used as a starting point for creating more complex shapes. These basic shapes include rectangles, circles, ellipses, and more. Here's an example of how to create a rectangle using SwiftUI:

Rectangle()
    .frame(width: 100, height: 50)
    .foregroundColor(.red)

In this example, we create a rectangle using the Rectangle() modifier. We also set its width and height using the .frame() modifier and filling colour using the .foregroundColor() modifier.

Custom Paths

In addition to basic shapes, SwiftUI also allows developers to create custom paths using lines and curves. Here's an example of how to create a custom path using SwiftUI:

Path { path in
    path.move(to: CGPoint(x: 20, y: 20))
    path.addLine(to: CGPoint(x: 50, y: 20))
    path.addLine(to: CGPoint(x: 50, y: 50))
    path.addLine(to: CGPoint(x: 20, y: 50))
    path.closeSubpath()
}
.stroke(Color.blue, lineWidth: 2)

In this example, we define a custom path using the Path modifier. We then use the move(to:) and addLine(to:) methods to create a series of lines representing the path's shape. Finally, we are closing the subpath using the closeSubpath() method and applying a stroke to the path using the .stroke() modifier.

Modifiers

Once a path has been defined, you can use modifiers to customize its appearance. SwiftUI provides a wide range of modifiers that can be used to modify the stroke colour, fill colour, opacity, and more. Let's look at some of the most commonly used modifiers in SwiftUI.

Stroke Modifier

The stroke modifier is used to add a border around a shape. Here's an example of how to apply a stroke to a custom path using SwiftUI:

Path { path in
    // ... define path ...
}
.stroke(Color.blue, lineWidth: 2)

In this example, we apply a blue stroke to a custom path using the .stroke() modifier. We are also setting the width of the stroke to 2 using the lineWidth: parameter.

Fill Modifier

The fill modifier adds a solid colour or gradient fill to a shape. Here's an example of how to apply a solid colour fill to a basic shape using SwiftUI:

Rectangle()
    .frame(width: 100, height: 50)
    .foregroundColor(.red)

In this example, we are setting the fill colour of a rectangle to red using the .foregroundColor() modifier.

Transform Modifier

The transform modifier is used to apply transformations such as rotation, scaling, and translation to a shape. Here's an example of how to rotate a custom path using SwiftUI:

Path { path in
    // ... define path ...
}
.stroke(Color.blue, lineWidth: 2)
.rotationEffect(.degrees(45))

In this example, we apply a 45-degree rotation to a custom path using the .rotationEffect() modifier.

Clip Shape Modifier

The clip shape modifier clips a shape to a specified region. This can be useful when you want to limit the visible area of a shape. Here's an example of how to apply a clip shape to a basic shape using SwiftUI:

Rectangle()
    .frame(width: 100, height: 50)
    .clipShape(Circle())

In this example, we clipped a rectangle to a circular shape using the .clipShape() modifier.

Path Animation

Animating paths can be a great way to make our app more visually pretty. Fortunately, SwiftUI gives us several animation modifiers that we can use to provide some enchantment for our custom paths. If we want to animate the rotation of a custom path, we can use the .rotationEffect() modifier in combination with an animation modifier. Here is a code that shows how to do this:

@State private var rotation = 0.0

Path { path in
    // ... define path ...
}
.stroke(Color.blue, lineWidth: 2)
.rotationEffect(.degrees(rotation))
.animation(.easeInOut(duration: 1))
.onAppear() {
    withAnimation {
        rotation = 360
    }
}

We use the @State property wrapper in this example to define a rotation variable. We are then animating the path rotation using the .rotationEffect() and .animation() modifiers. Finally, we initiate the animation using the .onAppear() modifier when the view arises.

Conclusion

In conclusion, SwiftUI delivers a powerful and intuitive way to make custom shapes and designs for our apps. By defining paths and applying modifiers, we can create visually attractive and unique interfaces that are functional and visually appealing. Whether we are seasoned SwiftUI developers or just getting started with the framework, this article should provide helpful insights into the world of custom shape creation in SwiftUI.