模拟京东首页导航条渐变

made in 小蠢驴的京东搜图.jpg

京东App的效果演示:

京东Demo演示.gif

京东App首页导航条 - 细节点:

  • 根据拖动,导航条的透明度渐变
  • 拖动到一定的位置,整个导航条的元素 (按钮&&搜索框)发生变化
  • 导航条的透明度在改变,但是上面的文字&&图片还是很清晰,未被透明度所影响
  • 顶部的时间工具条,在导航条颜色变化的时候,也会变化

搭建步骤

1.隐藏系统默认导航条,自定义导航条

因为要改变导航条透明度,改变导航条颜色等操作,系统默认的导航条实现起来比较困难。 思路:使用UIView创建自定义导航条,然后在自定义的UIView进行操作

隐藏导航条:

- (void)viewWillAppear:(BOOL)animated{
 
    [super viewWillAppear:animated];
    self.navigationController.navigationBarHidden = YES;
}

初步样式.gif

隐藏导航条之后,创建一个UIView,上面左右两个button,中间一个textField,就搭建起来了初步样式。

2.监听滚动,实现透明度变化

这里,就需要用到scrollView的代理方法 scrollViewDidScroll

1.png

监听scrollView的滚动方法,拿到tableView的偏移量(offset.y)的值 如图我们可以发现,往下滑动的时候,tableView的offset.y一直在递增

思路:tableView的offset.y 一直在变化,根据这个偏移量,动态设置导航条的透明度

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //约定 偏移量达到300的时候,就改变颜色
    static CGFloat tagOffsetY = 300.0;
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = offsetY / tagOffsetY;
    _navigationView.alpha = alpha;

}

初步导航条变化演示.gif

这里发现起始的时候,导航条是隐藏的,因为默认offsetY = 0,所以 导航条的alpha等于0,符合京东导航条(虽然目前看上去丑了点); ==>如果有需求是起始alpha=1,慢慢下拉会慢慢透明的,解决办法:_navigationView.alpha = 1 - alpha;

3.监听导航条透明度,当它等于1的时候,改变导航条颜色和按钮状态
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    static CGFloat tagOffsetY = 300.0;
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = offsetY / tagOffsetY;
    _navigationView.alpha = alpha;

    if (_navigationView.alpha >= 1) {
        
        //开始导航条变化
        _navigationView.backgroundColor = [UIColor darkGrayColor];
        _leftBtn.selected = YES;
        _rightBtn.selected = YES;
    }
}

导航条样式变化演示.gif

如图,我们发现导航条颜色&&按钮图片改变了 但是,变成darkGrayColor颜色之后,offsetY又往上移,导航条样式没变回来

    if (_navigationView.alpha >= 1) {
        
        //开始导航条变化
        _navigationView.backgroundColor = [UIColor darkGrayColor];
        _leftBtn.selected = YES;
        _rightBtn.selected = YES;
    }
    else{
        
        //默认导航条样式
        _navigationView.backgroundColor = [UIColor orangeColor];
        _leftBtn.selected = NO;
        _rightBtn.selected = NO;
    }
4.监听导航条透明度,动态设置顶部时间状态栏颜色
    if (_navigationView.alpha >= 1) {
        
        //开始导航条变化
        _statusBarStyle = UIStatusBarStyleLightContent;
    }
    else{
        
        //默认导航条样式
        _statusBarStyle = UIStatusBarStyleDefault;
    }
    //设置状态栏刷新
    [self setNeedsStatusBarAppearanceUpdate];
}

//设置顶部状态栏颜色
-(UIStatusBarStyle)preferredStatusBarStyle{
    
    return _statusBarStyle;
}

顶部工具条样式变化演示.gif

5.透明度变化的时候,图片 && 搜索框之类的透明度也跟着变化,不符合要求

对比京东Demo,发现问题所在

错误界面结构.png

如图所示,因为当前的两个按钮&&textField都是添加到naviView上,父控件naviView的透明度变化,其上面的子控件,也会变透明!不符合要求

正确界面结构搭建.png

  • 注意点我在图中说明了,一定要切记,放控件的naviView,一定不要成为 透明度会改变的背景View的子控件!不然透明度还是会受影响!
  • naviView弄成一个透明的View,添加到self.View上即可(在背景View之后添加)
  • 本质上,三个控件(左右两个按钮 && textField)都直接添加到self.view上也可以实现功能

最终演示.gif

demo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

27790
来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

17750
来自专栏HTML5学堂

让剁手党洞察物体细节,“放大镜”当之无愧

经常浏览淘宝、京东等一些商城网站,都会看到各种各样的页面交互效果,放大镜交互效果在商城网站中算是比较常见的。作为程序员的我们也会经常去考虑放大镜效果的实现方式,...

44480
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

12020
来自专栏zcqshine's blog

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

42840
来自专栏向治洪

React Native之ScrollView控件详解

概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,...

72070
来自专栏DannyHoo的专栏

iOS开发中让UIButton上的image进行360度旋转

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

11110
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

13620
来自专栏Porschev[钟慰]的专栏

鼠标点击层以外的地方层隐藏

根据去哪儿(http://www.qunar.com/)输入框点击按钮而写 实现功能效果: 1、点击按钮,相应层显示,点击层以外的部分层隐藏; 2、重复点击按钮...

19960
来自专栏進无尽的文章

UI篇-CATextLayer和 富文本的交融

CATextLayer适用于IOS或者MAC,比UIlablel 和 NSTextView 能做的事很多,可以这样说UIlablel是通过CATextLayer...

32110

扫码关注云+社区

领取腾讯云代金券