仿携程首页缩放的点击效果

最近下了个携程App,点开首页看，注意到其按钮在点击的时候并不是我们经常看到的变色效果，而是先收缩，放开时，再回到原来的大小，感觉这个效果虽然小，但是感觉非常新颖，于是决定，模仿一下这个小效果，先看一下在携程上的效果，效果如下图所示：

 

再看一下我模仿的效果，如下图所示，效果基本一样。

0..0亲测在真机上是不会有黑色边框出现的，模拟器上不知为何．．．

先说一下整体思路：1.继承ImageView,重写onTouchEvent方法。

2.down的时候触发我们的缩小属性动画。

3.up的时候再触发放大动画。

4.定义一个接口回调，用来响应点击事件的处理。

下面是实现代码：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130

<span style= "font-size:14px;" > package view;   import module.BusEvent; import android.animation.Animator; import android.animation.ObjectAnimator; import android.animation.PropertyValuesHolder; import android.content.Context; import android.os.Handler; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.animation.LinearInterpolator; import android.widget.ImageView; import de.greenrobot.event.EventBus;   /**   * @author rzq   *   */ public class ClickImageView extends ImageView {        private Animator anim1;      private Animator anim2;      private int mHeight;      private int mWidth;      private float mX, mY;      private Handler mHandler = new Handler();        private ClickListener listener;        public ClickImageView(Context context, AttributeSet attrs) {          super (context, attrs);          init();      }        @Override      protected void onSizeChanged( int w, int h, int oldw, int oldh) {          super .onSizeChanged(w, h, oldw, oldh);          mHeight = getHeight() - getPaddingTop() - getPaddingBottom();          mWidth = getWidth() - getPaddingLeft() - getPaddingRight();          mX = getX();          mY = getY();      }        private void init() {            PropertyValuesHolder valueHolder_1 = PropertyValuesHolder.ofFloat(                  "scaleX" , 1f, 0 .9f);          PropertyValuesHolder valuesHolder_2 = PropertyValuesHolder.ofFloat(                  "scaleY" , 1f, 0 .9f);          anim1 = ObjectAnimator.ofPropertyValuesHolder( this , valueHolder_1,                  valuesHolder_2);          anim1.setDuration( 200 );          anim1.setInterpolator( new LinearInterpolator());            PropertyValuesHolder valueHolder_3 = PropertyValuesHolder.ofFloat(                  "scaleX" , 0 .9f, 1f);          PropertyValuesHolder valuesHolder_4 = PropertyValuesHolder.ofFloat(                  "scaleY" , 0 .9f, 1f);          anim2 = ObjectAnimator.ofPropertyValuesHolder( this , valueHolder_3,                  valuesHolder_4);          anim2.setDuration( 200 );          anim2.setInterpolator( new LinearInterpolator());      }        public void setClickListener(ClickListener clickListener) {          this .listener = clickListener;      }        @Override      public boolean onTouchEvent(MotionEvent event) {          switch (event.getAction()) {          case MotionEvent.ACTION_DOWN:              mHandler.post( new Runnable() {                  @Override                  public void run() {                      anim2.end();                      anim1.start();                  }              });              break ;          case MotionEvent.ACTION_MOVE:              break ;          case MotionEvent.ACTION_UP:              mHandler.post( new Runnable() {                  @Override                  public void run() {                      anim1.end();                      anim2.start();                  }              });              if (listener != null ) {                    listener.onClick();              }              //EventBus.getDefault().post(BusEvent.TYPE);              break ;          case MotionEvent.ACTION_CANCEL:              break ;          }          return true ;      }        //按下的点是否在View内      protected boolean innerImageView( float x, float y) {            if (x >= mX && y <= mX + mWidth) {              if (y >= mY && y <= mY + mHeight) {                  return true ;              }          }          return false ;      }        /**       *  点击事件处理回调　       * @author renzhiqiang       *       */      public interface ClickListener {            public void onClick();      }        @Override      protected void onDetachedFromWindow() {          // TODO Auto-generated method stub          super .onDetachedFromWindow();      }   }</span>

　　在Activity中的使用：

 

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<span style= "font-size:14px;" > package activity.animatior;   import view.ClickImageView; import view.ClickImageView.ClickListener; import android.app.Activity; import android.os.Bundle; import android.widget.Toast;   import com.example.listviewanimationdemo.R;   public class ClickImageActivity extends Activity {        @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.click_image_layout);          ClickImageView view = (ClickImageView) findViewById(R.id.image_view_1);          view.setClickListener( new ClickListener() {              @Override              public void onClick() {                  Toast.makeText(ClickImageActivity. this , "ImageView被点击了..." ,                          Toast.LENGTH_SHORT).show();              }          });      }        @Override      protected void onDestroy() {          // TODO Auto-generated method stub          super .onDestroy();      } }</span>