ConcentricRectangle
A shape whose corners you configure, individually or uniformly, to be squared, rounded, or concentric relative to a container shape’s corners.
Declaration
struct ConcentricRectangleOverview
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]
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 containerShape(_:). 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]
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 init() creates a shape where each corner is individually concentric with the container shape:
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 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 containerShape(_:) 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:
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:
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
Topics
Creating a default concentric rectangle
Creating a rectangle with the same corner style
Creating a rectangle with individual corner styles
init(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)rect(topLeadingCorner:topTrailingCorner:bottomLeadingCorner:bottomTrailingCorner:)
Creating a rectangle with uniform bottom corners
init(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)rect(uniformBottomCorners:topLeadingCorner:topTrailingCorner:)
Creating a rectangle with uniform leading corners
init(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)rect(uniformLeadingCorners:topTrailingCorner:bottomTrailingCorner:)
Creating a rectangle with uniform leading and trailing corners
init(uniformLeadingCorners:uniformTrailingCorners:)rect(uniformLeadingCorners:uniformTrailingCorners:)
Creating a rectangle with uniform top corners
init(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)rect(uniformTopCorners:bottomLeadingCorner:bottomTrailingCorner:)