Question

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?

Was it helpful?

Solution

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];

OTHER TIPS

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

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;

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.

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".
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]

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top