ContainerView with shadow and rounded edges

Question

I would like to create custom ContainerView with shadowed and rounded edges. This ContainerView is in form of small rectangle placed on the top of another UIView. In this peculiar situation neither additional layers nor drawing shadow using CoreGraphics are helpful.

Answer 1

You're wrong that additional views/layers won't help.

You can place roundedContainer with rounded corners into another shadowedView with shadow added to it's layer. To avoid those white corners make sure you set background color to clear somewhere.

Example:

//superview for container with rounded corners
shadowedView.backgroundColor = UIColor.clear //this will fix your white corners issue
shadowedView.layer.shadowColor = UIColor.black.cgColor
shadowedView.layer.shadowOffset = .zero
shadowedView.layer.shadowOpacity = 0.3
shadowedView.layer.shadowRadius = 5.0

//add a container with rounded corners
let roundedView = UIView()
roundedView.frame = baseView.bounds
roundedView.layer.cornerRadius = 10
roundedView.layer.masksToBounds = true
shadowedView.addSubview(roundedView)

Answer 2

I found a proper solution. I dropped shadow to ContainerView which is a superclass for every UIView inside. Then, I rounded edges using UIViewController class for this small rectangle area.

class GraphViewController: UIViewController {
    @IBOutlet var graphView: GraphViewRenderer!

    override func viewDidLoad() {
        graphView.layer.cornerRadius = 20.0
        graphView.layer.masksToBounds = true

        super.viewDidLoad()
    }
}

class GraphContainerView: UIView {
    func applyPlainShadow() {
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize.zero
        layer.shadowRadius = 5.0
        layer.shadowOpacity = 0.7
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        applyPlainShadow()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        applyPlainShadow()
    }
}