跳转至
Structure

Capsule

A pill-style shape.

Declaration

@frozen struct Capsule : Shape

Overview

A Capsule is a rectangular Shape that by default, aligns itself inside of the view containing it. It differs from RoundedRectangle in that its corner radius is half the length of the retangle's smallest edge. In effect, it creates a "pill" shape.

To define a Capsule with a specific color and frame, use the fill(style:) and frame(width:height:alignment:) modifiers:

struct ExampleView: View {
    var body: some View {
        Capsule()
            .fill(Color.orange)
            .frame(width: 250, height: 100)
    }
}
A view containing a capsule shape with orange fill and a frame of width 250 and height 100.

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

struct ExampleView: View {
    var body: some View {
        Capsule()
            .inset(by: 10)
            .stroke(Color.orange, lineWidth: 20)
            .frame(width: 250, height: 100)
    }
}
A view containing a capsule shape inset by 10 with an orange stroke of lineWidth 20 and a frame of width 250 and height 100.

Availability

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics


Initializer

init(style:) Creates an Ellipse that aligns itself inside of the view containing it by default.


Instance Method

inset(by:) Returns a Capsule insetted by the amount specified.

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


Instance Property

style The Capsule's rounded corner style, based on the value passed in its initializer.


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.