上划渐变导航条颜色

1.功能需求

刚进入页面导航条背景为透明色,上划一定距离改变导航条颜色为白色(渐变)

2.功能实现

2.1 在viewWillAppera中实现导航条背景色透明

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    // 让控件从(0,0)开始
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:0];
}
2.2 在scrollView代理方法 scrollViewDidScroll中实现随着滚动改变导航栏颜色透明度
//只要滚动了就会触发
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;{
    // 动态更新navigationBar的颜色
    CGFloat offsetY = scrollView.contentOffset.y;
    if (offsetY > NAVBAR_CHANGE_POINT) {
        CGFloat alpha = MIN(1, 1 - ((NAVBAR_CHANGE_POINT + NavigationHeight - offsetY) / NavigationHeight));
        [self.navigationController.navigationBar setBackgroundImage:[FFCommonView createImageWithColor:[Color_NavigationBar colorWithAlphaComponent:alpha]] forBarMetrics:UIBarMetricsDefault];
        if (alpha == 1) {
            self.navigationController.navigationBar.translucent = NO;
        }else{
            self.navigationController.navigationBar.translucent = YES;
        }
        
    } else {
        [self.navigationController.navigationBar setBackgroundImage:[FFCommonView createImageWithColor:[Color_NavigationBar colorWithAlphaComponent:0]] forBarMetrics:UIBarMetricsDefault];
    }
}

    ps:

    Navbar_change_point为导航条开始渐变色的距离;透明度变为1的时候设置translucent属性为NO

 2.3 在viewWillDeillDisappear中还原之间的一些设置

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.navigationController.navigationBar.translucent = NO;
    //界面离开的时候重新设置回原来的样式
    [self.navigationController.navigationBar setBackgroundImage:[FFCommonView createImageWithColor:Color_NavigationBar] forBarMetrics:UIBarMetricsDefault];
}




上划渐变导航条颜色_第1张图片上划渐变导航条颜色_第2张图片






你可能感兴趣的:(iOS开发)