Applying a shadow to a subview loaded from nib

Question

I am loading a custom view class from the nib at viewWillAppear. After loading the nib, I add it as a subview, then apply some constraints, then update the constraints. At that point I attempt to add a shadow to this view, but no shadow is displaying....

Just for some context, the ViewController has scrollview that contains a contentView. All of the view's content goes inside this contentView.

Here is my code:

ViewController

class MyViewController: UIViewController {

    @IBOutlet weak var contentView: UIView!

    var matches: [Match] = []
    var matchViews: [MatchDetailsView] = []

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        setMatches()
    }

    func setMatches() {

        // Match One
        let matchOneDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 0 ? matches[0] : nil, delegate: self, tag: 1)
        contentView.addSubview(matchOneDetailsView)
        matchOneDetailsView.translatesAutoresizingMaskIntoConstraints = false
        let matchOneLeadingConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
        let matchOneTrailingConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
        let matchOneTopConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 32)

        // Match Two
        let matchTwoDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 1 ? matches[1] : nil, delegate: self, tag: 2)
        contentView.addSubview(matchTwoDetailsView)
        matchTwoDetailsView.translatesAutoresizingMaskIntoConstraints = false
        let matchTwoLeadingConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
        let matchTwoTrailingConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
        let matchTwoTopConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .top, relatedBy: .equal, toItem: matchOneDetailsView, attribute: .bottom, multiplier: 1, constant: 32)

        // Match Three
        let matchThreeDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 2 ? matches[2] : nil, delegate: self, tag: 3)
        contentView.addSubview(matchThreeDetailsView)
        matchThreeDetailsView.translatesAutoresizingMaskIntoConstraints = false
        let matchThreeLeadingConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
        let matchThreeTrailingConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
        let matchThreeTopConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .top, relatedBy: .equal, toItem: matchTwoDetailsView, attribute: .bottom, multiplier: 1, constant: 32)
        let matchThreeBottomConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .bottom, relatedBy: .equal, toItem: contentView, attribute: .bottom, multiplier: 1, constant: -32)

        NSLayoutConstraint.activate([matchOneLeadingConstraint, matchOneTrailingConstraint, matchOneTopConstraint, matchTwoLeadingConstraint, matchTwoTrailingConstraint, matchTwoTopConstraint, matchThreeLeadingConstraint, matchThreeTrailingConstraint, matchThreeTopConstraint, matchThreeBottomConstraint])

        updateViewConstraints()

        matchViews.append(matchOneDetailsView)
        matchViews.append(matchTwoDetailsView)
        matchViews.append(matchThreeDetailsView)

        styleMatchViews()
    }


    func styleMatchViews() {
        for view in matchViews {
            view.addShadow(opacity: 0.25, yOffset: 0, xOffset: 0, radius: 5.0)
            view.roundCorners(withRadius: 5.0)
        }
    }
}

MatchDetailsView

class MatchDetailsView: UIView {

        class func instanceFromNib(match: Match?, delegate: MatchDetailsViewDelegate, tag: Int) -> MatchDetailsView {

        let view = UINib(nibName: "MatchDetailsView", bundle: nil).instantiate(withOwner: MatchDetailsView(), options: nil)[0] as! MatchDetailsView
        view.translatesAutoresizingMaskIntoConstraints = false
        view.updateMatchContent()
        return view
    }
}

UIViewExtension

extension UIView {

/**
 Add Shadow

 Puts a Drop Shadow in the UIView
 */
func addShadow(opacity: Float, yOffset: Int, xOffset: Int, radius: CGFloat) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = opacity
        self.layer.shadowOffset = CGSize(width: xOffset, height: yOffset)
        self.layer.shadowRadius = radius
        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
    }
}

If MatchDetailsView's nib file has 'clipsToBounds' set to false, why isn't my shadow showing up when the page is loaded? Am I missing a layout function even though they seem to be laid out correctly?

Answer 1

You are setting the .shadowPath to the bounds of the view... but the bounds at that point may not be (probably will not be) the bounds after auto-layout lays out the views.

For a "shadowed view" you are much better off setting the shadow inlayoutSubviews() inside the view itself.

You should also add and setup your subviews in viewDidLoad() viewWillAppear() may be called more than once (depending on your navigation), and you'll end up adding multiple copies of your subviews.

So...

Change your MatchDetailsView class like this:

class MatchDetailsView: UIView {

    var opacity: CGFloat = 0.0
    var xOffset: CGFloat = 0.0
    var yOffset: CGFloat = 0.0

    // for the shadowRadius
    var sRadius: CGFloat = 0.0

    // for the cornerRadius
    var cRadius: CGFloat = 0.0

    override func layoutSubviews() {

        self.layer.masksToBounds = false

        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = Float(opacity)
        self.layer.shadowOffset = CGSize(width: xOffset, height: yOffset)
        self.layer.shadowRadius = sRadius
        self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath

        self.layer.cornerRadius = cRadius
    }

    class func instanceFromNib(match: Match?, delegate: MatchDetailsViewDelegate, tag: Int) -> MatchDetailsView {

        let view = UINib(nibName: "MatchDetailsView", bundle: nil).instantiate(withOwner: MatchDetailsView(), options: nil)[0] as! MatchDetailsView
        view.translatesAutoresizingMaskIntoConstraints = false
        view.updateMatchContent()
        return view
    }

}

Then, in your view controller:

override func viewDidLoad() {
    super.viewDidLoad()
    setMatches()
}

func setMatches() {

    // Match One
    let matchOneDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 0 ? matches[0] : nil, delegate: self, tag: 1)
    contentView.addSubview(matchOneDetailsView)
    matchOneDetailsView.translatesAutoresizingMaskIntoConstraints = false
    let matchOneLeadingConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
    let matchOneTrailingConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
    let matchOneTopConstraint = NSLayoutConstraint(item: matchOneDetailsView, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 32)

    // Match Two
    let matchTwoDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 1 ? matches[1] : nil, delegate: self, tag: 2)
    contentView.addSubview(matchTwoDetailsView)
    matchTwoDetailsView.translatesAutoresizingMaskIntoConstraints = false
    let matchTwoLeadingConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
    let matchTwoTrailingConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
    let matchTwoTopConstraint = NSLayoutConstraint(item: matchTwoDetailsView, attribute: .top, relatedBy: .equal, toItem: matchOneDetailsView, attribute: .bottom, multiplier: 1, constant: 32)

    // Match Three
    let matchThreeDetailsView = MatchDetailsView.instanceFromNib(match: matches.count > 2 ? matches[2] : nil, delegate: self, tag: 3)
    contentView.addSubview(matchThreeDetailsView)
    matchThreeDetailsView.translatesAutoresizingMaskIntoConstraints = false
    let matchThreeLeadingConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 16)
    let matchThreeTrailingConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -16)
    let matchThreeTopConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .top, relatedBy: .equal, toItem: matchTwoDetailsView, attribute: .bottom, multiplier: 1, constant: 32)
    let matchThreeBottomConstraint = NSLayoutConstraint(item: matchThreeDetailsView, attribute: .bottom, relatedBy: .equal, toItem: contentView, attribute: .bottom, multiplier: 1, constant: -32)

    NSLayoutConstraint.activate([matchOneLeadingConstraint, matchOneTrailingConstraint, matchOneTopConstraint, matchTwoLeadingConstraint, matchTwoTrailingConstraint, matchTwoTopConstraint, matchThreeLeadingConstraint, matchThreeTrailingConstraint, matchThreeTopConstraint, matchThreeBottomConstraint])

    matchViews.append(matchOneDetailsView)
    matchViews.append(matchTwoDetailsView)
    matchViews.append(matchThreeDetailsView)

    styleMatchViews()
}


func styleMatchViews() {
    for view in matchViews {
        view.opacity = 0.25
        view.yOffset = 0.0
        view.xOffset = 0.0
        view.sRadius = 5.0
        view.cRadius = 5.0
    }
}