CODEWITHSUNDEEP
iosswiftuikit
Morniak
Morniak

Reputation: 998

Bottom inner shadow with rounded corners

I'm trying to reproduce the following design, and I'm struggling with the bottom inner shadow.

I didn't found any solution that fulfill the requirements:

and ideally, a solution working with UIButton.

button

Upvotes: 0

Views: 103

Answers (2)

Naresh
Naresh

Reputation: 955

I have created a button extension for you to add the bottom shadow. Please check it out. You just need to call the "bottomShadow()" function with your button refrence

e.g. 

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    self.button?.bottomShadow()
}


/*Button Extension*/

enter image description here

 extension UIButton {
    func bottomShadow() {
        let shadowHeight: CGFloat = 5.0
        let shadowframe = CGRect.init(x: 0, y: self.bounds.height - shadowHeight, width: self.bounds.width, height: shadowHeight)
        let path = UIBezierPath(roundedRect: shadowframe, byRoundingCorners: [.topLeft , .topRight], cornerRadii: CGSize(width: self.layer.cornerRadius, height: self.layer.cornerRadius))
        let mask = CAShapeLayer()
        mask.fillColor = UIColor.lightGray.cgColor
        mask.path = path.cgPath
        self.layer.addSublayer(mask)
    }
}

Upvotes: 0

Adis
Adis

Reputation: 4552

While this is possible, it's a bit tricky and it will require you to draw shadows using CGPath: https://developer.apple.com/documentation/quartzcore/calayer/1410771-shadowpath

Probably a simpler way would be to use a resizable image: https://developer.apple.com/documentation/uikit/uiimage/1624102-resizableimage

You would make a smaller image like this mock below, and then simply resize it to increase the frame like so:

let resized = mockImage.resizableImage(withCapInsets: UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 56), resizingMode: .stretch)

enter image description here

Upvotes: 1

Related Questions