Navigation Bar 透明動畫實現(xiàn)

目前很流行流行的UI效果，監(jiān)聽滾動,導航條漸隱的UI效果實現(xiàn)庄新，很多APP都有實現(xiàn)鞠眉，比如美團外賣的首頁模塊，新浪微博的個人詳情頁面择诈。

盜的效果圖

設置self.view全屏

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self configVCFullScreen];
    
    ... 
}

/// 設置 self.view 全屏
- (void)configVCFullScreen
{
    self.edgesForExtendedLayout = UIRectEdgeAll;
    self.extendedLayoutIncludesOpaqueBars = YES;
    self.modalPresentationCapturesStatusBarAppearance = YES;
    self.automaticallyAdjustsScrollViewInsets = NO;
}

設置 Naivgation Bar 的透明度

- (void)configNavigationBar
{
    ...
    
    // KVO 監(jiān)聽 offset 械蹋，計算透明圖    
    @weakify(self);
    [[[RACObserve(self.tableView, contentOffset) takeUntil:[self rac_signalForSelector:@selector(viewWillDisappear:)]]filter:^BOOL(NSValue *value) {
        return value.CGPointValue.y <= 500;
    }] subscribeNext:^(NSValue *value) {
        @strongify(self);
        CGFloat alpha = MAX(0, self.tableView.contentOffset.y / ([UIScreen width] / 16.0f * 9.0f - 64));
        [self setNavigationBarAlpha:alpha];
          
          ...
          
    }];
}

- (void)setNavigationBarAlpha:(CGFloat)alpha
{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor colorWithWhite:1.0f alpha:alpha]] forBarMetrics:UIBarMetricsDefault];
}

去掉 Navigation Bar 的底陰影線

/// 去掉 navigation bar 底線
self.navigationController.navigationBar.shadowImage = [UIImage new]; 

如何設置 Status Bar的顏色

// 設置Status Bar 字體為黑色
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault animated:YES];

// 設置Status Bar 字體為白色
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

完整細節(jié)代碼

#pragma mark - View Controller Life Cycle
- (void)viewDidLoad
{
    [super viewDidLoad];    
    self.tableView.forbidAutoGa = YES;
    // 導航欄透明
    [self configVCFullScreen];
    
    ...
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    // 設置透明度相關
    [self configNavigationBar];
    
    ...
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    CGFloat alpha = MAX(0, self.tableView.contentOffset.y / ([UIScreen width] / 16.0f * 9.0f - 64));
    if (alpha < 0.5) {
        // viewWillAppear 里面更改沒有效果，可能是我們公司業(yè)務的父類有處理
        [self setupLightStyleAppearance];
    }
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    //頁面消失前恢復之前的設置羞芍，避免對其他頁面造成影響
    [self resumeNavigationBar];
}

#pragma mark - Navigation Bar config

- (void)configNavigationBar
{
    if (!_oldShadowImage) {
        self.oldShadowImage = [self.navigationController.navigationBar shadowImage];
    }
    if (!_oldBackImage && [self.navigationItem.leftBarButtonItem.customView isKindOfClass:[UIButton class]]) {
        self.backBtn = self.navigationItem.leftBarButtonItem.customView;
        self.oldBackImage = self.backBtn.imageView.image;
    }
    
    @weakify(self);
    [[[RACObserve(self.tableView, contentOffset) takeUntil:[self rac_signalForSelector:@selector(viewWillDisappear:)]]filter:^BOOL(NSValue *value) {
        return value.CGPointValue.y <= 500;
    }] subscribeNext:^(NSValue *value) {
        @strongify(self);
        CGFloat alpha = MAX(0, self.tableView.contentOffset.y / ([UIScreen width] / 16.0f * 9.0f - 64));
        [self setNavigationBarAlpha:alpha];
        [self setupTopBarsAppearanceWithAlpha:alpha];
    }];
}

- (void)configVCFullScreen
{
    self.edgesForExtendedLayout = UIRectEdgeAll;
    self.extendedLayoutIncludesOpaqueBars = YES;
    self.modalPresentationCapturesStatusBarAppearance = YES;
    self.automaticallyAdjustsScrollViewInsets = NO;
}

- (void)setNavigationBarAlpha:(CGFloat)alpha
{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UIColor colorWithWhite:1.0f alpha:alpha]] forBarMetrics:UIBarMetricsDefault];
}

- (void)setupTopBarsAppearanceWithAlpha:(CGFloat)alpha
{
    if (alpha < 0.5 && self.navigationController.navigationBar.shadowImage == self.oldShadowImage) {
        [self setupLightStyleAppearance];
    } else if ( alpha > .5 && self.navigationController.navigationBar.shadowImage != self.oldShadowImage) {
        [self setupDarkStyleAppearance];
    }
}

- (void)setupLightStyleAppearance
{
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];//!< statusbar
    self.navigationController.navigationBar.shadowImage = [UIImage new]; //!< navigation bar 底線
    self.title = @"";
    
    [self.backBtn setImage:[UIImage imageNamed:R_hotel_title_icon_back_light] forState:UIControlStateNormal];
    [self.buttonForShare setImage:[UIImage imageNamed:R_hotel_title_icon_share_light] withHighLightStyle:ButtonHighLightStyleDark];
}

- (void)setupDarkStyleAppearance
{
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault];
    self.navigationController.navigationBar.shadowImage = self.oldShadowImage;
    self.title = self.product.title;
    
    [self.backBtn setImage:self.oldBackImage ? : [UIImage imageNamed:@"detail_topbar_icon_back"] forState:UIControlStateNormal];
    [self.buttonForShare setImage:[UIImage imageNamed:R_Title_icon_Share] withHighLightStyle:ButtonHighLightStyleDark];
}

- (void)resumeNavigationBar
{
    [self setNavigationBarAlpha:1];
    [self.navigationController.navigationBar setShadowImage:self.oldShadowImage];
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleDefault animated:YES];
}