I'm trying to create a Pinterest style Tab Bar. Is it possible to customise UITabBar in that way or do you have to write a separate view to sit on top of everything if so how would you do that? It's basically just moved up with rounded corners and a shadow. How would you adjust the width of the tab bar and move it up?
5
-
1check this out pal, maybe this will work -> medium.com/@gemix95/…emrcftci– emrcftci2021-01-18 09:20:49 +00:00Commented Jan 18, 2021 at 9:20
-
Is it really a TabBar, or maybe a UIWindows added on top which might delegate to an main viewcontroller (which might be a UITabBarController).Larme– Larme2021-01-18 09:24:31 +00:00Commented Jan 18, 2021 at 9:24
-
@emrcftci Wow that was a lot easier than I expected. Thanks!Junaid– Junaid2021-01-18 09:33:49 +00:00Commented Jan 18, 2021 at 9:33
-
@emrcftci can you post that as an answer so I can mark it as correctJunaid– Junaid2021-01-23 11:14:42 +00:00Commented Jan 23, 2021 at 11:14
-
actually this is not an answer but I'm gonna modify it and post as an anwer, I'm happy to be able to help.emrcftci– emrcftci2021-01-23 13:17:57 +00:00Commented Jan 23, 2021 at 13:17
Add a comment
|
2 Answers
If you want to make "RoundedTabbar" than you can create one like this ->
import UIKit
class RoundedTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let layer = CAShapeLayer()
layer.path = UIBezierPath(roundedRect: CGRect(x: 30, y: tabBar.bounds.minY + 5, width: tabBar.bounds.width - 60, height: tabBar.bounds.height + 10), cornerRadius: (tabBar.frame.width/2)).cgPath
layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
layer.shadowRadius = 25.0
layer.shadowOpacity = 0.3
layer.borderWidth = 1.0
layer.opacity = 1.0
layer.isHidden = false
layer.masksToBounds = false
layer.fillColor = UIColor.white.cgColor
tabBar.layer.insertSublayer(layer, at: 0)
if let items = tabBar.items {
items.forEach { item in
item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -15, right: 0)
}
}
tabBar.itemWidth = 30.0
tabBar.itemPositioning = .centered
}
}
Don’t forget to type if you are using storyboard, the class name in the Identity inspector.
PS: I'm sharing Emmanuele Corporente's Medium article content as an answer please check the original article & give it some claps!
Comments
I created a floating tab bar library. It doesn't look exactly like Pinterest's but you could probably modify the drawing code to change the way it looks.
If you want to implement it from scratch, you'll have to create your own view controller subclass, as well as a UIView subclass for the tab bar, and manage the "page" switching yourself. UITabBarController doesn't offer enough customization for this.
