Comprehensive Guide to Implementing Top Corners Rounding for UIView in iOS

Technical Background of UIView Corner Handling

In iOS application development, view corner rounding is a common UI enhancement requirement. While the standard cornerRadius property provides uniform rounding for all four corners, practical development often demands customized treatment for specific corners, particularly top corners which are widely used in card-based designs, navigation bars, and other interface elements.

Core Implementation Based on Masking

For iOS 10 and earlier versions, the combination of UIBezierPath and CAShapeLayer represents the classic approach for selective corner rounding. The fundamental principle involves creating specific bezier paths to define the visible area of the view.

Basic implementation code:

let path = UIBezierPath(roundedRect: view.bounds, 
                       byRoundingCorners: [.topLeft, .topRight], 
                       cornerRadii: CGSize(width: 20, height: 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
view.layer.mask = maskLayer

This code creates a rectangular path featuring rounded corners exclusively at the top left and top right positions, then applies this path to the view's mask layer to achieve selective corner rounding.

Special Considerations for Auto Layout Environments

In modern iOS development utilizing Auto Layout, view bounds may not be finalized during initialization, leading to inaccurate mask path calculations. The solution involves reapplying the mask after view layout completion.

Custom UIView subclass implementation:

class RoundedTopView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let path = UIBezierPath(roundedRect: bounds,
                               byRoundingCorners: [.topLeft, .topRight],
                               cornerRadii: CGSize(width: 20, height: 20))
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer
    }
}

This implementation ensures that corner effects properly adapt to current view boundaries following any layout changes.

Practical Swift Extension Encapsulation

To enhance code reusability and readability, create a UIView extension to encapsulate corner handling logic:

extension UIView {
    func roundCorners(corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: bounds,
                               byRoundingCorners: corners,
                               cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer
    }
}

Usage examples:

// Set top corners rounding
myView.roundCorners(corners: [.topLeft, .topRight], radius: 15)

// Set bottom corners rounding  
myView.roundCorners(corners: [.bottomLeft, .bottomRight], radius: 10)

iOS 11+ New API: maskedCorners

Starting from iOS 11, Apple introduced the more concise maskedCorners property specifically designed for selective corner handling:

// Set top corners rounding
view.layer.cornerRadius = 20
view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

// Corresponding relationships:
// .layerMinXMinYCorner → top-left corner
// .layerMaxXMinYCorner → top-right corner
// .layerMinXMaxYCorner → bottom-left corner
// .layerMaxXMaxYCorner → bottom-right corner

This approach offers greater simplicity but requires attention to iOS version compatibility. For projects needing older version support, the masking approach remains necessary.

Implementation in ViewController

When creating custom view subclasses is impractical or undesirable, corner handling can be managed within ViewController:

class MyViewController: UIViewController {
    let roundedView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        roundedView.roundCorners(corners: [.topLeft, .topRight], radius: 25)
    }
    
    private func setupUI() {
        roundedView.backgroundColor = .systemBlue
        view.addSubview(roundedView)
        // Configure Auto Layout constraints
    }
}

Performance Optimization and Best Practices

When employing the masking approach, consider the following for optimal performance:

• Avoid creating new CAShapeLayer instances in frequently called methods
• For statically sized views, set masks once during initialization
• For dynamically sized views, ensure mask updates occur in layoutSubviews
• Consider using the clipsToBounds property to control subview clipping behavior

Compatibility Considerations and Version Adaptation

In practical projects, select appropriate implementation approaches based on target iOS versions:

• iOS 11+: Prefer maskedCorners for cleaner code
• iOS 10 and earlier: Use masking approach
• Mixed projects: Implement conditional compilation through version checks

Version adaptation example:

if #available(iOS 11.0, *) {
    view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    view.layer.cornerRadius = 15
} else {
    view.roundCorners(corners: [.topLeft, .topRight], radius: 15)
}

Common Issues and Solutions

Typical problems encountered in practical development:

• View disappearance: Usually caused by incorrect mask path calculations or undetermined bounds
• Corners not applying: Verify correct timing for mask application and accurate path parameters
• Performance issues: Avoid frequent creation and destruction of mask layers in scrolling views

Through the methods detailed in this paper, developers can flexibly implement various corner effects to enhance application user interface quality.