Rounded corners for UITabBar - swift

Question

I would like to create a UITabBar with rounded corners. Is there a way I can make the UITabBar have rounded corners? It would take the shape of the second picture.
The app starts off with a tableView. When the user taps a topic, they are sent to a tabBar controller.
-----edit-----
This is my AppDelegate:
func application(_application: UIApplication,
willFinishLaunchingWithOptions launchOptions: [NSObject : AnyObject]?) -> Bool{
let tabBarController = window?.rootViewController as! UITabBarController
let image = UIImage(named: "bar")
let tabBarImage = resize(image: image!, newWidth: tabBarController.view.frame.width)
tabBarController.tabBar.backgroundImage = tabBarImage
return true
}
func resize(image: UIImage, newWidth: CGFloat) -> UIImage {
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: image.size.height))
image.drawInRect( CGRect(x: 0, y: 0, width: newWidth, height: image.size.height))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
Edit: Dec '21
Replaced image to omit name on project.

Answer 1

Hope this help you
self.tabBar.layer.masksToBounds = true
self.tabBar.isTranslucent = true
self.tabBar.barStyle = .blackOpaque
self.tabBar.layer.cornerRadius = 20
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

Answer 2

Its working fine for me
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
self.tabBarController?.tabBar.layer.masksToBounds = true
self.tabBarController?.tabBar.isTranslucent = true
self.tabBarController?.tabBar.barStyle = .default
self.tabBarController?.tabBar.layer.cornerRadius = 25
self.tabBarController?.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
}

Answer 3

Hey I used a simple property of the tabBar which is backgroundImage.
So, I added in the appDelegate in didFinisLaunchingWithOptions:
let tabBarController = window?.rootViewController as! UITabBarController
let image = UIImage(named: "bar")
let tabBarImage = resize(image: image!, newWidth: tabBarController.view.frame.width)
tabBarController.tabBar.backgroundImage = tabBarImage
and my custom method to change the size of the image:
func resize(image: UIImage, newWidth: CGFloat) -> UIImage {
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: image.size.height))
image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: image.size.height)) // image.drawInRect( CGRect(x: 0, y: 0, width: newWidth, height: image.size.height)) in swift 2
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
I used a png image as the background, the same that you posted but with clear color instead of the black color.
Hope this helps

Answer 4

self.tabBarController?.tabBar.layer.cornerRadius = 20
self.tabBarController?.tabBar.layer.masksToBounds = true

Answer 5

override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: view.frame.width, height: tabBar.frame.height), cornerRadius: 15)
let mask = CAShapeLayer()
mask.path = path.cgPath
tabBar.layer.mask = mask
}

Answer 6

In my case works this way:
import UIKit
#IBDesignable
class CustomTabBar: UITabBar {
override func layoutSubviews() {
super.layoutSubviews()
setup()
}
private func setup() {
layer.masksToBounds = true
isTranslucent = true
barStyle = .blackOpaque
layer.cornerRadius = 44
layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
}
}
Then set class CustomTabBar for TabBar in storyboard: