Search code examples
swiftuiviewcashapelayer

How to cut edges of a uiview in swift


enter image description here

I attached the View image. I want to achieve the small cut in bottom between the buy button and above flight information view.


Solution

  • I think the easiest way would be to create 2 circles as plain UIView instances and set their center as the left and right edges of the parent view respectively.

    Since you set clipsToBounds to true, they will be clipped and only half of them will be visible on the screen.

    public class TestView: UIView {
    
        private let leftCircle = UIView(frame: .zero)
        private let rightCircle = UIView(frame: .zero)
    
        public var circleY: CGFloat = 0
        public var circleRadius: CGFloat = 0
    
        public override init(frame: CGRect) {
            super.init(frame: frame)
            clipsToBounds = true
            addSubview(leftCircle)
            addSubview(rightCircle)
        }
    
        public override func layoutSubviews() {
            super.layoutSubviews()
    
            leftCircle.frame = CGRect(x: -circleRadius, y: circleY,
                                      width: circleRadius * 2 , height: circleRadius * 2)
            leftCircle.layer.masksToBounds = true
            leftCircle.layer.cornerRadius = circleRadius
    
            rightCircle.frame = CGRect(x: bounds.width - circleRadius, y: circleY,
                                       width: circleRadius * 2 , height: circleRadius * 2)
            rightCircle.layer.masksToBounds = true
            rightCircle.layer.cornerRadius = circleRadius
        }
    }
    

    I've created a sample project demonstrating that. Here is how it looks in my simulator (iPhone SE 11.2):

    enter image description here