Search code examples
swiftuiviewuibezierpath

How to crop the UIView as semi circle?


I want to crop UIView in semi circle shape

like this image

Thanks in advance.


Solution

  • A convenient way is just subclass a UIView, add a layer on it and make the view color transparent if it's not by default.

    import UIKit
    
    class SemiCirleView: UIView {
    
        var semiCirleLayer: CAShapeLayer!
    
        override func layoutSubviews() {
            super.layoutSubviews()
    
            if semiCirleLayer == nil {
                let arcCenter = CGPoint(x: bounds.size.width / 2, y: bounds.size.height / 2)
                let circleRadius = bounds.size.width / 2
                let circlePath = UIBezierPath(arcCenter: arcCenter, radius: circleRadius, startAngle: CGFloat.pi, endAngle: CGFloat.pi * 2, clockwise: true)
    
                semiCirleLayer = CAShapeLayer()
                semiCirleLayer.path = circlePath.cgPath
                semiCirleLayer.fillColor = UIColor.red.cgColor
                layer.addSublayer(semiCirleLayer)
    
                // Make the view color transparent
                backgroundColor = UIColor.clear
            }
        }    
    }