Structure¶

RoundedRectangle¶

A rectangle shape with rounded corners.¶

Declaration¶

@frozen struct RoundedRectangle : Shape

Overview¶

A RoundedRectangle is a rectangular Shape with rounded corners that by default, aligns itself inside of the view containing it.

It must be created with a specific corner radius or size. The example below creates a RoundedRectangle with a corner radius of 20, and uses the fill(_:style:) and frame(width:height:alignment:) modifiers to set the color to blue and the frame to 250 by 150.

struct ExampleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color.blue)
            .frame(width: 250, height: 150)
    }
}

A view containing a RoundedRectangle with a corner radius of 20, blue fill, and a frame of width 250 and height 150.

The example below uses the same modifiers, but defines a corner size rather than a corner radius.

struct ExampleView: View {
    var body: some View {
        RoundedRectangle(cornerSize: CGSize(width: 30, height: 10))
            .fill(Color.blue)
            .frame(width: 250, height: 150)
    }
}

A view containing a RoundedRectangle with a corner size of width 30 and height 10, blue fill, and a frame of width 250 and height 150.

The RoundedRectangle initializer includes an optional parameter for specifying the style, a RoundedCornerStyle that can either be circular or continuous. These styles have subtle but noticeable differences:

struct ExampleView: View {
    var body: some View {
        VStack(spacing: 20) {
            RoundedRectangle(cornerRadius: 50, style: .circular)
                .frame(width: 250, height: 150)

            RoundedRectangle(cornerRadius: 50, style: .continuous)
                .frame(width: 250, height: 150)
        }
    }
}

A view containing two RoundedRectangles, each with a corner radius of 50 and a frame of width 250 and height 150, but with differing corner radius styles: circular and continuous, respectively.

To add a border, use the Shape/stroke(:lineWidth:) modifier, and use the inset(by:) modifier to inset the RoundedRectangle by half of the border width to keep the RoundedRectangle at its original size:

struct ExampleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 40)
            .inset(by: 10)
            .stroke(Color.blue, lineWidth: 20)
            .frame(width: 250, height: 150)
    }
}

A view containing a RoundedRectangle inset by 10 with a corner radius of 40, a blue stroke with line width 20, and a frame of width 250 and height 150.

Availability¶

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics¶

Initializer¶

init(cornerRadius:style:) Creates a RoundedRectangle with specified rounded corner radius.

init(cornerSize:style:) Creates a RoundedRectangle with specified rounded corner width and height.

Instance Property¶

animatableData The data to animate.

cornerSize The rounded corner size of the rounded rectangle shape.

style The rounded corner style of your rounded rectangle's corners.

Type Alias¶

AnimatableData The type defining the data to animate.

Body The type of view representing the body of this view.

InsetShape The type of the inset shape.

Instance Method¶

inset(by:) Returns a RoundedRectangle insetted by the amount specified. For example, insetting by 10 points returns a Capsule that fills its container, with 10 points inset on all four side.

path(in:) Used to describe a RoundedRectangle as a path in a CGRect.