Click the tab bar button within the view controller of the particular tab bar item you want to make prominent,
Remove the text, just set the image inset top to -25 of the tab bar button.
Like Below image
After that
goto assets,
select the image you set in tab bar button,
set the property Rendering As to Original Image (in case if you have a colourful button or else it would render as one colour)
Like below,
Now, You will get it like you wanted,
EDIT: To make upper half clickable, inherit UITabBar
class ProminentTabBar: UITabBar {
var prominentButtonCallback: (()->())?
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
guard let items = items, items.count>0 else {
return super.hitTest(point, with: event)
}
let middleItem = items[items.count/2]
let middleExtra = middleItem.imageInsets.top
let middleWidth = bounds.width/CGFloat(items.count)
let middleRect = CGRect(x: (bounds.width-middleWidth)/2, y: middleExtra, width: middleWidth, height: abs(middleExtra))
if middleRect.contains(point) {
prominentButtonCallback?()
return nil
}
return super.hitTest(point, with: event)
}
}
And in TabBarController add this
override func viewDidLoad() {
super.viewDidLoad()
let prominentTabBar = self.tabBar as! ProminentTabBar
prominentTabBar.prominentButtonCallback = prominentTabTaped
}
func prominentTabTaped() {
selectedIndex = (tabBar.items?.count ?? 0)/2
}
And remmber there is no nice solution when it comes to UITabBar 🙂