模拟京东首页导航条渐变

2018-02-27 11:11:03来源:https://www.jianshu.com/p/97a461b49045作者:小蠢驴打代码人点击

分享





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








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台