仿天猫商城商品详情展示，导航栏滑动渐变快速集成工具

443 查看

好长时间没怎么更新简书了，最近也比较闲，在公司逛天猫商城的时候感到什么都买不起啊，只能仿着天猫商城商品展示界面自己动手实现了一下效果打发一下时间喽，我主要实现了两个效果。这个快速集成工具和demo已上传到我的github，感兴趣的可以star一下我。

2.完整实现了仿天猫购物商城商品展示界面

天猫商品详情展示效果

好了，效果看了就着手实现吧。

NavBarSliderTool.h 代码

NavBarSliderTool.h

NavBarSliderTool.m实现主要代码

//设置navigation bar 背景图片和阴影图片为一个空白图片

[viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];

[viewController.navigationController.navigationBar setShadowImage:[UIImage new]];

此时发现navBar下面有一条灰线，不要紧张
viewController.navigationController.navigationBar.clipsToBounds = YES;去除灰线即可
我一般设置tableView坐标是这样的

self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, kUIScreenHeight) style:UITableViewStylePlain];

//这个属性默认打开的，我们手动关闭

self.automaticallyAdjustsScrollViewInsets = NO;

//设置底部内边距为49防止被tabbar遮挡内容

self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 49, 0);

这时候我们NEW一个跟导航栏同样大小的view，放在最上层

_navBarBgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, 64)];

_navBarBgView.backgroundColor = self.barColor;

_navBarBgView.alpha = 0;

//放置在最上层

[viewController.view insertSubview:self.navBarBgView atIndex:viewController.view.subviews.count];

现在我们只需要监听scrollview的偏移进行相应操作即可

1	[scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

实现函数

在viewController中设置相应属性@property (nonatomic, strong)NavBarSliderTool * sliderTool;实现以下代码

_sliderTool = [[NavBarSliderTool alloc]init];

_sliderTool.barColor = [UIColor redColor];

[_sliderTool setViewController:self scrollview:self.tableView];

这时候这个简单的效果已经完成了，不懂得可以运行一下demo。

首先分析一下整个详情界面
首先出现在我们眼前的分为上下两个部分，上边是原生的，下边是一个webview，两者通过滑动操作，进行坐标的切换，轮换展示给用户。我们将上部原生tableview往下拉的时候，发现它下层还有一层视图，我是用tableview实现的。所以我实现的方式是整个界面大致分成两层，最底层tableView是一层，webview和另一个tableView是在同一层级。
如图

上下两个图层
上下两层视图切换的时候 titleview是滑动的，我为了方便titleView用了一个scrollview来实现上下打到切换效果实现如下：

设置导航栏titleView.png
上下两个视图切换效果我在函数- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate通过判断拖动结束之后的偏移量设置上下两个视图的坐标切换主要代码

上下视图切换效果.png
tableView上滑过程会有一个视图误差