How can I add a button like facebook messenger's Status bar - ios

Question

How i can add header like this inside my app and receive the touch event also control over it to hide/show ?

Answer 1

Here is something to work on.
I made a new project for iOS 7, with a single ViewController. Here is the storyboard :
I added a simple UIView at the top, a UINavigationBar just under it, and a large UIView taking the remaining space. This last view is where you should put your content.
Now here is the ViewController code :
ViewController.h :
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
#property (weak, nonatomic) IBOutlet UIView *littleView;
#property (weak, nonatomic) IBOutlet UINavigationBar *navBar;
#property (weak, nonatomic) IBOutlet UIView *mainView;
- (IBAction)toggleLittleView:(id)sender;
#end
littleView is the view behind the status bar, navbar is the navigation bar, mainView is the content view, and toggleLittleview is linked to the button in the nav bar.
ViewController.m :
#implementation ViewController {
BOOL isVisible;
CGFloat statusBarOffset;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Setting initial values
isVisible = YES;
statusBarOffset = 20;
// Adding a gesture recognizer to littleView
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleTap:)];
tap.numberOfTapsRequired = 1;
tap.numberOfTouchesRequired = 1;
[_littleView addGestureRecognizer:tap];
}
// Linked to the nav bar button
- (IBAction)toggleLittleView:(id)sender {
// If littleView is not on screen, show it before animation
if (!isVisible) {
_littleView.hidden = !_littleView.hidden;
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
}
// Animate to the new frames
[UIView animateWithDuration:0.25
animations:^{
_littleView.frame = CGRectOffset(_littleView.frame, 0, isVisible ? -(_littleView.frame.size.height-statusBarOffset) : (_littleView.frame.size.height-statusBarOffset));
_navBar.frame = CGRectMake(_navBar.frame.origin.x, _littleView.frame.origin.y + _littleView.frame.size.height, _navBar.frame.size.width, _navBar.frame.size.height);
CGFloat offSet = isVisible ? self.view.frame.size.height - _navBar.frame.size.height + statusBarOffset : self.view.frame.size.height - _navBar.frame.size.height - _littleView.frame.size.height + statusBarOffset;
_mainView.frame = CGRectMake(_mainView.frame.origin.x, _navBar.frame.origin.y + _navBar.frame.size.height, _mainView.frame.size.width, offSet);
isVisible = !isVisible;
}
completion:^(BOOL finished) {
// If view is not visible after animation, hide it
if (!isVisible) {
_littleView.hidden = !_littleView.hidden;
[[UIApplication sharedApplication] setStatusBarStyle: UIStatusBarStyleDefault];
}
}];
}
// Do stuff on tap
-(void)handleTap:(UIGestureRecognizer*)tap {
[[[UIAlertView alloc] initWithTitle:#"Test" message:#"You tapped !" delegate:nil cancelButtonTitle:#"OK" otherButtonTitles:nil] show];
}
#end
WARNING
This code is not perfect, but it basically replicates the effect you're looking for. You should work on it to make it behave as you wish. Also, this was implemented in a simple UIViewController, not embed in a UINavigationController, with a navigation bar I added manually. This code won't work in a UITableViewController or a UIViewController embed in a UINavigationController. It does not use autolayout, which you definitely should use under iOS 6/7.
Here is gif preview :