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

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

  1. scrollview滑动导航栏渐变效果,这个效果说不上新鲜,我就简单封装了个工具类,方便大家快速集成这种效果吧

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

天猫商品详情展示效果

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

一.导航栏滑动效果 NavBarSliderTool中实现主要代码

NavBarSliderTool.h 代码

131663049-e5b855fe93c9e9a1

NavBarSliderTool.h

NavBarSliderTool.m实现主要代码

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

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

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

实现函数

141663049-f3c012bae47559d7

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

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


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

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

    151663049-4335f61aa60d11a3
    上下两个图层
  2. 上下两层视图切换的时候 titleview是滑动的,我为了方便titleView用了一个scrollview来实现上下打到切换效果实现如下:
    161663049-8308f8c66531ac42
    设置导航栏titleView.png
  3. 上下两个视图切换效果 我在函数- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate通过判断拖动结束之后的偏移量设置上下两个视图的坐标切换 主要代码
    171663049-783b6e94f32cea12

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

 

181663049-6559ebe126a31bd3

tableVIew向上滑动时改变约束进行视差动画.png

代码如下

注:约束动画 需要调用[self layoutIfNeeded];才会有效

  1. 底层视图出现后 有一个毛玻璃效果

191663049-08ae14efec393979毛玻璃效果.png

实现代码如下

差不多主要功能介绍完毕了,因为写的比较匆忙吧,代码质量还有待优化,欢迎大家提出宝贵意见。

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部