CODEWITHSUNDEEP
iosswift
GDog
GDog

Reputation: 117

How to round a shadow in iOS?

I've created a rounded UIView, which should also have a shadow. So far, everything works, but on the corners, the shadow isn't rounded properly.

How to round the shadow corner?

Here's the code and a screenshot:

popupView.layer.cornerRadius = 15

popupView.layer.shadowColor = UIColor.black.cgColor
popupView.layer.shadowOffset = CGSize(width: 0, height: 0)
popupView.layer.shadowOpacity = 0.3
popupView.layer.shadowRadius = 3.0
popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath
popupView.layer.shouldRasterize = false

enter image description here

Upvotes: 0

Views: 382

Answers (3)

MadProgrammer
MadProgrammer

Reputation: 347184

So, I basically threw your code into Playground and played around with a bit, what I found was, I could basically remove view.layer.shadowPath and it would work...

Basically works

import UIKit

let view = UIView(frame: CGRect(x: 100, y: 100, width: 500, height: 500))
view.backgroundColor = UIColor.white
view.layer.cornerRadius = 15

view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0)
view.layer.shadowOpacity = 1.0
view.layer.shadowRadius = 6.0
//view.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath
view.layer.shouldRasterize = false


let outter = UIView(frame: CGRect(x: 0, y: 0, width: 700, height: 700))
outter.backgroundColor = UIColor.red
outter.addSubview(view)


outter

What I also found was:

  • view.layer.masksToBounds = true did not achieve the desired result
  • view.layer.shadowPath = UIBezierPath(roundedRect: view.bounds, cornerRadius: 15).cgPath also works, but adds in an additional point of failure, as you need to remember to set the cornerRadius property if you change it on the view, or add a variable to seed both, but since if you didn't set the shadowPath, it would generate the same result, it makes me wonder why you'd both using it.

Upvotes: 3

Kerberos
Kerberos

Reputation: 4166

Use 

popupView.layer.shadowPath = UIBezierPath(roundedRect: popupView.bounds, cornerRadius: 15).cgPath

instead of 

popupView.layer.shadowPath = UIBezierPath(rect: popupView.bounds).cgPath

and add a little bit of shadowOpacity like a 1.3 to see better the shadow.

Upvotes: 3

Onyekachi Ezeoke
Onyekachi Ezeoke

Reputation: 906

You need to set the views layers masksToBounds value to true

popupView.layer.masksToBounds = true

Upvotes: 0

Related Questions