特殊投影：Swift 2

Question

In the image below, I have two types of drop shadows.

In swift, I've used this function:

func applyShadow(view: UIView){
    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowOffset = CGSizeMake(0, 1)
    view.layer.shadowOpacity = 0.5
    view.layer.shadowRadius = 10.0
    view.clipsToBounds = false
    view.layer.masksToBounds = false
}

to apply the shadow to the image in the image view.

How can I modify the applyShadow function to make the iOS drop-shadow match the effect of the web one?

I'm using .png files, but if I had to convert the file format, It wouldn't be too much more work.

Answer 1

Here just think of view.layer.shadowOffset as the fourth quadrant of 2 dimensional coordinate system. So if the value for that is CGSizeMake(0, 0) , the shadow will spread in all the sides equally.

Now view.layer.shadowRadius is just the radius or reach of the shadow. By changing its value, the shadow length will change.

view.layer.shadowOpacity will change the darkness of the shadow. Its value change from 0 to 1.

Suppose we set the shadowOffset as CGSizeMake(5, 0) and shadowRadius as something less than 5 , then the shadow will move to the right side of the object and there will not be any shadows in other sides. Suppose the value is CGSizeMake(0, 5) , the shadow will be at the bottom of the object, ie it will move 5 points down and there will not be any shadows in other sides. So in that way if value is CGSizeMake(5, 5) , the shadow will move bottom-left direction 5 points.

I think you got a better understanding of this. So when comes back to your problem, I think this will work:

func applyShadow(view: UIView){
    view.layer.shadowColor = UIColor.blackColor().CGColor
    view.layer.shadowOffset = CGSizeMake(8, 12)
    view.layer.shadowOpacity = 0.4
    view.layer.shadowRadius = 5.0
}

Answer 2

Something like this should work:

func applyShadow(view: UIView){
    let offset = CGSize(width: 150, height: 150)
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: view.frame.size.width, y: 0))
    path.addLine(to: CGPoint(x: view.frame.size.width + offset.width, y: view.frame.size.height))
    path.addLine(to: CGPoint(x: view.frame.size.width + offset.width, y: view.frame.size.height + offset.height))
    path.addLine(to: CGPoint(x: view.frame.size.width, y: view.frame.size.height + offset.height))
    path.addLine(to: CGPoint(x: 0, y: view.frame.size.height))
    path.addLine(to: CGPoint(x: 0, y: 0))

    view.layer.shadowColor = UIColor.black.cgColor
    view.layer.shadowPath = path.cgPath
    view.layer.shadowOpacity = 0.2
    view.layer.shadowRadius = 2.0
    view.layer.masksToBounds = false
}

You might need to fiddle around with offset , shadowOpacity , and shadowRadius a little bit more to get as close as possible, but these values are pretty close when I debug locally.

Also, you don't need to do view.clipsToBounds and view.layer.masksToBounds at the same time. Those are pretty much interchangeable and if you set one, the other should be updated automatically.