Round Specific Corners in SwiftUI
SwiftUI provides rounded corner out of box, there are several ways so let’s look at them first.
cornerRadius modifier
We can gain rounded corner for a view using cornerRadius modifier.
struct RoundSpecificCorners: View {
var body: some View {
Text("DevTechie")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.orange)
.cornerRadius(10)
}
}
clipShape Modifier
clipShape modifier with RoundedRectangle(cornerRadius:) shape style helps achieve the same results:
struct RoundSpecificCorners: View {
var body: some View {
Text("DevTechie")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.orange)
.clipShape(RoundedRectangle(cornerRadius: 10))
}
}
background Modifier
background modifier adds the same capability as shown below:
struct RoundSpecificCorners: View {
var body: some View {
Text("DevTechie")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.orange, in: RoundedRectangle(cornerRadius: 10))
}
}
But what if you want to make specific corners rounded? Well that’s easy as well(with the help of custom Shape) Let’s take a look.
We will first crate struct called RoundedCorner which will conform to Shape protocol. This will have two properties radius with default value of .infinity and corners of UIRectCorner type with default value of allCorners.
Only requirement for Shape protocol is to implement path function, so we will provide path’s definition and draw path using UIBezierPath which takes rounding corners as a parameter along with cornerRadii(CGSize)
struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
return Path(path.cgPath)
}
}Next, we will add extension to View and using clipShape modifier, we will clip our view:
extension View {
func roundedCorner(_ radius: CGFloat, corners: UIRectCorner) -> some View {
clipShape(RoundedCorner(radius: radius, corners: corners) )
}
}Now is the time to use this custom shape. Let’s have two rounded corners:
struct RoundSpecificCorners: View {
var body: some View {
Text("DevTechie")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.orange)
.roundedCorner(20, corners: [.bottomLeft, .topRight])
}
}
Or we can have 3 corners rounded:
struct RoundSpecificCorners: View {
var body: some View {
Text("DevTechie")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
.background(Color.orange)
.roundedCorner(20, corners: [.bottomLeft, .topRight, .bottomRight])
}
}
With that we have reached the end of this article. Thank you once again for reading. Subscribe our weekly newsletter at https://www.devtechie.com