I want to Create UIView Rounded Shape on Bottom inside ScrollView In Swift

Question

Not on Top Edges. I want to do Like this on Bottom Edges and inside ScrollView. How to do This

Answer 1

This should be close to what you want. Play with the bezier path points if it's not quite right:

@IBDesignable
class MyRoundBottomView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()

        let y = bounds.size.height - 80.0

        let p1 = CGPoint(x: 0.0, y: y)
        let p2 = CGPoint(x: bounds.size.width, y: y)

        let cp1 = CGPoint(x: p1.x, y: bounds.size.height)
        let cp2 = CGPoint(x: bounds.size.width, y: bounds.size.height)

        let myBez = UIBezierPath()

        myBez.move(to: CGPoint(x: 0.0, y: y))

        myBez.addCurve(to: p2, controlPoint1: cp1, controlPoint2: cp2)

        myBez.addLine(to: CGPoint(x: bounds.size.width, y: 0.0))
        myBez.addLine(to: CGPoint.zero)

        myBez.close()

        let l = CAShapeLayer()
        l.path = myBez.cgPath
        layer.mask = l

    }

}

It's marked as @IBDesignable so you can add a UIView (in Storyboard) and assign its Custom Class to MyRoundBottomView and you'll see it at design-time:

Answer 2

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

use it as

yourView.roundCorners(corners : [.bottomLeft, .bottomRight], radius : 20 )

Also, update your layouts in viewDidLayoutSubviews() otherwise you might face clipping in soem devices.

Answer 3

Configure maskedCorners and cornerRadius on view's layer , ie

customView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
customView.layer.cornerRadius = customView.bounds.width / 2.0

Answer 4

create the extension as follow

extension UIView {

    func round(corners: UIRectCorner, cornerRadius: Double) {

        let size = CGSize(width: cornerRadius, height: cornerRadius)
        let bezierPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size)
        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = self.bounds
        shapeLayer.path = bezierPath.cgPath
        self.layer.mask = shapeLayer
    }
}

you can use it like this

self.myView.round(corners: [.bottomLeft, .bottomRight], cornerRadius: 35)

I hope it will work for you ... :)