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