CODEWITHSUNDEEP
iosobjective-cuiview
isuru
isuru

Reputation: 3565

Is it possible to create UIView with curved bottom edge.

I need to create UIView with curved bottom edge as follows. What would be the easiest way to do that?

enter image description here

Upvotes: 1

Views: 1318

Answers (2)

Predrag Samardzic
Predrag Samardzic

Reputation: 3019

Just set your view in IB to ShapedView class, or create it from code and play with control point when drawing path.

class ShapedView: UIView {
    let subLayer: CAShapeLayer = {
        let subLayer = CAShapeLayer()
        subLayer.fillColor = UIColor.red.cgColor
        return subLayer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        layer.addSublayer(subLayer)
        subLayer.frame = bounds
        setPath()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        subLayer.frame = bounds
        setPath()
    }

    private func setPath() {
        let path = UIBezierPath()
        path.move(to: CGPoint(x:0, y:bounds.height))
        path.addQuadCurve(to: CGPoint(x:bounds.width, y:bounds.height), controlPoint: CGPoint(x:bounds.width/2, y:4*bounds.height/5))
        path.addLine(to: CGPoint(x:bounds.width, y:0))
        path.addLine(to: CGPoint(x:0, y:0))
        subLayer.path = path.cgPath
    }
}

Upvotes: 3

Prashant Tukadiya
Prashant Tukadiya

Reputation: 16456

You can achieve that using CAShapeLayer

Do following

1) Create CAShapeLayer

2) Create UIBezierPath

3) Assign path to CAShapeLayer

4) Add that CAShapeLayer to mask of UIVIew

Hope it is helpful to you

Upvotes: 0

Related Questions