rounded edges with a shadow

Question

I'm trying to create this effect. See attached. Here's the code I have so far.

imageView.layoutIfNeeded()
imageView.layer.shadowColor = UIColor.gray.cgColor
imageView.layer.shadowOpacity = 0.2
imageView.layer.shadowOffset = CGSize.zero
imageView.layer.shadowRadius = 3
imageView.layer.cornerRadius = 5
imageView.layer.shadowOffset = CGSize(width: 2, height: 2)
imageView.layer.masksToBounds = false

It's not appearing like the picture. Here's how it appears:

Here's how it should appear:

I can't get the rounded corners to appear when I show the drop shadow. Also the drop shadow is not the same.

score 1 · Answer 1 · answered Sep 10 '20 at 15:29

1

Set imageView's superview clipsToBounds = true

https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

answered Sep 10 '20 at 15:29

cora

1,916
1
10
18

score 1 · Answer 2 · answered Sep 10 '20 at 15:36

1

Set the image views maskstobounds to true

answered Sep 10 '20 at 15:36

WY34

261
3
10

Fabio · Accepted Answer · 2020-09-10T16:31:49.583

Add dummy container view and assign it the shadow, after that put inside of it the image view like this: Declare your objects under your class controller:

let imgV = UIImageView()
let dummyView = UIView()

after that in viewdidLoad set property and constraints:

imgV.image = UIImage(named: "yourImage")
imgV.contentMode = .scaleToFill
imgV.layer.cornerRadius = 20
imgV.clipsToBounds  = true
imgV.translatesAutoresizingMaskIntoConstraints = false
    
dummyView.center = self.view.center
dummyView.backgroundColor = UIColor.yellow
dummyView.layer.shadowColor = UIColor.gray.cgColor
dummyView.layer.shadowOpacity = 1
dummyView.layer.shadowOffset = CGSize(width: 2, height: 2)
dummyView.layer.shadowRadius = 5
dummyView.layer.cornerRadius = 20
dummyView.translatesAutoresizingMaskIntoConstraints = false
    
view.addSubview(dummyView)
dummyView.heightAnchor.constraint(equalToConstant: 200).isActive = true
dummyView.widthAnchor.constraint(equalToConstant: 200).isActive = true
dummyView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
dummyView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
dummyView.addSubview(imgV)
imgV.topAnchor.constraint(equalTo: dummyView.topAnchor).isActive = true
imgV.bottomAnchor.constraint(equalTo: dummyView.bottomAnchor).isActive = true
imgV.leadingAnchor.constraint(equalTo: dummyView.leadingAnchor).isActive = true
imgV.trailingAnchor.constraint(equalTo: dummyView.trailingAnchor).isActive = true

this is the result

hey I have another question here https://stackoverflow.com/questions/63957059/how-to-move-uisearchbar-to-another-view. Can you help me? — Chris Hansen, Sep 18 '20 at 16:30

score 0 · Answer 4 · answered Sep 10 '20 at 15:41

Try this:

imageView.layoutIfNeeded()
imageView.layer.clipsToBounds = true
imageView.layer.shadowColor = UIColor.gray.cgColor
imageView.layer.shadowOpacity = 0.2
imageView.layer.shadowOffset = CGSize.zero
imageView.layer.shadowRadius = 10
imageView.layer.cornerRadius = 5
imageView.layer.shadowOffset = CGSize(width: 0, height: 2)
imageView.layer.masksToBounds = false

rounded edges with a shadow

4 Answers4