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
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;
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)!
}
}
}
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
来源：https://stackoverflow.com/questions/11248457/is-it-possible-to-remove-the-images-in-the-uitabbaritem-and-aligned-vertically-t