IOS 仿饿了么首页导航栏 渐变处理

在项目中 很多时候我们需要 真的某个界面中的导航栏进行隐藏处理,比如饿了么的首页 导航栏默认隐藏 往上滚动 导航栏即显示

如下 效果:


我这个的做法是 首先把导航栏 隐藏掉 然后 自定义 一个导航栏  自定义导航栏默认透明度为零  然后根据 tableVIew 滚动时间 进行透明度改变:

#pragma mark --- 初始化导航栏

- (void)initNavigationView{


    self.nav = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kMainScreenOfWidth, 64)];

    self.nav.backgroundColor = [UIColor whiteColor];

    self.nav.alpha=0;

    [self.viewaddSubview:self.nav];

    self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(10, 20,kMainScreenOfWidth - 80, 44)];

    self.searchBar.placeholder = @"输入商家,商品名称";

    UITextField* searchField = [self.searchBarvalueForKey:@"searchField"];

    if(searchField){

        [searchFieldsetBackgroundColor:[UIColorcolorWithHexRGB:@"EAEAEA"]];

        searchField.layer.cornerRadius=18;//设置圆角具体根据实际情况来设置

        searchField.layer.masksToBounds=YES;

    }

    for(inti =  0;i <_searchBar.subviews.count;i++){

        UIView* backView =_searchBar.subviews[i];

        if([backViewisKindOfClass:NSClassFromString(@"UISearchBarBackground")] ==YES) {

            [backViewremoveFromSuperview];

            [_searchBar setBackgroundColor:[UIColor clearColor]];

            break;

        }else{

            NSArray* arr =_searchBar.subviews[i].subviews;

            for(intj =0;j

                UIView* barView = arr[i];

                if([barViewisKindOfClass:NSClassFromString(@"UISearchBarBackground")] ==YES) {

                    [barViewremoveFromSuperview];

                    [_searchBar setBackgroundColor:[UIColor clearColor]];

                    break;

                }

            }

        }

    }

    [self.nav addSubview:self.searchBar];


    UIButton* signBtn  = [[UIButtonalloc]initWithFrame:CGRectMake(self.nav.gq_width-44-10,self.searchBar.gq_top,44,44)];

    [signBtnsetTitle:@"sign"forState:0];

    [signBtnsetTitleColor:[UIColor blackColor] forState:0];

    [self.navaddSubview:signBtn];


    UIButton* messageBtn = [[UIButtonalloc]initWithFrame:CGRectMake(signBtn.gq_left-10-44, signBtn.gq_top,44,44)];

    [messageBtnsetTitle:@"mess"forState:0];

    [messageBtnsetTitleColor:[UIColor blackColor] forState:0];

    [self.navaddSubview:messageBtn];

    self.searchBar.gq_width = messageBtn.gq_left -10;

}


这里是改变 自定义导航栏 透明度 根据滚动距离  设置透明度:

#pragma mark - scrollview

- (void)scrollViewDidScroll:(UIScrollView*)scrollView {

    NSLog(@"%f", scrollView.contentOffset.y);

    CGFloatoffset = scrollView.contentOffset.y;

    CGFloatalpha = offset *1/136.0;  // (200 - 64) / 136.0f

    if(alpha >=1) {

        alpha =1;

    }

    self.nav.alpha= alpha;

}


顺便给大家 奉上Demo 地址:https://github.com/junyunuo/HideNavigation.git

就上面两个步骤 就已经实现了  导航栏 渐变的效果了  有任何问题 请咨询我:805092132@qq.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。