iOS Pandora like bottom toolbar

Question

Anyone know how to implement the drag feature on the toolbar to make another view appear? Maybe adding a subview to the toolbar, but I am not sure how I should layer this or handle the drag.

Answer 1

Do you need Something like this video ?

• Here is a sample

  

• Here is other

  

these here is my approach to implement this:

• Create ToolBar.
• Create a BottomView(should be behind toolBar.
• Add SwipteGestures with Up & down direction on ToolBar
• In target method, just do that animation to move up & down.

Here is the code that I wrote just a few minutes ago.

    // add the variables
    UIToolbar *myToolBar;
    UIView *hiddenView;
    BOOL movedUP;


    -(void)addToolBar{
        [self addBottomMostHiddenView];
        UIBarButtonItem *spaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
        [self.navigationController.toolbar setBarStyle:UIBarStyleBlackOpaque];
        UIBarButtonItem *one = [[UIBarButtonItem alloc] initWithTitle:@"One Item" style:UIBarButtonItemStylePlain    target:self     action:nil];
        UIBarButtonItem *drag = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"icon-drag-64.png"] style:UIBarButtonItemStylePlain target:self   action:nil];
    drag.enabled = NO;
        UIBarButtonItem *two = [[UIBarButtonItem alloc] initWithTitle:@"Two Item" style:UIBarButtonItemStylePlain    target:self     action:nil];
        NSArray *toolbarItems = [NSArray arrayWithObjects:one,spaceItem, drag, spaceItem , two, nil];

        myToolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 430, self.view.frame.size.width, 80)];
        myToolBar.tintColor = [UIColor whiteColor];
        myToolBar.barTintColor = [UIColor colorWithRed:53.0/255.0 green:70.0/255.0 blue:103.00/255.00 alpha:1];
         [self.view addSubview:myToolBar];
        [myToolBar setItems:toolbarItems animated:YES];

        UISwipeGestureRecognizer *upGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(dragMe:)];
    upGesture.direction = UISwipeGestureRecognizerDirectionUp;
        [myToolBar addGestureRecognizer:upGesture];

        UISwipeGestureRecognizer *downGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(dragMe:)];
    downGesture.direction = UISwipeGestureRecognizerDirectionDown;
        [myToolBar addGestureRecognizer:downGesture];

    }


    -(void)addBottomMostHiddenView{
        hiddenView = [[UIView alloc]initWithFrame:CGRectMake(0, 510, self.view.frame.size.width, 40)];
        UIImageView *image = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"iconProgress.png"]];
        [hiddenView addSubview:image];
        [hiddenView setBackgroundColor:[UIColor colorWithWhite:0.2 alpha:0.8]];
        [self.view addSubview:hiddenView];
    }

    -(void)dragMe:(UISwipeGestureRecognizer *)gesture {
        [UIView animateWithDuration:0.5 animations:^{
            if(gesture.direction == UISwipeGestureRecognizerDirectionDown) {
                if(movedUP) {
                    myToolBar.frame = CGRectMake(0, 430, self.view.frame.size.width, 80);
                    hiddenView.frame = CGRectMake(0, 510, self.view.frame.size.width, 80);
                    movedUP = NO;
                }
        }else  if(gesture.direction == UISwipeGestureRecognizerDirectionUp) {
            if(!movedUP) {
                myToolBar.frame = CGRectMake(0, 390, self.view.frame.size.width, 80);
                hiddenView.frame = CGRectMake(0, 470, self.view.frame.size.width, 80);
                movedUP = YES;
            }
        }
    }];

}

Hope that helps you.