Skip to main content

How to display solid shapes

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to display solid shapes 관련

SwiftUI by Example

Back to Home

How to display solid shapes | SwiftUI by Example

How to display solid shapes

Updated for Xcode 15

SwiftUI has several built-in shapes such as rectangles, circles, and capsules, each of which can be created, color, and positioned as needed.

For example, if you wanted a 200x200 red rectangle, you would use this:

Rectangle()
    .fill(.red)
    .frame(width: 200, height: 200)

Download this as an Xcode projectopen in new window

A red square.
A red square.

Similarly, if you wanted a 100x100 blue circle you would use this:

Circle()
    .fill(.blue)
    .frame(width: 100, height: 100)

Download this as an Xcode projectopen in new window

A blue circle.
A blue circle.

There's a dedicated shape for rounded rectangles, allowing you to customize how much rounding should be applied, as well as having complete control over the type of rounding. For example, this creates a rounded rectangle with 25 points of rounding on each corner:

RoundedRectangle(cornerRadius: 25)
    .fill(.green)
    .frame(width: 150, height: 100)

Download this as an Xcode projectopen in new window

A green rounded rectangle.
A green rounded rectangle.

Finally, SwiftUI provides a Capsule() shape as a specialized form of rounded rectangles, where the shortest edge of the rectangle is always fully rounded. This is a popular style with buttons, because you get a lozenge-shaped button in just a couple of lines of code:

Capsule()
    .fill(.green)
    .frame(width: 150, height: 100)

Download this as an Xcode projectopen in new window

A green capsule or lozenge shape.
A green capsule or lozenge shape.
Similar solutions…
How to draw part of a solid shape using trim() | SwiftUI by Example

How to draw part of a solid shape using trim()
How to combine shapes to create new shapes | SwiftUI by Example

How to combine shapes to create new shapes
How to display a bottom sheet | SwiftUI by Example

How to display a bottom sheet
How to customize the display mode of NavigationSplitView | SwiftUI by Example

How to customize the display mode of NavigationSplitView
SwiftUI's built-in shapes | SwiftUI by Example

SwiftUI's built-in shapes

이찬희 (MarkiiimarK)
Never Stop Learning.