Adding a UILabel to a UIToolbar
I found answerBot's answer very useful, but I think I found an even easier way, in Interface Builder:
- create a UIBarButtonItem and add it to your Toolbar in Interface Builder
- Uncheck "enabled" for this BarButtonItem
plug this BarButtonItem to a property in your class (this is in Swift, but would be very similar in Obj-C):
@IBOutlet private weak var lastUpdateButton: UIBarButtonItem! // Dummy barButtonItem whose customView is lastUpdateLabel
add another property for the Label itself:
private var lastUpdateLabel = UILabel(frame: CGRectZero)
in viewDidLoad, add the following code to set the properties of your label, and add it as the customView of your BarButtonItem
// Dummy button containing the date of last update lastUpdateLabel.sizeToFit() lastUpdateLabel.backgroundColor = UIColor.clearColor() lastUpdateLabel.textAlignment = .Center lastUpdateButton.customView = lastUpdateLabel
To update the
UILabel
text:lastUpdateLabel.text = "Updated: 9/12/14, 2:53" lastUpdateLabel.sizeToFit()
Result :
You have to call lastUpdateLabel.sizetoFit()
each time you update the label text
For those using Interface Builder to layout your UIToolBar
, it is also possible to do this using Interface Builder alone.
To add a UILabel
to a UIToolBar
you need to add a generic UIView
object to your UIToolBar
in IB by dragging a new UIView
object over your UIToolBar
. IB
will automatically create a UIBarButtonItem
that will be initialized with your custom UIView
. Next add a UILabel
to the UIView
and edit the UILabel
graphically to match your preferred style. You can then visually set up your fixed and/or variable spacers as desired to position your UILabel
appropriately.
You must also set the background of both the UILabel
and the UIView
to clearColor
to get the UIToolBar
to show through correctly under the UILabel
.
Have a look into this
[[UIBarButtonItem alloc] initWithCustomView:yourCustomView];
Essentially every item must be a "button" but they can be instantiated with any view you require. Here is some example code. Note, since other buttons are typically on the toolbar, spacers are placed on each side of the title button so it stays centered.
NSMutableArray *items = [[self.toolbar items] mutableCopy];
UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer];
[spacer release];
self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0 , 11.0f, self.view.frame.size.width, 21.0f)];
[self.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:18]];
[self.titleLabel setBackgroundColor:[UIColor clearColor]];
[self.titleLabel setTextColor:[UIColor colorWithRed:157.0/255.0 green:157.0/255.0 blue:157.0/255.0 alpha:1.0]];
[self.titleLabel setText:@"Title"];
[self.titleLabel setTextAlignment:NSTextAlignmentCenter];
UIBarButtonItem *spacer2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[items addObject:spacer2];
[spacer2 release];
UIBarButtonItem *title = [[UIBarButtonItem alloc] initWithCustomView:self.titleLabel];
[items addObject:title];
[title release];
[self.toolbar setItems:items animated:YES];
[items release];
One of the things I'm using this trick for is to instantiate a UIActivityIndicatorView
on top of the UIToolBar
, something that otherwise wouldn't be possible. For instance here I have a UIToolBar
with 2 UIBarButtonItem
, a FlexibleSpaceBarButtonItem
, and then another UIBarButtonItem
. I want to insert a UIActivityIndicatorView
into the UIToolBar
between the flexible space and the final (right-hand) button. So in my RootViewController
I do the following,
- (void)viewDidLoad {
[super viewDidLoad];// Add an invisible UIActivityViewIndicator to the toolbar
UIToolbar *toolbar = (UIToolbar *)[self.view viewWithTag:767];
NSArray *items = [toolbar items];
activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 20.0f, 20.0f)];
[activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];
NSArray *newItems = [NSArray arrayWithObjects:[items objectAtIndex:0],[items objectAtIndex:1],[items objectAtIndex:2],
[[UIBarButtonItem alloc] initWithCustomView:activityIndicator], [items objectAtIndex:3],nil];
[toolbar setItems:newItems];}