4

On ios7, a lot of apps (Apple Messages, Facebook Messenger, Calendar)have views appearing under the UINavigationBar, often with what seems to be standard animation. As it seems quite standard and looks a lot with a UIToolBar, I was looking for the standard way of implementing it but couldn't find anything.

Is there a better way to adding a UIToolBar to the UINavigationBar?

Apple Messages

Community
  • 1
  • 1
Matthieu Rouif
  • 2,793
  • 1
  • 17
  • 28

1 Answers1

5

You should follow this simple approach.

  • Add a UIToolBar like this.

    UIBarButtonItem *flexiableItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:nil];
    UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];
    
    NSArray *items = [NSArray arrayWithObjects:item1, flexiableItem, item2, nil];
    self.toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, -44, self.view.frame.size.width, 44)];
    [self.toolBar setItems:items];
    self.toolBar.tintColor = [UIColor whiteColor];
    self.toolBar.barTintColor = [UIColor colorWithRed:0.6 green:0.1 blue:0.2 alpha:1];
    [self.contentView addSubview:self.toolBar];
    
  • Add a Menu Button on Top navigation item

    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Menu" style:UIBarButtonItemStyleBordered target:self action:@selector(toggleMenu:)];
    
  • Now Implement toggleMenu function. Add a BOOL variable to track the movement.

    if(!moved) {
    [UIView animateWithDuration:0.5 animations:^{
        self.toolBar.alpha = 1;
        self.toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);
    }];
    moved = YES;
    }else {
    [UIView animateWithDuration:0.5 animations:^{
        self.toolBar.alpha = 1;
        self.toolBar.frame = CGRectMake(0, -44, self.view.frame.size.width, 44);
    }];
    moved = NO;
    }
    
  • Here is the attached video for this.

Hope that helps.

Balram Tiwari
  • 5,537
  • 2
  • 21
  • 40
  • Thanks, that's more or less what I had done. I was just wondering if there was something I was missing. – Matthieu Rouif Jan 28 '14 at 16:22
  • @BalramTiwari, bro could you please help me to take a look at my question https://stackoverflow.com/questions/46376475/uinavigationbar-does-not-overlap-to-uicollectionview-in-swift-4?noredirect=1#comment79712072_46376475 ? – May Phyu Sep 23 '17 at 08:05