好长时间没怎么更新简书了，最近也比较闲，在公司逛天猫商城的时候感到什么都买不起啊，只能仿着天猫商城商品展示界面自己动手实现了一下效果打发一下时间喽，我主要实现了两个效果。这个快速集成工具和demo已上传到我的github，感兴趣的可以star一下我。
- scrollview滑动导航栏渐变效果，这个效果说不上新鲜，我就简单封装了个工具类，方便大家快速集成这种效果吧
2.完整实现了仿天猫购物商城商品展示界面
天猫商品详情展示效果
好了，效果看了就着手实现吧。
一.导航栏滑动效果 NavBarSliderTool中实现主要代码
NavBarSliderTool.h 代码
NavBarSliderTool.h
NavBarSliderTool.m实现主要代码
|
1 2 3 |
//设置navigation bar 背景图片和阴影图片为一个空白图片 [viewController.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact]; [viewController.navigationController.navigationBar setShadowImage:[UIImage new]]; |
此时发现navBar下面有一条灰线，不要紧张
viewController.navigationController.navigationBar.clipsToBounds = YES;去除灰线即可
我一般设置tableView坐标是这样的
|
1 2 3 4 5 |
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，放在最上层
|
1 2 3 4 5 |
_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;实现以下代码
|
1 2 3 |
_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上滑过程会有一个视图误差
tableVIew向上滑动时改变约束进行视差动画.png
代码如下
|
1 2 3 4 5 6 7 8 9 |
contraint = contraint * .6; if (contraint <= 0) { contraint = 0; } [self layoutIfNeeded]; [UIView animateWithDuration:.1 animations:^{ _midViewTopContraint.constant = -contraint; [self layoutIfNeeded]; }]; |
注：约束动画 需要调用[self layoutIfNeeded];才会有效
- 底层视图出现后 有一个毛玻璃效果
毛玻璃效果.png
实现代码如下
|
1 2 3 4 |
//设置模糊效果 UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, imageView.width, imageView.height)]; toolbar.barStyle = UIBarStyleBlackTranslucent; [imageView addSubview:toolbar]; |
差不多主要功能介绍完毕了，因为写的比较匆忙吧，代码质量还有待优化，欢迎大家提出宝贵意见。
