In SwiftUI, when you want to give a view rounded corners, you can use the built-in cornerRadius modifier with a specified radius like this:
Here's an example of how to use the cornerRadius modifier:
However, using the cornerRadius modifier will make all corners rounded, which may not always be the desired effect. Sometimes, you might want only specific corners to be rounded. To achieve this, you need to use other techniques like the clipShape or background modifiers. Both of these modifiers require a shape to determine the corners and radius.
#Creating a Shape to Control Corners and Radius
The first step is to create a custom shape that allows you to specify the radius and corners. Let's call this shape "RoundedShape":
The custom shape above can be called by setting the radius and corners properties. The radius determines how large the corner radius is, while corners specifies which corners have their radius defined. The corners value can be filled with topLeft, topRight, bottomLeft, bottomRight, and allCorners.
You can use this custom shape by specifying the radius and the corners :
#Controlling Round Corners with clipShape
By using the custom shape created above, you can control the radius and specific corners of a view by using the clipShape modifier:
This modifier is typically used to create a mask on a view, such as an image or a button:
#Controlling Round Corners with background
The background modifier is typically used to give a background to views that don't have one by default, like Text or Image:
Don't forget that when you use the background modifier with a custom shape, you may need to specify the fill color for the shape using the fill modifier.
That's all for this tips and tricks article. Give it a try, and we hope this brief guide proves helpful.