How to add shadow to UIView that has round corners

Question

I know this questions has already been asked but I tried must of the answers and it doesn't seem to work for me.

So I want a UIView that has shadow around the sides and button of the view, not the top. How would I do this as I have rounded corners.

Here is what the UI look like:

Here is what I tried so far (Which doesn't seem to work):

featureOneView.layer.cornerRadius = 10.0
        featureOneView.clipsToBounds = true


        featureOneView.layer.shadowOffset = CGSize(width: 0, height: 3)
        featureOneView.layer.shadowOpacity = 0.6
        featureOneView.layer.shadowRadius = 3.0
        featureOneView.layer.shadowColor = UIColor.gray.cgColor

Removing the clip makes it work (tested). Also set the width to 3 if you want shadow on right. — claude31, Jan 20 '19 at 22:07

Torewin · Accepted Answer · 2019-01-20T22:18:21.973

1

I do believe the issue is with clipping the bounds. If you want to have the view clip the bounds, you should have two views - one for the shadow and one for the content.

Does this work for you?

// corner radius
featureOneView.layer.cornerRadius = 10

// shadow
featureOneView.layer.shadowColor = UIColor.black.cgColor
featureOneView.layer.shadowOffset = CGSize(width: 3, height: 3)
featureOneView.layer.shadowOpacity = 0.6
featureOneView.layer.shadowRadius = 3.0

A quick google search provided: https://stackoverflow.com/a/34984063/6885097

edited Jan 20 '19 at 22:18

answered Jan 20 '19 at 22:04

Torewin

887
8
22

What is blueView? Do I have to add as a subview? – BlueBear Jan 20 '19 at 22:08
Fixed, was a typo with the example of two views. – Torewin Jan 20 '19 at 22:18
Thank you for the help! – BlueBear Jan 20 '19 at 22:42

score 0 · Answer 2 · answered Jan 20 '19 at 22:06

I write an IBDesingable class that works perfectly

@IBDesignable
class RoundedButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 10.0 {
        didSet {
            self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable
    var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue
        }
    }

    @IBInspectable
    var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    @IBInspectable
    var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
        }
    }

    @IBInspectable
    var shadowColor: CGColor? {
        get {
            if let color = layer.shadowColor {
                return color
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.shadowColor = color
            } else {
                layer.shadowColor = nil
            }
        }
    }

    override func awakeFromNib() {
        self.setupView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
    }

    func setupView() {
        self.layer.cornerRadius = cornerRadius
        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.cgColor
        self.layer.shadowColor = shadowColor ?? UIColor.gray.cgColor
        self.layer.shadowOffset = shadowOffset
        self.layer.shadowRadius = shadowRadius
        self.layer.shadowOpacity = shadowOpacity
    }


}

you can add frame /corner radius / offset / color / opocity hope this help

How to add shadow to UIView that has round corners

2 Answers2