What are the correct dimensions for a custom tab bar item background image?

So I have a .png that's 428x176 px:

I want to use it as a tab bar background image for when an item is in the selected state. The problem is that the image is too big. So now, I'm exploring the different resolution suffixes: @1x, @2x, @3x. But regardless of which I append to the image filename, the image remains too big for the tab bar item's background, although it does get smaller as I increase the resolution factor. How do I determine what the correct dimensions for this image should be?

5 Answers

Answers 1

Have you tried with adding imageView as subview of tabbar

var bgView: UIImageView = UIImageView(image: UIImage(named: "background.png")) bgView.frame = CGRectMake(0, 420, 320, 60)//you might need to modify this frame to your tabbar frame self.view.addSubview(bgView) 

If we talk about height & width of tabbar ,it is 320*49 / 640*98 @2x for standard tabbar. so if you want to keep same dimension try with these width/height ratio.

Answers 2

Use the below two lines.

self.tabBarController.tabBar.autoresizesSubviews = NO; self.tabBarController.tabBar.clipsToBounds = YES; 

Xcode works with point, not pixels, so the width will always be 320. In the case of retina display one point is 2x2 pixels and in normal mode it is 1x1.

I think the height for the tab bar should be 320x49 for normal and 640x98 for retina.

the retina image should have the same name as the normal one with the @2x at the end.

Rename your image to tabbarBack@2x.png. This is called pixel doubling for the Retina Display.

Without the @2x iOS doesn't know that it should apply a scale factor and it will be used as it is and though it should be halved.

• tabbarBack.png (45 px or so)

• tabbarBack@2x.png

  [[[self tabBarController] tabBar] setBackgroundImage:[UIImage imageNamed:@"tabbarBack.png"]];

Answers 3

There's no clear cut answer for this as the tab bar itself isn't of fixed size on various iOS versions and various iOS devices.

Starting iOS 11, tab bar will have smaller height and titles will move to right in landscape mode.

So the idea is to have a stretchable image that can be stretched along all all edges - top/leading/bottom/trailing.

For your reference - http://macoscope.com/blog/stretchable-images-using-interface-builder/

Here are few images from above blog post to help make it clear -

Hope this helps.

Answers 4

To add to Tarun Tyagi's answer: If you add the image to the asset store you can also do visual slicing with the system tools.

1. Create an asset catalog
2. Drag & Drop your image into the asset catalog.
3. Select that image in the asset catalog and click on the "Show Slicing" button on the bottom right
4. Click on "Start Slicing" and slice that image

Answers 5

Try resizing the image to the tab bar size. Or Add an imageView to the tabBar as subview, and then use the image in that imageView. Subclass the TabBarController and add imageview there:

class YourTabBarController: UITabBarController {  override func viewDidLoad() {     super.viewDidLoad()      let backgroundImage = UIImageView(image: UIImage(named: "gray background"))     backgroundImage.frame = backgroundImage.bounds     self.view.addSubview(backgroundImage)   } 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati