UIButton style when added to navigationItem.titleView

Question

I need to add a button to the UINavigationItem titleView (actually to the center of the UINavigation Bar.

I've used the following code to accomplish so:

UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(0, 0, 70, 30);
[btn setSelected:YES];
[btn setTitle:@"list" forState:UIControlStateNormal];

And I've go the following:

I need to give the same style of the "Done" button (which is UIBarButtonItem) to the button "list"?

Answer 1

You can use UISegmentedControl:

UISegmentedControl *mySegmentedControl = [[UISegmentedControl alloc]
                initWithItems:@"Example"]];
mySegmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
[mySegmentedControl addTarget:self action:@selector(myMethod)
       forControlEvents:UIControlEventValueChanged];

self.navigationItem.titleView = mySegmentedControl;

Answer 2

I have used andrej's UISegmentedControl-based approach and expanded it a bit to behave more like a normal UIButton:

@interface SPWKBarButton : UISegmentedControl
- (id)initWithTitle:(NSString *)title;
- (void)setTitle:(NSString *)title;
@end

@implementation SPWKBarButton 

- (id)initWithTitle:(NSString *)title
{
    self = [super initWithItems:@[title]];

    if (self) {
        self.segmentedControlStyle = UISegmentedControlStyleBar;

        NSDictionary *attributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor]
                                                               forKey:UITextAttributeTextColor];

        [self setTitleTextAttributes:attributes
                            forState:UIControlStateNormal];
    }

    return self;
}

- (void)setTitle:(NSString *)title
{
    [self setTitle:title forSegmentAtIndex:0];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];

    if (CGRectContainsPoint(self.bounds, [[touches anyObject] locationInView:self])) {
        self.selectedSegmentIndex = 0;
    } else {
        self.selectedSegmentIndex = UISegmentedControlNoSegment;
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesEnded:touches withEvent:event];

    if (CGRectContainsPoint(self.bounds, [[touches anyObject] locationInView:self])) {
        [self sendActionsForControlEvents:UIControlEventTouchUpInside];
    }

    self.selectedSegmentIndex = UISegmentedControlNoSegment;
}

@end

For basic usage, you can use it as a UIButton drop-in replacement:

_button = [[SPWKBarButton alloc] initWithTitle:titles[0]];

[_button addTarget:self
            action:@selector(doSomething:)
  forControlEvents:UIControlEventTouchUpInside];

[self.navigationItem setTitleView:_button];

The event will only fire when the touchup happened inside the bounds of the segmented control. Enjoy.

Answer 3

UIBarButtonItems can only be used as items in a UIToolbar (they're not actually instances of UIView), so the only way to directly use a UIBarButtonItem in your titleView would be to set an instance of UIToolbar as your titleView and add your barButtonItem to that toolbar. However, I don't think that will work.

I think what you'll need to do is find a way to mimic the UIBarButtonItem style using a plain old UIButton. You can get the actual image file used to create UIBarButtonItems using the UIKit artwork extractor. Then it's just a matter of creating a custom UIButton using that background image, and you're good to go.

Answer 4

Yes, you should use a UIBarButtonItem too for the button "list"

using custom identifier and a title properties.

You can use the UIBarButtonItem identifier "flexible space" to display your button "list" at the center.