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>
  在Activity中的使用:

  

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

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。