android自定义View之仿携程首页点击缩放ImageView

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

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

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

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

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

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

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

  下面是实现代码：

<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>

<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>