Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 815
Yasheed Mohammed Avatar asked Mar 08 '23 08:03

Yasheed Mohammed


1 Answers

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

like image 198
Ozgur Vatansever Avatar answered Mar 21 '23 07:03

Ozgur Vatansever