6 June 2024 Leave a comment Tech-Help
Customizing the corner radius of a UIView can significantly enhance the visual appeal of your iOS applications. However, achieving this for specific corners, such as only the top-left and top-right, can sometimes be challenging. This guide will walk you through various methods to set the corner radius for only the top-left and top-right corners of a UIView.
Using UIBezierPath and CAShapeLayer
One of the most reliable ways to round specific corners of a UIView is by using a combination of UIBezierPath and CAShapeLayer. This method involves creating a custom path and applying it as a mask to the view’s layer. Below is a step-by-step example:
Objective-C
UIView *view = [[UIView alloc] initWithFrame:frame];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
cornerRadii:CGSizeMake(20.0, 20.0)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
view.layer.mask = maskLayer;
Swift
let path = UIBezierPath(roundedRect: view.bounds,
byRoundingCorners: [.topRight, .topLeft],
cornerRadii: CGSize(width: 20, height: 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
view.layer.mask = maskLayer
Using CACornerMask in iOS 11+
For iOS 11 and later, Apple introduced CACornerMask, which simplifies the process of rounding specific corners. This method is straightforward and requires less code compared to the UIBezierPath method.
Swift Example
let view = UIView()
view.clipsToBounds = true
view.layer.cornerRadius = 10
view.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner] // Top right and top left corners
Handling Auto Layout
If your UIView is using Auto Layout, you need to ensure the corner radius is applied after the view’s layout is finalized. This can be achieved by overriding the layoutSubviews method.
Swift Example
class CustomView: UIView {
override func layoutSubviews() {
super.layoutSubviews()
roundCorners(corners: [.topLeft, .topRight], radius: 10.0)
}
func roundCorners(corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
layer.mask = mask
}
}
Conclusion
Setting the corner radius for specific corners of a UIView can be done using different methods, each with its advantages. For older iOS versions, combining UIBezierPath and CAShapeLayer is a robust solution. For iOS 11 and later, CACornerMask offers a simpler and more efficient approach.
In addition to enhancing the UI, ensuring your app is thoroughly tested is crucial. This is where Repeato comes into play. Repeato is a no-code test automation tool for iOS and Android, making it easy to create, run, and maintain automated tests for your mobile apps. With its fast editing and execution capabilities based on computer vision and AI, Repeato allows developers to focus on building great products while enabling non-technical colleagues to handle test automation.
For more information on using Repeato, check out our Getting Started Guide or visit our Blog for the latest updates.
