Traditionally, you will create a UIView and do some calculation to create a Circle. With SwiftUI, you can create a Circle easily without doing any calculation which will save you tons of time in developing your project.
You should be seeing the pattern here where SwiftUI does all the minor work for you.
A circle centered on the frame of the view containing it.
Apple Documentation
In this tutorial, you’ll learn what it takes to build a Circle in SwiftUI. You’ll learn:
- How to build a Circle from scratch.
Prerequisites
To follow along this tutorial, you’ll need some basic knowledge in:
- A basic familiarity with Swift.
- At least Xcode 11
Circle
To create a Circle, simply call the following code:
|
1 |
Circle() |
If the circle is too big, you can adjust the size accordingly.
|
1 |
.frame(width: 100, height: 100) |
Changing the color can done easily too.
|
1 |
.foregroundColor(.blue) |
Outline color can be done as well.
|
1 |
.stroke(Color.blue) |
Adding an image on the circle is also possible.
|
1 2 3 4 5 6 7 8 |
Button(action: {} ){ Image(systemName: "airplane") .foregroundColor(.white) .font(.largeTitle) .padding() } .background(Circle()) .foregroundColor(.blue) |
You can even stack the circle on each other with ZStack.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ZStack { Circle() .fill(Color.red) .padding(20) Circle() .fill(Color.white) .padding(40) Circle() .fill(Color.red) .padding(60) } .frame(width: 200, height: 200) .padding() |
Where to go From Here
If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:
Be First to Comment