ios 自定义导航栏添加上滑下滑渐变

爱哭的僵小鱼 · 简书 · · 2018-07-11 12:47

gif图片.gif

最近因为项目需要导航栏上滑下滑出现渐变的效果，话不多说，直接上代码

1首先我是自定义了一个导航栏，

@interface ZCTopNavView : UIView

2在.m文件初始化下view上面的按钮,定义了三个按钮

/* 左边Item */
@property (strong , nonatomic)UIButton *leftItemButton;
/* 右边Item */
@property (strong , nonatomic)UIButton *rightItemButton;
/* 右边第二个Item */
@property (strong , nonatomic)UIButton *rightRItemButton;

3.在.m文件里添加2个通知，用在viewcontroller里面接受通知


    //滚动到详情
    CreateWeakSelf;
    _dcObserve = [[NSNotificationCenter defaultCenter]addObserverForName:@"SHOWTOPTOOLVIEW" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        weakSelf.topCenterTitleImage.hidden = NO;
        [weakSelf.leftItemButton setBackgroundImage:[UIImage imageNamed:@"pplm_jt"] forState:0];
        [weakSelf.rightItemButton setBackgroundImage:[UIImage imageNamed:@"xq_fx"] forState:0];
        [weakSelf.rightRItemButton setBackgroundImage:[UIImage imageNamed:@"xqsy"] forState:0];
    }];
    
    _dcObserve = [[NSNotificationCenter defaultCenter]addObserverForName:@"HIDETOPTOOLVIEW" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        weakSelf.topCenterTitleImage.hidden = YES;
        [weakSelf.leftItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_zjt"] forState:0];
        [weakSelf.rightItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_fx"] forState:0];
        [weakSelf.rightRItemButton setBackgroundImage:[UIImage imageNamed:@"spxq_fh"] forState:0];
    }];

4.我在viewcontroller里面简单写了个webview 你也可以写成uitableview或者uiscrollerview。。继承下代理方法，

#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat alpha ;
    CGFloat alp;
     //+20是状态栏的高度 因为web是全屏显示，/300是 距离，就是滑动到y轴为多少是 透明度为1
        alpha = (scrollView.contentOffset.y+20)/300;
      /*因为view上面分为2个动画效果的 
      一个当view alpha为0的时候 上面的button视图，
       随着alpha增加 而消失，当消失的快看不见的时候
      button的第二视图开始从模糊显示出来，最终都为1
*/
      alp = (scrollView.contentOffset.y+20)/200;
    
    topToolView.backgroundColor= [UIColor colorWithRed:250 green:250 blue:250 alpha:alpha];
    topToolView.leftItemButton.alpha = 1-alp;
    topToolView.rightItemButton.alpha = 1-alp;
    topToolView.rightRItemButton.alpha = 1-alp;
//临界点，就是滑动到这距离时好第一视图消失，第二视图开始显示
    if ((scrollView.contentOffset.y)>=180) {
        
        [[NSNotificationCenter defaultCenter]postNotificationName:@"SHOWTOPTOOLVIEW" object:nil];
        CGFloat alphaj ;
        
            alphaj = (scrollView.contentOffset.y-100)/200;
        
        
        topToolView.leftItemButton.alpha = alphaj;
        topToolView.rightItemButton.alpha = alphaj;
        topToolView.rightRItemButton.alpha = alphaj;
        topToolView.topCenterTitleImage.alpha = alphaj;
        
        
    }else {
        [[NSNotificationCenter defaultCenter]postNotificationName:@"HIDETOPTOOLVIEW" object:nil];
    }
}

最后附上demo
github下载地址
不麻烦的话可以给个 star
你们的star 是我进步的动力

有什么问题可以私信我，
欢迎叨扰，
非诚勿扰谢谢

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博