Is it possible to remove the images in the UITabBarItem and aligned vertically the title

Question

I have a UITabBar but i don't want to set the images I just want to set the title, and I want this title to be aligned vertically. Is this possible?

Thanks

Rob · Accepted Answer · 2016-04-28T17:59:43.977

Not that I know of. I think you'd need to create images of your text labels (either in advance in your graphic tool of choice, or you can create them programmatically at runtime).

If you want to do it programmatically, a method like the following might do it. It creates a center-aligned image using the text you pass it, performing word-wrap.

UITabBarItem *item = [self.tabBar.items objectAtIndex:0];
item.image = [self makeThumbnailFromText:@"Tab Bar One"];
item.title = nil;

item = [self.tabBar.items objectAtIndex:1];
item.image = [self makeThumbnailFromText:@"Tab Bar Two"];
item.title = nil;

This uses a little method that creates a bitmap by rendering the text you pass to it. You might have to play around with image sizes and font sizes to optimize for your tab bar controller images.

- (UIImage *)makeThumbnailFromText:(NSString *)string {
    // some variables that control the size of the image we create, what font to use, etc.

    CGSize imageSize = CGSizeMake(60, 80);
    CGFloat fontSize = 13.0;
    NSString *fontName = @"Helvetica-Bold";
    UIFont *font = [UIFont fontWithName:fontName size:fontSize];
    CGFloat lineSpacing = fontSize * 1.2;

    // set up the context and the font

    UIGraphicsBeginImageContextWithOptions(imageSize, false, 0);
    NSDictionary *attributes = @{NSFontAttributeName: font};

    // some variables we use for figuring out the words in the string and how to arrange them on lines of text

    NSArray <NSString *> *words = [string componentsSeparatedByString:@" "];
    NSMutableArray <NSDictionary *> *lines = [NSMutableArray array];
    NSString *lineThusFar;
    CGSize sizeThusFar = CGSizeZero;

    // let's figure out the lines by examining the size of the rendered text and seeing whether it fits or not and
    // figure out where we should break our lines (as well as using that to figure out how to center the text)

    for (NSString *word in words) {
        NSString *currentLine = lineThusFar ? [NSString stringWithFormat:@"%@ %@", lineThusFar, word] : word;
        CGSize size = [currentLine sizeWithAttributes: attributes];
        if (size.width > imageSize.width && lineThusFar) {
            [lines addObject:@{@"text": lineThusFar, @"size": [NSValue valueWithCGSize: sizeThusFar]}];
            lineThusFar = word;
            sizeThusFar = [word sizeWithAttributes: attributes];
        } else {
            lineThusFar = currentLine;
            sizeThusFar = size;
        }
    }
    if (lineThusFar) {
        [lines addObject:@{@"text": lineThusFar, @"size": [NSValue valueWithCGSize: sizeThusFar]}];
    }

    // now write the lines of text we figured out above

    CGFloat totalSize = (lines.count - 1) * lineSpacing + fontSize;
    CGFloat topMargin = (imageSize.height - totalSize) / 2.0;

    for (NSInteger i = 0; i < lines.count; i++) {
        CGFloat x = (imageSize.width - [lines[i][@"size"] CGSizeValue].width) / 2.0;
        CGFloat y = topMargin + i * lineSpacing;
        [lines[i][@"text"] drawAtPoint:CGPointMake(x, y) withAttributes: attributes];
    }

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

In Swift, that might look like:

func makeThumbnailFromText(text: String) -> UIImage {
    // some variables that control the size of the image we create, what font to use, etc.

    struct LineOfText {
        var string: String
        var size: CGSize
    }

    let imageSize = CGSize(width: 60, height: 80)
    let fontSize: CGFloat = 13.0
    let fontName = "Helvetica-Bold"
    let font = UIFont(name: fontName, size: fontSize)!
    let lineSpacing = fontSize * 1.2

    // set up the context and the font

    UIGraphicsBeginImageContextWithOptions(imageSize, false, 0)
    let attributes = [NSFontAttributeName: font]

    // some variables we use for figuring out the words in the string and how to arrange them on lines of text

    let words = text.componentsSeparatedByString(" ")
    var lines = [LineOfText]()
    var lineThusFar: LineOfText?

    // let's figure out the lines by examining the size of the rendered text and seeing whether it fits or not and
    // figure out where we should break our lines (as well as using that to figure out how to center the text)

    for word in words {
        let currentLine = lineThusFar?.string == nil ? word : "\(lineThusFar!.string) \(word)"
        let size = currentLine.sizeWithAttributes(attributes)
        if size.width > imageSize.width && lineThusFar != nil {
            lines.append(lineThusFar!)
            lineThusFar = LineOfText(string: word, size: word.sizeWithAttributes(attributes))
        } else {
            lineThusFar = LineOfText(string: currentLine, size: size)
        }
    }
    if lineThusFar != nil { lines.append(lineThusFar!) }

    // now write the lines of text we figured out above

    let totalSize = CGFloat(lines.count - 1) * lineSpacing + fontSize
    let topMargin = (imageSize.height - totalSize) / 2.0

    for (index, line) in lines.enumerate() {
        let x = (imageSize.width - line.size.width) / 2.0
        let y = topMargin + CGFloat(index) * lineSpacing
        line.string.drawAtPoint(CGPoint(x: x, y: y), withAttributes: attributes)
    }

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}

And

var item = tabBar.items![0]
item.image = makeThumbnailFromText("Tab Bar One")
item.title = nil;

item = tabBar.items![1]
item.image = makeThumbnailFromText("Tab Bar Two")
item.title = nil;

@Pach I've updated my answer with some code you could theoretically use to create the images at runtime. Probably easier to do it in Photoshop or whatever tool you want, though. — Rob, Jun 28 '12 at 22:33
Robert i got an error "undeclared identifier kTextKey" , am i missing something? — Pach, Jul 03 '12 at 22:55
@Pach yeah, as we're building that array of dictionary items, we just need two random unique identifiers for the dictionary keys. Doesn't really matter what they are, but I've updated the code to reflect what you could possibly use. — Rob, Jul 04 '12 at 00:48
@Saty Updated with Swift port (and improved Objective-C example at the same time to generate retina images). — Rob, Apr 28 '16 at 18:00

score 1 · Answer 2 · answered Aug 28 '17 at 05:35

For swift 3

//my center item is image only and rest tab bar items are text only

 let tabs = CustomTabBarController();
 tabs.viewControllers = [ViewControllerOne(),ViewControllerTwo(),ViewControllerThree()]

    let tabbar = tabs.tabBar;
    tabbar.backgroundColor = UIColor.white

    let tabOne = tabbar.items![0]
    tabOne.title = "One"

    let tabTwo = tabbar.items![1]
    tabTwo.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
    tabTwo.image = UIImage(named: "tab_icon.png")

    let tabThree = tabbar.items![2]
    tabThree.title = "Three"

//and in my CustomTabBarController

 import UIKit

 class CustomTabBarController: UITabBarController {

override func viewDidLoad() {
    super.viewDidLoad()

    UITabBar.appearance().tintColor = UIColor.black
      UITabBarItem.appearance().titlePositionAdjustment = UIOffset(horizontal: 0, vertical: -15)
}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)
    self.selectedIndex = 1;
}

override var selectedViewController: UIViewController? {
    didSet {

        guard let viewControllers = viewControllers else {
            return
        }

        for viewController in viewControllers {

            if viewController == selectedViewController {

                let selected: [String: AnyObject] =
                    [NSFontAttributeName:fontForTimesRoman(withStyle: "bold", andFontsize: 12),
                     NSForegroundColorAttributeName: UIColor.black]

                viewController.tabBarItem.setTitleTextAttributes(selected, for: .normal)

            } else {

                let normal: [String: AnyObject] =
                    [NSFontAttributeName: fontForTimesRoman(withStyle: "regular", andFontsize: 12),
                     NSForegroundColorAttributeName: UIColor.gray]

                viewController.tabBarItem.setTitleTextAttributes(normal, for: .normal)

              }
           }
       }
   }


   func fontForTimesRoman(withStyle style: String, andFontsize size: CGFloat) -> UIFont {
if (style == "bold") {
    return UIFont(name: "TimesNewRomanPS-BoldMT", size: size)!
}
else if(style == "italic"){
    return UIFont(name: "TimesNewRomanPS-ItalicMT", size: size)!
}
else{
    return UIFont(name: "TimesNewRomanPSMT", size: size)!
  }

  }
  }

score 0 · Answer 3 · answered Apr 23 '19 at 15:59

To hide the tab bar item icon/image in Xcode 10 and swift 12, select the tab bar item and then:

1) Show the attributes inspector
2) Set "System Item" with value "Custom"
3) Let "Selected Image" and attributes empty
4) Let "Bar Item -> Image" attribute empty

That's it to hide.
I do not know how to align vertically yet, but if I discover how to do it, I came back and I'll complement the answer.
See pictures of a Mentioned on the link: Can i only display text in tab bar item and change the style and position

Is it possible to remove the images in the UITabBarItem and aligned vertically the title

3 Answers3

Linked