仿天猫、淘宝的侧滑菜单栏
2018-01-30 本文已影响165人
码工人生
最近项目需求,需要写一个筛选功能的侧滑菜单栏。像京东、淘宝、天猫都有这种效果,尤其天猫的效果最好,于是就按照天猫的效果封装了一个侧滑菜单栏工具。
先看下天猫的点击右上角筛选,会有这个侧滑效果:
a1.gif
然后Demo基本实现了和天猫类似的功能:
a2.gif
功能看似简单,但打开天猫app,然后查看它的筛选功能,背景色的变化,以及侧滑效果,还是有很多细节需要注意的。
层级结构分为三层:
a3.png
最下面是一个ViewController ,整个可滑动控件是一个View,这个View有黑色半透明背景,View里有个子ContentView。半透明view加入了Tap手势,ContentView里加了Pan手势。使用起来,也很简单。
a4.png
另外,实现这个功能时,我思考了几种方法:
1.侧滑的View使用ScrollView,这样滑动效果自动就能实现;
2.右侧滑动部分使用controller,这样利用navigationController自带的返回手势来实现;
3.但以上两种都有弊端,于是我选择目前这种,自定义一个View,添加pan手势和tap手势实现。
下载运行后,本demo对应路径如图: a7.jpg