How to set rounded corners and shadow for UITabBar?

Question

I want to set corner radius and shadow for UITabBar, but I have a problem. This is my code

tabBar.barTintColor = .white
tabBar.isTranslucent = false

tabBar.layer.shadowOffset = CGSize(width: 0, height: 5)
tabBar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
tabBar.layer.shadowOpacity = 1;
tabBar.layer.shadowRadius = 25;

tabBar.layer.masksToBounds = false
tabBar.isTranslucent = true
tabBar.barStyle = .blackOpaque
tabBar.layer.cornerRadius = 13
tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

If i change tabBar.layer.masksToBounds = false to = true -> corner radius will be displayed , but shadow will not be.

Answer 1

Swift 5

Try this. I achieved it by placing a custom view behind the tab bar. This works with Swift 5

import UIKit

class MainTabBarController:
    UITabBarController,
    UITabBarControllerDelegate {

    let customTabBarView: UIView = {

        let view = UIView(frame: .zero)

        view.backgroundColor = .white
        view.layer.cornerRadius = 20
        view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
        view.clipsToBounds = true

        view.layer.masksToBounds = false
        view.layer.shadowColor = UIColor.black.cgColor
        view.layer.shadowOffset = CGSize(width: 0, height: -8.0)
        view.layer.shadowOpacity = 0.12
        view.layer.shadowRadius = 10.0
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.delegate = self

        addCustomTabBarView()
        hideTabBarBorder()
        setupTabBar()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        customTabBarView.frame = tabBar.frame
    }

    override func viewDidAppear(_ animated: Bool) {
        var newSafeArea = UIEdgeInsets()

        newSafeArea.bottom += customTabBarView.bounds.size.height
        self.children.forEach({$0.additionalSafeAreaInsets = newSafeArea})
    }

    private func addCustomTabBarView() {
        customTabBarView.frame = tabBar.frame
        view.addSubview(customTabBarView)
        view.bringSubviewToFront(self.tabBar)
    }

    func hideTabBarBorder()  {
        let tabBar = self.tabBar
        tabBar.backgroundImage = UIImage.from(color: .clear)
        tabBar.shadowImage = UIImage()
        tabBar.clipsToBounds = true
    }

    func setupTabBar() {
        self.setViewControllers([tab1, tab2, tab3], animated: false)
        self.viewDidLayoutSubviews()
    }
}

extension UIImage {
    static func from(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor)
        context!.fill(rect)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}

Answer 2

I figured out a way to do this, by adding a separate shadow layer for the tab bar:

    tabBar.clipsToBounds = true
    tabBar.layer.cornerRadius = Siz_TabBar_CornerRadius

    // For some reason you have to use the vertically opposite corners for this to show up on iPad
    tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

    shadowLayer = CALayer()
    shadowLayer.frame = tabBar.frame
    shadowLayer.backgroundColor = UIColor.clear.cgColor
    shadowLayer.cornerRadius = yourTabBarCornerRadius
    shadowLayer.shadowColor = yourShadowColor.cgColor
    shadowLayer.shadowRadius = yourShadowRadius
    shadowLayer.shadowOpacity = 1.0
    shadowLayer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]

    // This is important so the shadow doesn't lag content
    // which is scrolling underneath it.  You should tell the tab
    // bar layer to rasterize as well, the rounded corners can cause
    // performance issues with animated content underneath them.
    shadowLayer.shouldRasterize = true
    shadowLayer.rasterizationScale = UIScreen.main.scale

    // The shadow path is needed because a shadow won't
    // display for a layer with a clear backgroundColor
    let shadowPath = UIBezierPath(roundedRect: shadowLayer.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: yourTabBarCornerRadius, height: yourTabBarCornerRadius))

    // The mask makes it so that the shadow doesn't draw on
    // top of the tab bar, filling in the whole layer
    let maskLayer = CAShapeLayer()
    let maskPath = CGMutablePath()

    // This path goes around the outside of the possible shadow radius, so that the
    // shadow is between this path and the tap bar
    maskPath.addRect(CGRect(x: -yourShadowRadius, y: -yourShadowRadius, width: shadowLayer.frame.width + yourShadowRadius, height: shadowLayer.frame.height + yourShadowRadius))

    // The shadow path (shape of the tab bar) is drawn on the inside
    maskPath.addPath(shadowPath.cgPath)
    maskLayer.path = maskPath

    // This makes it so that the only shadow layer content that will
    // be drawn is located in between the two above paths
    maskLayer.fillRule = .evenOdd
    shadowLayer.mask = maskLayer

    // View here is the tab bar controller's view
    view.layer.addSublayer(shadowLayer)