android自定义View之仿携程首页点击缩放ImageView
2015-03-25 18:15
513 查看
最近下了个携程App,点开首页看,注意到其按钮在点击的时候并不是我们经常看到的变色效果,而是先收缩,放开时,再回到原来的大小,感觉这个效果虽然小,但是感觉非常新颖,于是决定,模仿一下这个小效果,先看一下在携程上的效果,效果如下图所示:
再看一下我模仿的效果,如下图所示,效果基本一样。
换了个模拟器,好了…………
先说一下整体思路:1.继承ImageView,重写onTouchEvent方法。
2.down的时候触发我们的缩小属性动画。
3.up的时候再触发放大动画。
4.定义一个接口回调,用来响应点击事件的处理。
下面是实现代码:
再看一下我模仿的效果,如下图所示,效果基本一样。
换了个模拟器,好了…………
先说一下整体思路: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>
相关文章推荐
- Android:FullImageView 自定义等比缩放的铺满控件显示的ImageView
- Android中自定义点击缩放ImageView
- Android自定义View来实现解析lrc歌词并同步滚动、上下拖动、缩放歌词的功能[转]
- Android Matrix手势缩放自定义view 不止于Imageview
- Android WebView 禁止缩放(手势、点击)
- Android自定义View之布局(layout)缩放
- android KTV 开发(一)自定义videoView 实现视频大小自由缩放、全屏与预览
- Android-图片预览(自定义ImageView实现图片缩放,多点触控,自由移动)
- Android--自定义View加载网络图片,实现缩放,圆形剪裁
- Android自定义可点击的ImageSpan并在TextView中内置View
- Android 在ViewPager中使用的可以画线,放大,保存,点击删除线条的自定义图片显示控件
- 携程在手点击小按钮缩放效果与自定义按钮效果
- Android自定义View之点击效果
- 【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView
- Android自定义View之快速实现下拉刷新, 点击加载更多ListView
- Android 自定义ImageView支持缩放,拖拽,方便复用
- Android之---自定义view显示一张高清的原图(不压缩,支持拖动,可拓展至缩放手势)
- Android自定义View中的常用方法(距离、位置、点击事件)
- Android点击WebView中的图片实现缩放及滑动浏览
- 【Android】自定义ImageView实现图片的平移、缩放、旋转(手势操作)