Having trouble with the Tab bar background image

Question

I would like to show the background image for the tab bar which is having vertical separator lines.

I have this images in the following resolutions:-

1x - 320 x 49

2x - 640 x 98

3x - 960 x 147

The image sets correctly for iPhone 5 with the separator lines at the appropriate place, but it is not rendered properly for iPhone 6/7 and iPhone 6+/7+.

The separator lines are not at the appropriate places, some overlapping tab bar items.

Note: I'm using Xcode 8.2.

Answer 1

Create a UIView Like this and set the height of the center item as your wish.

And then in TabbarView Controller. add this view to the tabbar View Like this.

UITabBar.appearance().shadowImage = UIImage()

        customNavBar = NSBundle.mainBundle().loadNibNamed("CustomTabBarView", owner: self, options: nil)[0] as! UIView

        bdNavBar.translatesAutoresizingMaskIntoConstraints = false

        self.tabBar.addSubview(customNavBar)

And then add Constraints to the custom Tabbar.

self.view.addConstraint(NSLayoutConstraint(item: customNavBar, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant:  0))
self.view.addConstraint(NSLayoutConstraint(item: customNavBar, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1.0, constant:  0))
self.view.addConstraint(NSLayoutConstraint(item: customNavBar, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant:  0))
bdNavBar.addConstraint(NSLayoutConstraint(item: customNavBar, attribute: NSLayoutAttribute.Height, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant:  50))        
self.tabBar.bringSubviewToFront(customNavBar)