Adding shadow to subview interfer with parent view (iOS swift)

Question

Any idea on how to achieve this shadow effect ? This screen is from the android app I am using swift (ios)

note that I have two views and when I add shadow to both they interfer and get darker

Answer 1

The trick to achieve this is to put another view in the middle that clips the content of your top view. Examine the following code:

let bottomShadowView = UIView(frame: CGRect(x: 100.0, y: 100.0, width: 200.0, height: 100.0))
bottomShadowView.backgroundColor = .white
bottomShadowView.layer.cornerRadius = 20.0
bottomShadowView.layer.shadowColor = UIColor.black.cgColor
bottomShadowView.layer.shadowOpacity = 0.2
bottomShadowView.layer.shadowRadius = 8
view.addSubview(bottomShadowView)

let bottomClipView = UIView(frame: bottomShadowView.bounds)
bottomClipView.layer.cornerRadius = bottomShadowView.layer.cornerRadius
bottomClipView.clipsToBounds = true
bottomShadowView.addSubview(bottomClipView)

let topShadowView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 200.0, height: 50.0))
topShadowView.backgroundColor = .white
topShadowView.layer.cornerRadius = 20.0
topShadowView.layer.shadowColor = UIColor.black.cgColor
topShadowView.layer.shadowOpacity = 0.2
topShadowView.layer.shadowRadius = 8
bottomClipView.addSubview(topShadowView)

Note that you can do most of this in interface builder but the code should give you a better understanding on what is going on.

The bottomClipView needs to be of the same size as the parent shadow view and have same features such as corner radius. Then simply apply clipsToBounds so that anything you place on this view will not draw anything out of its bounds and will not interfere with the shadow.