18

How can I set the title of UIToolBar such that it looks the same as the title in UINavigationBar?

I tried to use a button with plain style, it looks ok, but it will be highlighted when I click on it... Is there any better way to set the title in the detail view of split view?

0

9 Answers 9

27

This is what I use to present a title on a toolbar that will not highlight when pressed:

#define UIColorFromRGB(rgbValue) [UIColor \
colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

// choose whatever width you need instead of 600
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 600, 23)];
label.textAlignment = UITextAlignmentCenter;
label.backgroundColor = [UIColor clearColor];
label.shadowColor = UIColorFromRGB(0xe5e7eb);
label.shadowOffset = CGSizeMake(0, 1);
label.textColor = UIColorFromRGB(0x717880);
label.text = @"your title";
label.font = [UIFont boldSystemFontOfSize:20.0];
UIBarButtonItem *toolBarTitle = [[UIBarButtonItem alloc] initWithCustomView:label];
[label release];
3
  • 1
    Forgive me, but is not easier (and technically safer) to use the default class method "+ (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha" instead of a macro?
    – IssamTP
    Mar 7, 2011 at 10:40
  • 1
    It's technically the same seeing as the macro calls that very method. Whether it's easier or not is up to you. At any rate, it's true that using the macro is in no way necessary for this example.
    – sdsykes
    Mar 7, 2011 at 13:36
  • The macro would not be available in swift, a class method (added to the bridging header) would.
    – Jbryson
    Oct 6, 2015 at 19:09
9

I think this would be much cleaner:

UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:frame];

UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"Your Title" 
                                                         style:UIBarButtonItemStylePlain 
                                                        target:nil 
                                                        action:nil];

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                        target:nil 
                                                                        action:nil];

NSArray *items = [[NSArray alloc] initWithObjects:spacer, item, spacer, nil];

[toolbar setItems:items];
toolbar.userInteractionEnabled = NO;
1
  • 6
    Although setting the toolbar userInteractionEnabled to NO does prevent the highlight of the title, it also prevents interaction with any other button bar items that might exist. May 17, 2012 at 12:24
9

This solves the highlighting problem, disabled problem, and touch problem.

Toolbar and titleButton were both created in IB. The view title is covered by the toolbar. So put the title in a toolbar.

self.titleButton.title = @"Order";  // myInterestingTitle

It looks like this: enter image description here

Disable to prevent any highlighting, and to stop it from responding to touches.

self.titleButton.enabled=NO;

Then it looks like this:enter image description here

It will look disabled, so set the color for disabled to white, which has an implicit alpha=1.0. This effectively overrides the 'disabled' look.

[self.titleButton setTitleTextAttributes:
        [NSDictionary dictionaryWithObject:[UIColor whiteColor]
                                    forKey:UITextAttributeTextColor]
                                forState:UIControlStateDisabled ];

Here's what you get: enter image description here

2
  • I create toolbar and button programmatically like this: ` NSMutableArray *items = [[NSMutableArray alloc] init]; UIBarButtonItem *titleItem = [[UIBarButtonItem alloc] initWithTitle:self.planTitle style:UIBarButtonItemStylePlain target:nil action:nil]; titleItem.width = 200; titleItem.enabled = false; [titleItem setTitleTextAttributes:[NSDictionary dictionaryWithObject:[UIColor greenColor] forKey:UITextAttributeTextColor] forState:UIControlStateDisabled]; [items addObject:titleItem]; `. Unfortunately it only reacts on UIControlStateNormal, why?
    – tester
    Jun 6, 2013 at 20:30
  • also, if I change to UIControlStateNormal it gets green, but alpha is not 1.0, something lower than 1.0.
    – tester
    Jun 6, 2013 at 20:30
3

Swift 5 version of Rayfleck's great answer:

let titleButton = UIBarButtonItem(title: "My Title", style: .plain, target: nil, action: nil)
titleButton.isEnabled = false
titleButton.setTitleTextAttributes([.foregroundColor : UIColor.black], for: .disabled)

Add this button to the toolbar as normal.

1

enter image description here

  1. Put the regular "Rounded Rect Button" (UIButton) on toolbar (not "Bar Button Item")! Be aware, that behind the scene, IB wrap UIButton with UIBarButtonItem. It is why you have to click on button twice to get to UIButton properties (true for Xcode 4.2).
  2. Get to UIButton properties. When you click first time, you will get "Bar button item" properties (it is what IB created automatically for you). Now click second time, you'll get to "Button" properties (also, when you selected UIButton you can't resize it and can't see resize markers).
  3. In the Button properties set type to "Custom" to remove rounded rect border around button (you may need to resize button in IB to refresh it before you can see difference).
  4. In the Button properties under "View" uncheck "User Interaction Enabled".
2
  • It doesn't work for UIBarButtonItems as they are not subclasses of UIView.
    – jburns20
    Dec 28, 2011 at 22:49
  • Yes, but you can use regular UIButton instead of UIBarButtonItem. Jan 2, 2012 at 20:45
1
UILabel* title = [[[UILabel alloc] init] autorelease];
[title setBackgroundColor:[UIColor clearColor]];
[title setFont:[UIFont boldSystemFontOfSize:20]];
[title setTextAlignment:UITextAlignmentCenter];
[title setTextColor:[UIColor grayColor]];
[title.layer setShadowColor:[[UIColor colorWithWhite:1.0 alpha:0.5] CGColor]];
[title.layer setShadowOffset:CGSizeMake(0, 1)];
[title.layer setShadowRadius:0.0];
[title.layer setShadowOpacity:1.0];
[title.layer setMasksToBounds:NO];
[title setText:@"Sample Title"];
[title sizeToFit];

// [[[UIBarButtonItem alloc] initWithCustomView:title] autorelease]
0
0

Use a UIBarButtonItem in the plain style and additionally cover the toolbar in the appropriate area with a UIView that has a clear background. The view consumes the taps and hides them from the bar button item. Make sure you set the autoresizing mask correctly.

-1

Please check this func for Toolbar with Title & Done Btn

func createToolBar(_ textField: UITextField) {
    let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44.0))
    let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneButtonTapped))
    doneButton.tintColor = UIColor.blue
    // for show placeholder
    let placeHolderBtn = UIBarButtonItem(title: textField.placeholder, style: .plain, target: nil, action: nil)
    placeHolderBtn.isEnabled = false
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    toolbar.items = [flexibleSpace, placeHolderBtn, flexibleSpace, doneButton]
    
    textField.inputAccessoryView = toolbar
}
-2

You can uncheck "Shows touch on Highlight" in Interface Builder.

3
  • thanks Thomas, but I can't find this option in IB... where is it?
    – Kelvin
    May 3, 2010 at 5:27
  • Instead of searching in IB you could use something like [yourButton setShowsTouchWhenHighlighted:NO];
    – tfeldmann
    May 6, 2010 at 14:17
  • This option is for UIButton, not UIBarButtonItem.
    – Chase
    Sep 11, 2011 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.