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)
}
}

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)
}
}

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)
}
}
}

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)
}
}

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.