Rounded Curve Edge for UIView

Question

I am trying to add rounded edges via this extension , however I am getting proper rounded UIView in iPhone X but when I try to run this same code in iPhone 6s , its like not getting curved , tried to increase the desiredCurve still not able to see the curve.

extension UIView {


    /* Usage Example
     * bgView.addBottomRoundedEdge(desiredCurve: 1.5)
     */
    func addBottomRoundedEdge(desiredCurve: CGFloat?) {
        let offset: CGFloat = self.frame.width / desiredCurve!
        let bounds: CGRect = self.bounds

        let rectBounds: CGRect = CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.size.width, height: bounds.size.height / 2)
        let rectPath: UIBezierPath = UIBezierPath(rect: rectBounds)
        let ovalBounds: CGRect = CGRect(x: bounds.origin.x - offset / 2, y: bounds.origin.y, width: bounds.size.width + offset, height: bounds.size.height)
        let ovalPath: UIBezierPath = UIBezierPath(ovalIn: ovalBounds)
    rectPath.append(ovalPath)

        // Create the shape layer and set its path
        let maskLayer: CAShapeLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = rectPath.cgPath

        // Set the newly created shape layer as the mask for the view's layer
        self.layer.mask = maskLayer
    }
}

why don't you use `roundedRect` rather than `rect` and `oval`. Doesn't seem to be doing what you intend — Stephen O'Connor, Sep 25 '18 at 13:08
try putting it in viewDidLayoutSubviews or layoutSubviews if using UIViewController and UIView sub-classes respectively. — ChanOnly123, Sep 25 '18 at 13:09
I can't imagine you will use this styling cue in more than one or two view controllers and to extend `UIView`, the building block of UIKit, the ultimate superclass, for this is IMO not a decision that I would make. This would be much better handled by using an asset, like a PNG. If you're doing an animation that adjusts the radius, like a pull-to-refresh, I still wouldn't extend `UIView` for that, I'd keep it as local as possible. — trndjc, Mar 28 '19 at 18:45

score 2 · Answer 1 · answered Sep 24 '19 at 14:32

Call the addBottomRoundedEdge extension method to add the bottom curve on a UIView

extension UIView {

    func dropShadow(scale: Bool = true) {
        layer.masksToBounds = true
        layer.shadowColor = UIColor.lightGray.cgColor
        layer.shadowOpacity = 0.8
        layer.shadowOffset = CGSize(width: 0, height: 5)
        layer.shadowRadius = 2
        layer.borderWidth = 1
        layer.shouldRasterize = true
        layer.rasterizationScale = scale ? UIScreen.main.scale : 1
        layer.borderColor =  UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 5).cgPath
   }

    func addBottomRoundedEdge() {
        let offset: CGFloat = (self.frame.width * 1.5)
        let bounds: CGRect = self.bounds

        let rectBounds: CGRect = CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.size.width , height: bounds.size.height / 2)
        let rectPath: UIBezierPath = UIBezierPath(rect: rectBounds)
        let ovalBounds: CGRect = CGRect(x: bounds.origin.x - offset / 2, y: bounds.origin.y, width: bounds.size.width + offset , height: bounds.size.height)
        let ovalPath: UIBezierPath = UIBezierPath(ovalIn: ovalBounds)
        rectPath.append(ovalPath)

        let maskLayer: CAShapeLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = rectPath.cgPath

        self.layer.mask = maskLayer
    }

}

score 0 · Answer 2 · edited Mar 28 '19 at 18:36

0

You can use Layer.corner.Radius on the orange view.

First put that view width bigger than the super view:

@IBOutlet weak var orangeView: UIView!

self.orangeView.frame. width = self.view.frame + 50
self.orangeView.layer.corner.Radius = self.orangeView.frame.height /2

edited Mar 28 '19 at 18:36

double-beep

5,031
17
33
41

answered Mar 28 '19 at 18:18

Roliandro Barbosa

1
1

Rounded Curve Edge for UIView

2 Answers2