Rounding corners has been so common in UI/UX design. It gives a design a much more interesting look and feel than a sharp one. If you are an Apple fanboy, you know that Apple has a round corner compared to Microsoft. That must be a reason.
SwiftUI has given us developers the power to implement rounded corners in the simplest way possible using
.roundCorner modifier. This simple API can be called on any View, and it gives a lot of control over how the corners look.Why not just start? Let’s get our hands dirty. Let’s round some corner!
1. Standard Round Corner
This API is probably the most popular one to round View’s corner. It takes the corner radius and applies it to all four corners. If you pass half the height of the UI, it will create a perfectly round shape at the corner.
Text("Mozzlog SwiftUI") .font(.system(size: 30)) .padding() .foregroundColor(.white) .background(Color.yellow) .frame(height: 60) .cornerRadius(15)
You can apply this to any View. Correct me if I am wrong! 😀
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌
Join the Waitlist Today! https://mozzlog.com/projects/network-spy
2. Using .clipShape modifier
Besides the standard way, it turns out that you can use a
Shape to round a corner in Swift. If you are going to create a capsule, this API is much more convenient than using a half-height corner radius. You don’t need to calculate manually to make a round shape.For example you can use these
Shape types:Apply RoundedRectangle Shape
This shape allows you to clip a view with a rectangle with 4 corners rounded.
Text("Mozzlog SwiftUI") .font(.system(size: 30)) .padding() .foregroundColor(.white) .background(Color.green) .frame(height: 60) .clipShape(RoundedRectangle(cornerRadius: 12))
You pass
.clipShape modifier with RoundedRectangle with corner radius. It will apply the shape to the view.Apply Capsule Shape
This shape allows you to clip a view with a
Capsule shape.Text("Mozzlog SwiftUI") .font(.system(size: 30)) .padding() .foregroundColor(.white) .background(Color.green) .frame(height: 60) .clipShape(Capsule())
You pass
.clipShape modifier with RoundedRectangle with corner radius. It will apply the shape to the view.If you are using the
.clipShape modifier. Why not read our article about clipping in Swift?Read Here:
3. Using .background modifier
Besides the standard way, it turns out that you can use a
Shape to round a corner in Swift. If you are going to create a capsule, this API is much more convenient than using a half-height corner radius. You don’t need to calculate manually to make a round shape.For example you can use these
Shape types:Apply RoundedRectangle Shape
This shape allows you to put a rectangle with round corners shape as background to the view.
Text("Mozzlog SwiftUI") .font(.system(size: 30)) .padding() .foregroundColor(.white) .background(Color.green) .frame(height: 60) .clipShape(RoundedRectangle(cornerRadius: 12))
You pass
.background modifier with RoundedRectangle with corner radius. It will apply the shape to the view.Apply Capsule Shape
This shape allows you to put a
Capsule shape as background to the view.Text("Mozzlog SwiftUI") .font(.system(size: 30)) .padding() .foregroundColor(.white) .background(Color.green) .frame(height: 60) .clipShape(Capsule())
You pass
.background modifier with RoundedRectangle with corner radius. It will apply the shape to the view.If you are using the
.background modifier. Why not read our article about clipping in Swift?Read Here:
Round Specific Corner
Have you ever wondered how to round a specific corner in SwiftUI? Rounding a specific corner can have some use cases, like a custom modal popup or button. Using custom code we can round specific corner like this:
// roundSpecific is a custom modifier // check the tutorial YourView().roundSpecific(30, [.topRight, .bottomLeft])
To implement rounding specific corner you can follow this tutorial
Conclusion
Rounding a corner in SwiftUI is easy. You have three APIs in your toolbelt to implement that. Why not play with the API and see what you can build with it?
Happy rounding some corners!
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌
Join the Waitlist Today! https://mozzlog.com/projects/network-spy