Question

I wanted to make my right bar button contain 2 buttons. So I did that by using a UIToolbar. But the problem is that the 2 buttons sit apart from each other, while the affect I would like to achieve is too have them sitting flush against each other.

Here is an image of how they look now

Here is the code I use to achieve the buttons so far

    UIToolbar *tools = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0f, 2.0f, 120.0f, 40.01f)]; // 44.01 shifts it up 1px for some reason
tools.clearsContextBeforeDrawing = NO;
tools.clipsToBounds = YES;
tools.tintColor = [UIColor blueColor];
tools.barStyle = -1;// -1; // clear background
NSMutableArray *buttons = [[NSMutableArray alloc] initWithCapacity:2];


UIButton * upButton = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
upButton.frame = CGRectMake(0, 07, 46, 30);
upButton.titleLabel.font = [UIFont fontWithName:@"Arial-BoldMT" size:16];
[upButton setTitle:@"" forState:UIControlStateNormal];
upButton.backgroundColor = [UIColor clearColor];
[upButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];
[upButton addTarget:self action:@selector(pageDown) forControlEvents:UIControlEventTouchUpInside];
[upButton setBackgroundImage:[UIImage imageNamed:@"page_up.png"] forState:UIControlStateNormal];
[upButton setBackgroundImage:[UIImage imageNamed:@"page_up_action.png"] forState:UIControlStateSelected];
UIBarButtonItem *toggleSegmentedControlBarItemOne = [[UIBarButtonItem alloc] initWithCustomView:upButton];
[buttons addObject:toggleSegmentedControlBarItemOne];

UIButton * downButton = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
downButton.frame = CGRectMake(0, 07, 46, 30);
downButton.titleLabel.font = [UIFont fontWithName:@"Arial-BoldMT" size:16];
[downButton setTitle:@"" forState:UIControlStateNormal];
downButton.backgroundColor = [UIColor clearColor];
[downButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal ];
[downButton addTarget:self action:@selector(pageUp) forControlEvents:UIControlEventTouchUpInside];
[downButton setBackgroundImage:[UIImage imageNamed:@"page_down.png"] forState:UIControlStateNormal];
[downButton setBackgroundImage:[UIImage imageNamed:@"page_down_action.png"] forState:UIControlStateSelected];
UIBarButtonItem *toggleSegmentedControlBarItemTwo = [[UIBarButtonItem alloc] initWithCustomView:downButton];
[buttons addObject:toggleSegmentedControlBarItemTwo];

[tools setItems:buttons animated:NO];

[buttons release];
UIBarButtonItem *twoButtons = [[UIBarButtonItem alloc] initWithCustomView:tools];
[tools release];
self.navigationItem.rightBarButtonItem = twoButtons;
[twoButtons release];

Can anybody please advise me how to get those two buttons to sit beside each other without any gap?

Many Thanks,
-Code

Answer 1

You can add UISegmentedControl as customView to your navigationItem and set its momentary property to true, that way you will get exactly what you want.

Here is sample code

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.title = @"Test";

    UISegmentedControl *segControl = [[UISegmentedControl alloc] initWithFrame:CGRectMake(0, 0, 90, 30)];
    segControl.momentary = YES;
    segControl.segmentedControlStyle = UISegmentedControlStyleBar;
    segControl.tintColor = [UIColor darkGrayColor];

    [segControl insertSegmentWithImage:[UIImage imageNamed:@"up.png"] atIndex:0 animated:NO];
    [segControl insertSegmentWithImage:[UIImage imageNamed:@"down.png"] atIndex:1 animated:NO];

    [segControl addTarget:self action:@selector(segButtonDown:) forControlEvents:UIControlEventValueChanged];

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:segControl];

}

- (void)segButtonDown:(id)sender {

    UISegmentedControl *segControl = (UISegmentedControl *)sender;

    switch (segControl.selectedSegmentIndex) {
        case 0:
            NSLog(@"Up");
            break;
        case 1:
            NSLog(@"Down");
        default:
            break;
    }

}

And here is image how it looks like.

And here you can see events in console.

2012-11-25 16:03:47.805 test2[13886:c07] Up
2012-11-25 16:03:48.367 test2[13886:c07] Down
2012-11-25 16:03:48.930 test2[13886:c07] Up
2012-11-25 16:03:49.538 test2[13886:c07] Down