教你如何在GridView的Item中实现“仿携程首页的按钮”点击缩放效果

    “携程在手，说走就走”——近年来，携程APP已经随着邓超的这句广告词大量出现在很多都市人的手机程序安装列表中。操作过携程的朋友都知道它的主页的按钮风格和点击缩放的动画吧~如下图所示：

    不得不说，这个布局很简洁大方有木有？！这个点击效果带来的用户体验真的很酸爽有木有！它的点击反馈设计思路为：用户按下去按钮缩小（或者说是陷进去），手指释放，按钮就还原。

    由于这点击体验效果实在魔性，所以我在使用GridView的时候，也突发奇想，想在用户点击Item的时候，也出现类似的动画。于是经过一段时间的设计、编写、修改、完善……终于实现了这该死的效果。为了能博得一个更良好的用户体验也是拼了！下面就是我最终实现的效果：

    需要说明一下，演示图里面有的按钮点击的快，有的很慢，看起来像是卡顿一样。请注意：这不是卡顿！我是为了示范按下和释放有两种动画效果而故意做出来的（最后一次按“已提交”那个item的时候，我故意按住很久才释放），实际操作中是很流畅的，没有任何问题，所以这一点要请放心。

    好了，废话不多说，进入今天的正题——

    首先，这个点击按下、松开还原的效果，很明显是GridView的item子View的一个缩放动画，也就是Android开发动画篇里面的补间动画之一：ScaleAnimotion . 那么无疑它就是我们今天要着重讨论的主要技术支持了。所以起步思路就有了：想办法获得GridView的item View，然后，分别定义一个缩小动画和一个放大动画，将这两个动画对象在对应控制条件下应用到子view对象。很显然，这个控制条件肯定是包含在GridView的onTouch触发事件里面的。通过回调函数的用户触屏动作参数，来控制我们的子View是该缩小还是该放大。

    OK~上面说得有点儿乱，下面整理一下完整的实现思路：

    ①编写缩小和放大的动画代码或xml文件；

    ②实现GridView的onTouch事件监听；

    ③判断用户点击的是GridView的哪个item，获取该item的子View；

    ④获取用户触屏事件，选择相应的动画播放对象应用到此子View.

    There！以上就是抽取出来的完整实现思路，下面我们一步一步来搞定它！

    首先，我这里采用的是代码的方式来编写了缩小和放大的动画，因为这里可能只用一次，所以，没有采用定义xml文件的方式，其实，属性都是一样的。

private void initItemAnim() {
    //缩小动画
  ItemDownAnim = new ScaleAnimation(1.0F, 0.90F, 1.0F, 0.90F, 1, 0.5F, 1, 0.5F);
    ItemDownAnim.setDuration(200L);
    ItemDownAnim.setFillAfter(true);

    //放大动画
  ItemUpAnim = new ScaleAnimation(0.90F, 1.0F, 0.90F,