模拟京东首页导航条渐变

本是古典何须时尚 2021-12-21 12:09 269阅读 0赞

![Image 1][]

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

京东App的效果演示：

![Image 1][]

京东Demo演示.gif

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

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

--------------------

搭建步骤

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

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

隐藏导航条:

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

![Image 1][]

初步样式.gif

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

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

*这里，就需要用到scrollView的代理方法 `scrollViewDidScroll`了*

![Image 1][]

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;
    
    }

![Image 1][]

初步导航条变化演示.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;
        }
    }

![Image 1][]

导航条样式变化演示.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;
    }

![Image 1][]

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

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

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

![Image 1][]

错误界面结构.png

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

![Image 1][]

正确界面结构搭建.png

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

最终演示.gif

[demo][]

作者：小蠢驴打代码  
链接：https://www.jianshu.com/p/97a461b49045  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: 
[demo]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FminiLV%2FJDHomeNavigationDemo