Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UITabBar Border and Shadow issue

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

enter image description here

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.

enter image description here

I need like following image:

enter image description here

No Border but shadow effect.

Any Help will be appreciated.

like image 537
Abhishek Mitra Avatar asked Mar 28 '18 07:03

Abhishek Mitra


2 Answers

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

Updated for Swift 5, iOS 13, Xcode 11

Code:

class MyCustomTabBarController: UITabBarController, UITabBarControllerDelegate {

    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.

like image 129
Akash Kundu Avatar answered Nov 12 '22 00:11

Akash Kundu


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

enter image description here

like image 12
Reinier Melian Avatar answered Nov 12 '22 00:11

Reinier Melian