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?

Th

Answer 1

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  *words = [string componentsSeparatedByString:@" "];
    NSMutableArray  *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;