Search code examples
swiftshadowsketchapp

Swift shadow does not spread correctly


I'm been trying to create a shadow for my UIView. I looked around and found an extension for the CALayer class from this post. https://stackoverflow.com/a/48489506/9188318

So far its been working well for me until I try to put in a non 0 number for the spread.

With the spread being 0. This is the result

Using 0 spread

And here is the result using a spread of 1

Using 1 spread

And it gets even worse with a spread of 5

Using a spread of 5

The problem that I'm having is that it doesn't have rounded corners and I have no idea how to fix this. Heres my code for the UIView that uses this view. The extension that is used to make the shadow is in the post above.

UIView code

class FileCalculateOperatorSelectionButton : UIView {

    private var isActivated : Bool = false

    //Background colors
    private var unSelectedBackgroundColor : UIColor = UIColor(red: 178/255, green: 90/255, blue: 253/255, alpha: 1.0)
    private var selectedBackgroundColor : UIColor = UIColor.white
   
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

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

    private func commonInit() {
        self.layer.cornerRadius = self.frame.height/2
        self.backgroundColor = self.unSelectedBackgroundColor
    
        let shadowColor = UIColor(red: 0xC8, green: 0xC6, blue: 0xC6)

        //Change the spread argument here
        self.layer.applySketchShadow(color: .black, alpha: 0.5, x: 0, y: 0, blur: 5, spread: 0)
    }   
}

Solution

  • Change shadowPath in applySketchShadow function in CALayer extension like below;

    // shadowPath = UIBezierPath(rect: rect).cgPath
    shadowPath = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).cgPath 
    

    when spread: 1

    enter image description here