淘宝，天猫，大厂出品APP确实在很多地方体验非常棒，所以众多产品和UI设计争先模仿，OK前几天一个朋友正好有这样的需求就在问我该怎么做，给人嘴上说了一些思路但是一两句说不明白，思索片刻觉得写个demo，以一篇文章记录我们开发的皮尺生涯.....
1.分析天猫搜索
我们先看下Android版本天猫搜索的UI图
头部搜索部分，在下面瀑布流的view滑动的时候上滑动一段距离的时候隐藏，下滑的的时候显示。同时右下角的“喵小秘”和“顶部”的上下移动是界面刚渲染的时候都显示，当瀑布流的view滑动喵小秘隐藏的时候，“顶部”隐藏，滑动到头部的时候又显示。OK就是这样的一个UI了，至于瀑布流图片的伸缩，需要的朋友可以看我的上一篇文章的介绍。链接地址 http://www.jianshu.com/p/89f22b22c75b
现在开始我们先搭建基础的界面和弄数据出来，这个就不详细描述了，大家自己搞一些数据就好了。现在让我们先从xml开始设计，以下是我的demo中的xml
好了，开始界面编写，有了xml，我们的界面架子就出来了，朋友们可以看出来，我的想法，是让瀑布流view和头部在初始化的时候，让瀑布流view下移动到头部搜索布局之下，这样的话就不用写恶心的header了。个人还是不喜欢在瀑布流头部加上那么多东西，无奈有些时候不是我们开发能左右产品的...说多了说多了，开始正题。
1. 首先让我们的界面在手势滑动的时候监控距离上下滑动，滑动到一定距离的时候可以让view执行我们的上下移动。so，用到这个啦，getScaledTouchSlop表示一个距离，代表滑动的时候，手势的移动要大于这个距离才会开始移动我们的控件。如果小于这个距离就不会触发移动控件。
mTouchSlopDistance= ViewConfiguration.get(this).getScaledTouchSlop();
2.数据渲染和简单的界面实例化就不细说了，现在我们考虑一下一开始进入的时候，界面上瀑布流移动一段距离，这个距离就是头部searchView的高度，这里呢就用ObjectAnimator属性动画，让属性动画作用在一个对象上，并且明确的指定我们要更改的属性，执行我们想要的操作。
可以很清楚的看出来我的意图吧,在我们监听AbsListView上下滑动的时候标记一个变量控制头部和AbsListView的移动动画，用最简单的方式，完成我们的需求，是我最喜欢的，少写代码什么的是最棒的。做一只聪明的懒程序猿
有了移动的动画，那么像我们上面所说的现在监听一下手势上下的滑动，滑动距离大于我们所写的最小距离的时候就执行上面的方法。
好了，到这里我们的这个demo就差不多了，上下滑动的时候当滑动的距离大于mTouchSlopDistance=10/2的时候就执行我们相应的动画，当然这个距离可以随意设置。哦，对了，我们还要搞一个喵小咪和回到顶部的东西。仔细看了下天猫的操作和动画，分析一下第一次进入的时候，没有显示顶部，在一屏幕左右的时候不显示顶部，超过一屏幕的时候手势往上，屏幕内容往上滚动显示顶部，小于一屏幕的时候隐藏顶部。OK，那我就来做一下这个。
可以看出来我的想法是当滚动的距离小于1000的时候，并且在可以滚动，没有显示的时候调用动画方法，移动底部的两个按钮的布局。这个isCanAnima变量我用来表示动画执行完了，可以再次执行动画。isShow这个变量表示底部的两个按钮中顶部按钮的显示情况。
方法很简单，仅供大家参考，这个demo中的写法，如果在项目中的话写的还是希望大家更严谨一些好。好了，在我们一开始进入到这个界面的时候，我们应该执行以下这个layoutBottomAnimator的方法，让顶部初始化的时候不显示，同时调用showHideTitleBar这个我们头部移动的方法，让瀑布流移动到头部收索框的下面，所以在onCreate。里面调用一下我们的方法就好。
showHideTitleBar(true);
layoutBottomAnimator(true);
对咯还有一个筛选的侧边栏view,我就随便写了一下用的是PopupWindow，重新定义一下出入的动画就可以了，就不上代码了。好了到这里就差不多结束了，现在让我们看一下实际效果吧。
感谢能看到这里的朋友，有段时间没有更新文章，一是工作比较忙，二是自己的事情比较多。不过还是会抽出时间坚持写些文章记录开发中的点点滴滴。喜欢的朋友点个赞，打赏什么的就随意了，一分也是爱❤️。。。。。
