SwiftUI Shapes

Creating exquisite, feature-rich user interfaces can be a mind-blowing test of rules and estimates. For some, it is a daunting task. Be that as it may, it doesn’t have to be that way.

Today we will investigate one of the most basic parts of the plan in SwiftUI: shapes. In terms of user interface, using manifolds is one of the best ways to convey data, achieve visual order, and improve the overall look of an application. What’s more, taking care of business has never been easier.

This article will explain different approaches to incorporating shapes into SwiftUI, incorporating working with frame tones, creating custom tones, and applying various styles to text and shapes.

Most underlying shapes in SwiftUI recognize their proposed size and fill the proposed size. The circle is the special case; will continually report a square size. We can see the detailed sizes in the following example by enabling the line, which displays the shape’s jump box.

Naturally, a shape is filled using the closest view style. We can use fill or add a stroke to the shape. A stroke follows the shape, drawing half the width of the line beyond the boundaries.

Unlike stacks, shapes take up the most extreme space. To vary them, use fill and foreground color instead of base. They are perfect for cutting substance and establishing a borderline style.

SwiftUI provides us with five frequently used built-in shapes: capsule, circle, ellipse, rectangle, rounded rectangle. Depending on the sizes you choose, these last three in particular act slightly differently, but we can show you all the alternatives with just one example:

truct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 200)

            RoundedRectangle(cornerRadius: 25)
                .fill(.green)
                .frame(width: 200, height: 200)

            UnevenRoundedRectangle(cornerRadii: .init(topLeading: 100, topTrailing: 100))
                .fill(.orange)
                .frame(width: 100, height: 100)

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

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

            Circle()
                .fill(.white)
                .frame(width: 100, height: 50)
        }
    }
}

That illustrates the six ways. However, all five shapes will be seen in the output due to variations in the drawing behavior of the shapes.

In XCode it would look like this:

Rectangle creates a box with precisely the measurements you provide. While most SwiftUI components, for example stacks, colors, and angles, start out as square shapes, they are not shapes.

RoundedRectangle does the same functions, but allows you to adjust how much to round the corners. You can choose between Apple’s significantly softer corners (.continuous) or traditional rounded corners (.circular) with its second option, style. From iOS 13 to iOS 16, the default was circular; However, starting with iOS 17, this changes to continuous. RoundedRectangle accompanies valuable style and cornerRadius properties. It’s perfect for creating buttons and producing the smooth corners of iOS.

An UnevenRoundedRectangle with only some rounded corners is called an uneven rounded rectangle. For each corner, the default value is 0, but you can override as many as you want to create a unique effect.

Depending on which is larger, the capsule creates a box with a completely rounded edge axis. Since our shape is 100 by 50, its top and bottom edges will be straight and its left and right edges will be rounded.

Ellipse creates an ellipse with the precise measurements you provide. The ellipse looks like a circle, although without the ideal 1:1 ratio. When the width and level are different, it will occupy the space and be deformed.

Capsule, like RoundedRectangle, the case is pill-shaped. Each end of the box is formed by a semicircle. You can use them for buttons.

Circle creates an ellipse with equal height and width, so if we give the space 100 by 50, we will actually receive 50 by 50. The circle allows you to draw an ideal round shape. The round shape will have a width equivalent to the smallest number between width and level.