| < How to use images and other views as a backgrounds | How to fill and stroke shapes at the same time > |
How to display solid shapes
Updated for Xcode 14.2
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 project
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 project
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 project
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 project
SPONSORED From March 20th to 26th, you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
