A shape whose corners you configure, individually or uniformly, to be
squared, rounded, or concentric relative to a container shape's corners.
Use `ConcentricRectangle` to create a rectangular shape that
fits inside a container's shape, similar to the way that a sheet's corners
in iOS match the curvature of the screen. System-provided elements like
sheets and popovers do this automatically. You can use this effect for
your custom views to match a device's curved edges, or for your custom
views near the edges inside another view with concentric corners. For
example, the Notes app format sheet has rounded bottom corners that are
concentric relative to the device's corners, and rounded top corners that
have a fixed radius.
@Image(source: "concentricrectangle-6", alt: "A screenshot of the Format sheet over the Notes app. The Format sheet has top corners that have rounded corners with a fixed radius, and rounded bottom corners that are concentric relative to the device's corners.", deviceFrame: "iPhone16-bottom-half")
A rounded corner of a rectangle is _concentric_ relative to the container
shape's adjacent corner when the corner's radius shares a common
center with the containing shape's rounded corner radius. A containing
shape could be a view that extends to the device's rounded corners, or
any view that sets ``View/containerShape(_:)-(RoundedRectangularShape)``.
`ConcentricRectangle` automatically calculates each corner's radius
relative to the container shape, so your view adapts correctly across
devices and sizes without hard-coded values.
@Image(source: "concentricrectangle-3", alt: "A diagram of the bottom half of an iPhone with a gray background view. Over the gray background is a green view with uniformly rounded top corners, and uniformly rounded bottom corners that are concentric with the device's edge. Callouts identify the gray background as the container shape, the green view as a concentric rectangle, and a dot that's the common center of the radii of the bottom leading corner curves.")
### Create a concentric rectangle
Create a `ConcentricRectangle` by specifying corner styles that reflect
the types of corners you want, with an initializer or static ``Shape``
convenience method that specifies how to shape each corner. By default,
`ConcentricRectangle`'s ``ConcentricRectangle/init()`` creates a shape
where each corner is individually concentric with the container shape:
@TabNavigator {
@Tab("Code") {
```swift
ConcentricRectangle()
.fill(Color.green)
.padding(8.0)
.ignoresSafeArea()
.frame(height: 240.0)
```
}
@Tab("Preview") {
@Image(source: "concentricrectangle-4", alt: "A screenshot of a green view with squared top corners, and rounded bottom corners that are concentric with the device's edge.", deviceFrame: "iPhone16-bottom-half")
}
}
When your `ConcentricRectangle`'s corners are far away from the
containing shape's corners, such as the top corners in this example, the
corner radius the system calculates may be zero. When that happens, the
corner is square. It's also possible that your app is running on a device
whose corners are square. To ensure that your view always has rounded
corners that are concentric relative to the container shape when they can
be, use ``Edge/Corner/Style/concentric(minimum:)`` to specify a rounded
corner with a minimum radius.
SwiftUI provides container shapes by default in system-provided views.
To allow `ConcentricRectangle` to resolve corner radii based on
concentricity in your custom view, use
``View/containerShape(_:)-(RoundedRectangularShape)`` to
specify a container shape that implements ``RoundedRectangularShape``,
such as ``Circle``, ``Rectangle``, ``RoundedRectangle``, or ``Capsule``.
When the container shape does not conform to ``RoundedRectangularShape``,
`ConcentricRectangle` provides an inset version of the container shape
like ``ContainerRelativeShape``.
### Customize corners
Select corner styles from the ``Edge/Corner/Style/`` enumeration to form
the following types of corners:
- A rounded corner with a radius that's concentric relative to the containing view
- A rounded corner with a radius that's concentric relative to the containing view,
constrained with a minimum radius
- A rounded corner with a fixed radius
- A squared corner
The following example shows one concentric rectangle with each type of corner:
@TabNavigator {
@Tab("Code") {
```swift
ConcentricRectangle(
topLeadingCorner: .concentric(minimum: 12.0),
topTrailingCorner: .fixed(24.0),
bottomLeadingCorner: .concentric,
bottomTrailingCorner: .fixed(0.0)
)
.fill(Color.green)
.padding(24.0)
.ignoresSafeArea()
.frame(height: 240.0)
```
}
@Tab("Preview") {
@Image(source: "concentricrectangle-5", alt: "A screenshot of a green view with a concentric top leading corner with a minimum radius, a fixed radius top trailing corner, a concentric bottom leading corner, and a square bottom trailing corner.", deviceFrame: "iPhone16-bottom-half")
}
}
### Create uniform corners
To create a shape similar to the Notes app format sheet, create a
`ConcentricRectangle` that specifies uniform top corners with a fixed
radius and concentric uniform bottom corners. The functions with uniform
corner styles calculate each uniform corner's radius first, then use the
largest radius for each uniform corner:
@TabNavigator {
@Tab("Code") {
```swift
ConcentricRectangle(
uniformTopCorners: .fixed(24.0),
uniformBottomCorners: .concentric
)
.fill(Color.green)
.padding(8.0)
.ignoresSafeArea()
.frame(height: 240.0)
```
}
@Tab("Preview") {
@Image(source: "concentricrectangle-2", alt: "A screenshot of a green view with uniformly rounded top corners, and uniformly rounded bottom corners that are concentric with the device's edge.", deviceFrame: "iPhone16-bottom-half")
}
}
Use initializers with uniform parameters to fit your concentric rectangle
inside the containing view, depending on which corners need concentricity:
- All corners
- Leading corners only
- Trailing corners only
- Leading and trailing corners separately
- Top corners only
- Bottom corners only
- Top and bottom corners separately
Members (12)
get · iOS 26.0+
animatableData
TypeScript
get animatableData(): ConcentricRectangle_AnimatableData
Swift declaration
var animatableData: ConcentricRectangle.AnimatableData { get set }
The data to animate.
SwiftUI reads this property to capture the current vector
representation of the animatable state, and writes it back
on each animation frame with an interpolated value. The
default implementation returns ``EmptyAnimatableData``,
meaning nothing is animated.
Use the ``Animatable()`` macro to synthesize this
property automatically. Implement it by hand only when
you need custom interpolation logic such as clamping,
normalization, or mapping to a derived value.
set · iOS 26.0+
animatableData
TypeScript
set animatableData(value: ConcentricRectangle_AnimatableData)
Swift declaration
var animatableData: ConcentricRectangle.AnimatableData { get set }
The data to animate.
SwiftUI reads this property to capture the current vector
representation of the animatable state, and writes it back
on each animation frame with an interpolated value. The
default implementation returns ``EmptyAnimatableData``,
meaning nothing is animated.
Use the ``Animatable()`` macro to synthesize this
property automatically. Implement it by hand only when
you need custom interpolation logic such as clamping,
normalization, or mapping to a derived value.
Creates a rectangle with individual corner styles on all four corners.
- Parameters:
- topLeadingCorner: The top leading corner style.
- topTrailingCorner: The top trailing corner style.
- bottomLeadingCorner: The bottom leading corner style.
- bottomTrailingCorner: The bottom trailing corner style.
Creates a rectangle with a corner style set on the top two corners
uniformly, and another style set on the bottom two corners uniformly.
For the two top corners and two bottom corners, the system calculates
the radius for each corner first. Then, it selects the largest top
radius and applies it to each top corner, and it selects the largest
bottom radius and applies it to each bottom corner to achieve the
symmetric look.
- Parameters:
- uniformTopCorners: The corner style to apply to the top two
corners uniformly.
- uniformBottomCorners: The corner style to apply to the bottom
two corners uniformly.
Creates a rectangle with a corner style set on the top two corners
uniformly, and two other styles for the bottom two corners respectively.
For the two top corners, the system calculates the radius for each
corner first. Then, it selects the largest radius and applies it to
each top corner to achieve the symmetric look.
- Parameters:
- uniformTopCorners: The corner style to apply to the top two
corners uniformly.
- bottomLeadingCorner: The corner style for the bottom leading corner.
- bottomTrailingCorner: The corner style for the bottom trailing
corner.
Creates a rectangle with a corner style set on the bottom two corners
uniformly, and two other styles for the top two corners respectively.
For the two bottom corners, the system calculates the radius for each
corner first. Then, it selects the largest radius and applies it to
each bottom corner to achieve the symmetric look.
- Parameters:
- uniformBottomCorners: The corner style to apply to the bottom
two corners uniformly.
- topLeadingCorner: The corner style for the top leading corner.
- topTrailingCorner: The corner style for the top trailing corner.
Creates a rectangle with a corner style set on the leading two corners
uniformly, and another style set on the trailing two corners uniformly.
For the two leading corners and two trailing corners, the system
calculates the radius for each corner first. Then, it selects the
largest leading radius and applies it to each leading corner, and
it selects the largest trailing radius and applies it to each trailing
corner to achieve the symmetric look.
- Parameters:
- uniformLeadingCorners: The corner style to apply to the leading
two corners uniformly.
- uniformTrailingCorners: The corner style to apply to the
trailing two corners uniformly.
Creates a rectangle with a corner style set on the leading two corners
uniformly, and two other styles for the trailing two corners
respectively.
For the two leading corners, the system calculates the radius for each
corner first. Then, it selects the largest radius and applies it to
each leading corner to achieve the symmetric look.
- Parameters:
- uniformLeadingCorners: The corner style to apply to the leading
two corners uniformly.
- topTrailingCorner: The corner style for the top trailing corner.
- bottomTrailingCorner: The corner style for the bottom trailing
corner.
Creates a rectangle with a corner style set on the trailing two corners
uniformly, and two other styles for the leading two corners respectively.
For the two trailing corners, the system calculates the radius for
each corner first. Then, it selects the largest radius and applies it
to each trailing corner to achieve the symmetric look.
- Parameters:
- uniformTrailingCorners: The corner style to apply to the
trailing two corners uniformly.
- topLeadingCorner: The corner style for the top leading corner.
- bottomLeadingCorner: The corner style for the bottom leading corner.
Describes this shape as a path within a rectangular frame of reference.
- Parameter rect: The frame of reference for describing this shape.
- Returns: A path that describes this shape.
Creates a rectangle with the same corner style set on four corners.
When you provide `false` for `isUniform`, the system may calculate
a different radius for each corner. This can happen when the rectangle
is not centered within the container shape, or the container shape's
corners have different radii. When you provide `true` for `isUniform`,
the system calculates the radius for each corner first. Then, it
selects the largest radius and applies it to each corner to achieve
the symmetric look.
- Parameters:
- corners: The corner style for all four corners.
- isUniform: A Boolean value that indicates whether to apply the
corner style on each corner individually or uniformly.
init · iOS 26.0+
init
TypeScript
static init(): ConcentricRectangle
Swift declaration
init()
Creates a rectangle using the concentric corner style on each corner
individually.
The system may calculate a different radius for each corner. This can
happen when the rectangle is not centered within the container shape,
or the container shape’s corners have different radii.
