Rounded corners and shadow for navigation bar

Question

I want to create something like this: Output

This is what I've tried so far:

class RoundedShadowCorners {
    func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
        topBar.isTranslucent = false
        topBar.tintColor = UIColor.orange

        topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        topBar.shadowImage = UIImage()
        topBar.backgroundColor = UIColor.white
        let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
        shadowView.backgroundColor = UIColor.white
        topBar.insertSubview(shadowView, at: 1)

        let shadowLayer = CAShapeLayer()
        shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath

        shadowLayer.fillColor = UIColor.white.cgColor

        shadowLayer.shadowColor = UIColor.darkGray.cgColor
        shadowLayer.shadowPath = shadowLayer.path
        shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
        shadowLayer.shadowOpacity = 0.8
        shadowLayer.shadowRadius = 2

        shadowView.layer.insertSublayer(shadowLayer, at: 0)

        topBar.prefersLargeTitles = true
        topBar.topItem?.title = "HJFSKDJKA"
    }
}

Problem with this is that this makes the title text be behind the actual NavigationBar and I can only make it come forward if I create a new UIView for the title and try positioning it on the screen, which makes it extremely difficult to be responsive.

offset is view.safeAreaInsets.top

I would prefer to do it without making a new UIView, because it makes things complicated, but I couldn't even begin to do it.

Answer 1

This is updated & tested code, there were certain lines which needs to be updated to overcome this behaviour,go through my in-line comments for details.

func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat){
    // Set the prefers title style first
    // since this is how navigation bar bounds gets calculated
    // 
    topBar.prefersLargeTitles = true
    topBar.topItem?.title = "HJFSKDJKA"

    topBar.isTranslucent = false
    topBar.tintColor = UIColor.orange

    topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    topBar.shadowImage = UIImage()
    topBar.backgroundColor = UIColor.white
    // Make your y position to the max of the uiNavigationBar
    // Height should the cornerRadius height, in your case lets say 20
    let shadowView = UIView(frame: CGRect(x: 0, y: topBar.bounds.maxY, width: (topBar.bounds.width), height: 20))
    // Make the backgroundColor of your wish, though I have made it .clear here
    // Since we're dealing it in the shadow layer
    shadowView.backgroundColor = .clear
    topBar.insertSubview(shadowView, at: 1)

    let shadowLayer = CAShapeLayer()
    // While creating UIBezierPath, bottomLeft & right will do the work for you in this case
    // I've removed the extra element from here.
    shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath

    shadowLayer.fillColor = UIColor.white.cgColor
    shadowLayer.shadowColor = UIColor.darkGray.cgColor
    shadowLayer.shadowPath = shadowLayer.path
    // This too you can set as per your desired result
    shadowLayer.shadowOffset = CGSize(width: 2.0, height: 4.0)
    shadowLayer.shadowOpacity = 0.8
    shadowLayer.shadowRadius = 2
    shadowView.layer.insertSublayer(shadowLayer, at: 0)

}

Here's a detailed article on this. Medium