如何在 iOS 的状态栏下方添加/显示工具栏？

Question

在我的 iOS 应用程序中，我添加了在表格视图滚动时折叠工具栏的功能。但是当工具栏沿 y 轴移动到上方时，我得到了以下结果（工具栏内容与状态栏内容混合）。

@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

在玩了 4-5 个小时后，我终于找到了解决方案。首先感谢@Lion 和@Desdenova 的帮助。

这是我找到一些提示的链接。

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

根据帖子中的建议，我刚刚在状态栏框架上分配了一个 UIView，具有相同颜色的工具栏色调。

这是我在视图中加载的更新代码。剩下的都是一样的

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

最终结果

Answer 2

不要从TopLayoutGuide.Bottom 固定约束，而是用superview's top 固定它。你的toolbar's top 应该用superview's top 固定。看看下面的截图，