how to add/show toolbar below status bar in iOS?

Question

in my iOS application, I am adding functionality for collapsing toolbar when table view scrolls. But when toolbar moves above along y axis, I got following result (toolbar contents mixing with status bar contents).

@interface ListViewController () <UITableViewDataSource, UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UILabel *labelPageTitle;
@property (weak, nonatomic) IBOutlet UITableView *listTableView;
@property (nonatomic) CGFloat previousScrollViewYOffset;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *toolbarTop;

@end

@implementation ListViewController

//- (void)scrollViewDidScroll:(UIScrollView *)scrollView
//{
//    CGRect frame = self.toolbars.frame;
//    CGFloat size = frame.size.height - 21;
//    CGFloat framePercentageHidden = ((20 - frame.origin.y) / (frame.size.height - 1));
//    CGFloat scrollOffset = scrollView.contentOffset.y;
//    CGFloat scrollDiff = scrollOffset - self.previousScrollViewYOffset;
//    CGFloat scrollHeight = scrollView.frame.size.height;
//    
//    NSLog(@"scrollView.frame - %@", NSStringFromCGRect(scrollView.frame));
//    NSLog(@"scrollView.contentInset - %@", NSStringFromUIEdgeInsets(scrollView.contentInset));
//    
//    CGFloat scrollContentSizeHeight = scrollView.contentSize.height + scrollView.contentInset.bottom;
//    
//    if (scrollOffset <= -scrollView.contentInset.top) {
//        frame.origin.y = 20;
//    } else if ((scrollOffset + scrollHeight) >= scrollContentSizeHeight) {
//        frame.origin.y = -size;
//    } else {
//        frame.origin.y = MIN(20, MAX(-size, frame.origin.y - scrollDiff));
//    }
//    
//    [self.toolbars setFrame:frame];
//    [self updateBarButtonItems:(1 - framePercentageHidden)];
//    self.previousScrollViewYOffset = scrollOffset;
//}
//
//- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
//{
//    [self stoppedScrolling];
//}
//
//- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
//                  willDecelerate:(BOOL)decelerate
//{
//    if (!decelerate) {
//        [self stoppedScrolling];
//    }
//}
//
//- (void)stoppedScrolling
//{
//    CGRect frame = self.navigationController.navigationBar.frame;
//    if (frame.origin.y < 20) {
//        [self animateNavBarTo:-(frame.size.height - 21)];
//    }
//}
//
//- (void)updateBarButtonItems:(CGFloat)alpha
//{
//    self.buttonDismiss.customView.alpha = alpha;
//    self.labelPageTitle.alpha = alpha;
//    self.toolbars.tintColor = [self.toolbars.tintColor colorWithAlphaComponent:alpha];
//}
//
//- (void)animateNavBarTo:(CGFloat)y
//{
//    [UIView animateWithDuration:0.2 animations:^{
//        CGRect frame = self.toolbars.frame;
//        CGFloat alpha = (frame.origin.y >= y ? 0 : 1);
//        frame.origin.y = y;
//        [self.toolbars setFrame:frame];
//        [self updateBarButtonItems:alpha];
//    }];
//}

#pragma mark - view controllers life cycle methods

- (void)viewDidLoad {
    [super viewDidLoad];
    if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
        self.edgesForExtendedLayout = UIRectEdgeNone;

    self.extendedLayoutIncludesOpaqueBars=NO;
    self.automaticallyAdjustsScrollViewInsets=NO;

    [self.view layoutIfNeeded];

    _toolbarTop.constant = -34;
    [self.listTableView setDataSource:self];
    [self.listTableView setDelegate:self];

    [Utils updateLabelFontSize:self.labelPageTitle ForInitialHeight:22 andInitialSize:21];

    [self.labelPageTitle setText:@"My Category"/*self.productCategory*/];
}

[UIBarPositioningDelegate](https://developer.apple.com/reference/uikit/uibarpositioningdelegate) — Desdenova, Dec 08 '16 at 07:50
you shold use `navigation controller` or `UIView` if you don't want navigationbar! why are you using `toolbar` ? — Ketan Parmar, Dec 08 '16 at 07:51
@0yeoj & Lion - in my app I have some complex behaviour of view controller containments. So I preferably avoid using navigation controller — appleBoy21, Dec 08 '16 at 07:52
with which element you have pinned your `top constraint` ??? I mean the constrain : `toolbarTop` — Ketan Parmar, Dec 08 '16 at 07:56
@Sanket Delegate your tool bar to your view controller. Something like `myToolbar.delegate = self`, then implement the linked delegate method and return `. topAttached` for bar position. — Desdenova, Dec 08 '16 at 07:57
make it from `super view` instead `TopLayoutGuide.Bottom` and your issue will be solved i think! so your constraint should be bettween : `yourToolbar.top and your Superview.Top` — Ketan Parmar, Dec 08 '16 at 08:03
@Lion - sir can you please explain me. I didn't get the meaning of "from superview" — appleBoy21, Dec 08 '16 at 08:06
@Lion - Sir I tried this but not being able to gind option for Superview.Top. I have attached one screenshot. Please go through it once. My toolbar is subview of main view — appleBoy21, Dec 08 '16 at 08:15
remove this constraint first and pinned again! at that time you will get option! your constraint should be like as i have explain above and your constant should be `0`! — Ketan Parmar, Dec 08 '16 at 08:17
@Lion - Sir, I only able to apply constraints with respect to top layout guide. See above screenshot. Superview.top is not available — appleBoy21, Dec 08 '16 at 08:22

score 3 · Accepted Answer · edited May 23 '17 at 12:13

Finally after playing for 4-5 hours, I come across the solution. First of all thanks to @Lion & @Desdenova for help.

Here is the link where I found some hint.

iOS8: How do I make statusBar opaque after navigationBar is hidden using hidesBarsOnSwipe?

as per suggestions in the post I just assigned one UIView at status bar frame with same color of toolbar tint.

Here is my updated code in view did load. Remaining is the same

- (void)viewDidLoad {
    [super viewDidLoad];
//    if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
//        self.edgesForExtendedLayout = UIRectEdgeNone;
//    
//    self.extendedLayoutIncludesOpaqueBars=NO;
//    self.automaticallyAdjustsScrollViewInsets=NO;

    [self.view layoutIfNeeded];

    _toolbarTop.constant = -34;
    [self.listTableView setDataSource:self];
    [self.listTableView setDelegate:self];

    //let topBar = UIView(frame: UIApplication.sharedApplication().statusBarFrame)
    UIView *statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
    statusBarView.backgroundColor = self.view.backgroundColor;
    [self.view addSubview:statusBarView];

    [Utils updateLabelFontSize:self.labelPageTitle ForInitialHeight:22 andInitialSize:21];

    [self.labelPageTitle setText:@"My Category"/*self.productCategory*/];
}

Final Result

score 0 · Answer 2 · answered Dec 08 '16 at 08:32

0

Do not pin constraint from TopLayoutGuide.Bottom, instead pin it with superview's top. You your toolbar's top should be pinned with superview's top. Check the below screenshot,

answered Dec 08 '16 at 08:32

Ketan Parmar

25,426
9
43
67

Yes sir now I got. This time I placed correctly. but the same problem still exists. – appleBoy21 Dec 08 '16 at 08:53
What you want to achieve ? do you want to hide tool bar ? or just want to drag your tool bar up? and what is the height of your toolbar and what is the `y` position of your toolbar ? – Ketan Parmar Dec 08 '16 at 09:40
myToolbarFrame = ((0, 20),(widthOfView, 44)) – appleBoy21 Dec 08 '16 at 09:53
for achieving my purpose, I'm following this link http://stackoverflow.com/questions/19819165/imitate-ios-7-facebook-hide-show-expanding-contracting-navigation-bar but I am changing the code for toolbar instead of navigation controller's navigation bar – appleBoy21 Dec 08 '16 at 09:56
I want to clone facebook iOS app's toolbar's behaviour. On scroll, I want "hide/show the toolbar at a rate that is proportional to the rate of the drag". Also I want to "fade the toolbar and its items as the bar shrinks." But when toolbar moves upwards, its contents mixed with status bar contents – appleBoy21 Dec 08 '16 at 09:58
replace " _toolbarTop.constant = -34;" with `"_toolbarTop.constant = -64;" – Ketan Parmar Dec 08 '16 at 10:01
itmoving my toolbar from out of the scope of superview. but when I move slowly, I can see the effect of overlapping toolbar with status bar – appleBoy21 Dec 08 '16 at 10:06
then what you want ? do you not want to hide or moved it completely ? – Ketan Parmar Dec 08 '16 at 10:13
I want to clone facebook iOS app's toolbar's behaviour. On scroll, I want "hide/show the toolbar at a rate that is proportional to the rate of the drag". Also I want to "fade the toolbar and its items as the bar shrinks." But when toolbar moves upwards, its contents mixed with status bar contents. So I want to put toolbar below status bar – appleBoy21 Dec 08 '16 at 10:16
Sir Finally found some workaround to this problem. I have posted in answers section. Please have a look. If any corrections or further problems in future with this solution, then please let me know – appleBoy21 Dec 08 '16 at 11:33

how to add/show toolbar below status bar in iOS?

2 Answers2