iOS 之导航渐变,并且跳转返回保持滑动状态

turboksiOS251

导航刚开始进入为透明,根据我们的滑动确定要显示的背景色。先看一下效果图:


2361104-9f6f1c7d07d4dc5c.webp

一:创建demo,将3个界面添加到控制器中,此过程比较简单代码就不上了。

二:在第一页的viewDidload中将当前页面的导航设置为设置为透明状态,以及去除底部的黑线。

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; 
[self.navigationController.navigationBar setShadowImage:[UIImage new]];

三:如果我们直接在滚动过程中设置navigationBar的背景色,顶部状态栏是不会改变的、PASS!!所以我们可以为self.navigationController.view设置一个背景view用来实现我们的变化效果:

- (UIView *)navView{
    if (_navView == nil) { 
 _navView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0,self.navigationController.navigationBar.bounds.size.width,self.navigationController.navigationBar.bounds.size.height+20)];      
    [self.navigationController.view insertSubview:_navView belowSubview:self.navigationController.navigationBar];  
  }  
  return _navView;
}


四:接下来我们就需要使用scrollview的方法来动态处理颜色变化:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    alpha = scrollView.contentOffset.y/600;  
  if (alpha > 1) {    
    alpha = 1;  
  }  
  if (scrollView == _tab) {      
  [self navView].backgroundColor = [UIColor colorWithRed:0.2 green:0.5 blue:0.7 alpha:alpha];  
  }
}

到了这里,我们的滚动颜色变化基本完成了,但是我们在开发中不仅仅这样,我们可能在这一个界面需要push出新的界面或者通过tabbar去选择别的界面。所以,为了保持当前界面的状态,我们需要在界面出现或者消失的时候做一些特定的设置。

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self navView].backgroundColor = [UIColor colorWithRed:0.2 green:0.5 blue:0.7 alpha:alpha];
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self navView].backgroundColor = [UIColor orangeColor];
}

ok、结束!附上demo的链接:

https://github.com/MrTiemo/navigationBar

标签: UI

相关文章

iOS一行代码搞定自定义AlertView

iOS一行代码搞定自定义AlertView

效果图走一走:使用方式: pod  'KSAlertView'举例使用,单按钮Alert: [[[KSAlertView alloc] initWithT...

iOS图片圆角设置

iOS图片圆角设置

    UIImageView * vv = [[UIImageView alloc] initWithFrame:CGRectMake(50, 500, 250, 25...

暗黑模式适配

暗黑模式适配

先上效果图:正常暗黑一:首先确定自己的主题色比如正常模式下显示紫色、暗黑显示下显示灰色。二:在Assets中新建颜色:创建颜色进行设置:设置颜色左边是正常模式的颜色、右边是暗黑模式下三:举例使用&nb...