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*/];
}

Answer 1

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

Answer 2

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,