UITabBar Border and Shadow issue

Question

I need to put shadow effect in UITabBar , which I'm getting by following code:

tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 4.0
tabBar.layer.shadowColor = UIColor.gray.cgColor
tabBar.layer.shadowOpacity = 0.6

And it is working perfectly.

But, I need to remove the border on top of the UITabBar , And by searching I got self.tabBar.clipsToBounds = true , by putting that code, It removes the Border but it also remove the shadow effect.

I need like following image:

No Border but shadow effect.

Any Help will be appreciated.

Answer 1

You need to add a UIView in your TabBar and make .shadowImage and .backgroundImage equal to UIImage()

Code

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    if let tabBarController = self.window?.rootViewController as? UITabBarController {

        let tabGradientView = UIView(frame: tabBarController.tabBar.bounds)
        tabGradientView.backgroundColor = UIColor.white
        tabGradientView.translatesAutoresizingMaskIntoConstraints = false;


        tabBarController.tabBar.addSubview(tabGradientView)
        tabBarController.tabBar.sendSubview(toBack: tabGradientView)
        tabGradientView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        tabGradientView.layer.shadowOffset = CGSize(width: 0, height: 0)
        tabGradientView.layer.shadowRadius = 4.0
        tabGradientView.layer.shadowColor = UIColor.gray.cgColor
        tabGradientView.layer.shadowOpacity = 0.6
        tabBarController.tabBar.clipsToBounds = false
        tabBarController.tabBar.backgroundImage = UIImage()
        tabBarController.tabBar.shadowImage = UIImage()
    }
    // Override point for customization after application launch.
    return true
}

Result

Answer 2

So the answer provided by @Reinier Melian didn't work for me, but I made a custom TabBar controller with this effect that worked:

Code:

class MyCustomTabBarController: UITabBarController {

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

        //here's the code that creates no border, but has a shadow:

        tabBar.layer.shadowColor = UIColor.lightGray.cgColor
        tabBar.layer.shadowOpacity = 0.5
        tabBar.layer.shadowOffset = CGSize.zero
        tabBar.layer.shadowRadius = 5
        self.tabBar.layer.borderColor = UIColor.clear.cgColor
        self.tabBar.layer.borderWidth = 0
        self.tabBar.clipsToBounds = false
        self.tabBar.backgroundColor = UIColor.white
        UITabBar.appearance().shadowImage = UIImage()
        UITabBar.appearance().backgroundImage = UIImage()
    }
}

How to Use It:

To use it, drag a tab bar controller on to the storyboard and then just change the class of that tab bar to this one via the drop down.

Answer 3

Tested on iOS 12.1, Swift 4.2

The UITabBar view added in your .storyboard/.xib file need to be lower (position in the Document Outline ) than the content that will be scrolling, in my case the Web Report Container is the scrolling part and the Tab Bar is the UITabBar in the bottom. I put it as well lower in the Document Outline as you can see here to give it a lower z-index:

Then in your ViewController.swift file you could have a setup like this in your viewDidLoad for example:

// Remove default line
tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()
tabBar.backgroundColor = UIColor.white

// Add only shadow 
tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 8
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.2

You can play with shadowOpacity and shadowRadius to adjust the shadowing visual to the desired effect.