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

Question

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 t

Answer 1

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

Answer 2

Making my answer for this question how to make UITabBar selection indicator image fill the whole space? as reference:

Subclass the UITabBarController

It works for multiple devices even with rotation.

Notes:

1. Make your images' rendering mode as Original.

2. Assign this class below to your UITabBarController in your Storyboard or as your base class if you're doing your screen programmatically.

   //
   //  BaseTabBarController.swift
   //  MyApp
   //
   //  Created by DRC on 1/27/17.
   //  Copyright © 2017 PrettyITGirl. All rights reserved.
   //
   
   import UIKit
   
   class BaseTabBarController: UITabBarController {
   
       let numberOfTabs: CGFloat = 4
       let tabBarHeight: CGFloat = 60
   
       override func viewWillAppear(_ animated: Bool) {
           super.viewWillAppear(animated)
   
           updateSelectionIndicatorImage()
       }
   
       override func viewWillLayoutSubviews() {
           super.viewWillLayoutSubviews()
   
           updateSelectionIndicatorImage()
       }
   
       func updateSelectionIndicatorImage() {
           let width = tabBar.bounds.width
           var selectionImage = UIImage(named:"myimage.png")
           let tabSize = CGSize(width: width/numberOfTabs, height: tabBarHeight)
   
           UIGraphicsBeginImageContext(tabSize)
           selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
           selectionImage = UIGraphicsGetImageFromCurrentImageContext()
           UIGraphicsEndImageContext()
   
           tabBar.selectionIndicatorImage = selectionImage
       }
   
   }
   

Answer 3

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.

Answer 4

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)


}

Answer 5

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.

Answer 6

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"]];