Android DragImageView实现下拉拖动图片放大效果

DragImageView下拉拖动图片放大，先上图：

主要的类：继承了RelativeLayout，再在RelativeLayout里面添加ImageView，通过Touch事件来改变ImageView的缩放，缩放时计算scale，使其在手指移动到屏幕底部时，图片底部也刚好到达屏幕底部，手指松开时，图片逐步回弹。

package com.example.dragimagescale; 

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RelativeLayout; 

public class DragScaleImageView extends RelativeLayout {
 private String TAG = "DragScaleImageView";
 private static final int BACK_SCALE = 1010; 

 private Context mContext;
 private AttributeSet attrs;
 private int displayWidth = 0;
 private int displayHeight = 0;
 private int mImageId;
 private Bitmap bmp;
 private ImageView imageView; 

 /** 是否处在回弹状态 */
 private boolean isBacking = false; 

 /** 用于记录拖拉图片移动的坐标位置 */
 private Matrix matrix = new Matrix();
 /** 用于记录图片要进行拖拉时候的坐标位置 */
 private Matrix currentMatrix = new Matrix();
 private Matrix defaultMatrix = new Matrix();
 /** 图片的宽高 */
 private float imgHeight, imgWidth;
 /** 初始状态 */
 private int mode = 0;
 /** 拖拉照片模式 */
 private final int MODE_DRAG = 1; 

 private float scaleY = 0; 

 /** 用于记录开始时候的坐标位置 */
 private PointF startPoint = new PointF(); 

 /** 用于记录开始时候的在整个屏幕中的Y坐标位置 */
 private float startRawY = 0;
 float scale = 1; 

 private TouchEventListener touchEventListener = null;
 private BackScaleListener backScaleListener = null; 

 public DragScaleImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
  this.mContext = context;
  this.attrs = attrs;
  initView();
 } 

 public DragScaleImageView(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
  this.mContext = context;
  initView();
 } 

 public DragScaleImageView(Activity activity, Bitmap resBitmap, int width,
   int height) {
  super(activity);
 } 

 /**
  * 初始化图片
  */
 private void initView() {
  /* 取得屏幕分辨率大小 */
  DisplayMetrics dm = new DisplayMetrics();
  WindowManager mWm = (WindowManager) mContext
    .getSystemService(Context.WINDOW_SERVICE);
  mWm.getDefaultDisplay().getMetrics(dm);
  displayWidth = dm.widthPixels;
  displayHeight = dm.heightPixels; 

  TypedArray a = mContext.obtainStyledAttributes(attrs,
    R.styleable.DragScaleImageView);
  mImageId = a.getResourceId(R.styleable.DragScaleImageView_scale_image,
    0);
  a.recycle();
  if (null == bmp && mImageId != 0) {
   bmp = BitmapFactory.decodeResource(getResources(), mImageId);
   float scale = (float) displayWidth / (float) bmp.getWidth();// 1080/1800
   matrix.postScale(scale, scale, 0, 0);
   imgHeight = scale * bmp.getHeight();
   imgWidth = scale * bmp.getWidth();
  } else {
   imgHeight = displayWidth;
   imgWidth = displayWidth;
  }
  initImageView();
 } 

 private void initImageView() {
  imageView = new ImageView(mContext);
  imageView.setImageMatrix(matrix);
  defaultMatrix.set(matrix);
  Log.w(TAG, "imgWidth :" + imgWidth);
  Log.w(TAG, "imgHeight :" + imgHeight); 

  RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
    (int) imgWidth, (int) imgHeight);
  imageView.setLayoutParams(layoutParams);
  imageView.setImageBitmap(bmp);
  imageView.setScaleType(ScaleType.CENTER_CROP);
  this.addView(imageView);
 } 

 /**
  * 设置ImageView的宽高
  *
  * @param width
  * @param height
  */
 public void setImageWidthAndHeight(int width, int height) {
  imgWidth = width;
  imgHeight = height;
  RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
    (int) imgWidth, (int) imgHeight);
  imageView.setLayoutParams(layoutParams);
 } 

 public boolean onTouchEvent(MotionEvent event) {
  Log.w(TAG, "onTouchEvent :" + event.getAction());
  // 当该View放置在ScrollView里面时，会与父控件Touch事件冲突，所以touch该控件区域时，父控件不可用
  if (event.getAction() == MotionEvent.ACTION_UP) {
   getParent().requestDisallowInterceptTouchEvent(false);
  } else {
   getParent().requestDisallowInterceptTouchEvent(true);// true表示父类的不可用;
  }
  switch (event.getAction() & MotionEvent.ACTION_MASK) {
  // 手指压下屏幕
  case MotionEvent.ACTION_DOWN:
   if (isBacking) {
    return super.onTouchEvent(event);
   }
   int[] location = new int[2];
   imageView.getLocationInWindow(location);
   if (location[1] >= 0) {
    mode = MODE_DRAG;
    // 记录ImageView当前的移动位置
    currentMatrix.set(imageView.getImageMatrix());
    startPoint.set(event.getX(), event.getY());
    startRawY = event.getRawY();
    Log.w(TAG, "onTouchEvent startRawY:" + startRawY);
   }
   break;
  // 手指在屏幕上移动，改事件会被不断触发
  case MotionEvent.ACTION_MOVE:
   // 拖拉图片
   if (mode == MODE_DRAG) {
//    float dx = event.getX() - startPoint.x; // 得到x轴的移动距离
    float dy = event.getY() - startPoint.y; // 得到y轴的移动距离
    // 在没有移动之前的位置上进行移动
    if (dy > 0) {
     matrix.set(currentMatrix);
     Log.w(TAG, "onTouchEvent dy:" + dy);
     scale = ((dy / (displayHeight - startRawY) * (displayHeight - imgHeight)) + imgHeight)
       / imgHeight; // 得到缩放倍数，当手指移动到屏幕底部时，图片也达到屏幕底部
     Log.w(TAG, "onTouchEvent scale:" + scale); 

     scaleY = dy;
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams(
       (int) (scale * imgWidth), (int) (scale * imgHeight));
     imageView.setLayoutParams(relativeLayout);
     matrix.postScale(scale, scale, imgWidth / 2, 0);
     imageView.setImageMatrix(matrix);
    }
   }
   break;
  // 手指离开屏幕
  case MotionEvent.ACTION_UP:
   // 当触点离开屏幕，图片还原
   mHandler.sendEmptyMessage(BACK_SCALE);
  case MotionEvent.ACTION_POINTER_UP:
   // 当两个手指移动时，取消移动图片
   mode = 0;
   break;
  }
  // 设置的Touch监听事件
  if (touchEventListener != null) {
   touchEventListener.onTouchEvent(event);
  }
  return true;
 } 

 /** 逐步回弹 */
 @SuppressLint("HandlerLeak")
 private Handler mHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
   // TODO Auto-generated method stub
   switch (msg.what) {
   case BACK_SCALE:
    scale = (scaleY / 2 + imgHeight) / (imgHeight);// 得到缩放倍数
    if (scaleY > 0) {
     isBacking = true;
     matrix.set(currentMatrix);
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams(
       (int) (scale * imgWidth), (int) (scale * imgHeight));
     imageView.setLayoutParams(relativeLayout);
     matrix.postScale(scale, scale, imgWidth / 2, 0);
     imageView.setImageMatrix(matrix);
     scaleY = (float) (scaleY / 2 - 1);
     mHandler.sendEmptyMessageDelayed(BACK_SCALE, 20);// 逐步回弹
    } else {
     scaleY = 0;
     RelativeLayout.LayoutParams relativeLayout = new RelativeLayout.LayoutParams(
       (int) imgWidth, (int) imgHeight);
     imageView.setLayoutParams(relativeLayout);
     matrix.set(defaultMatrix);
     imageView.setImageMatrix(matrix);
     isBacking = false;
    }
    if (backScaleListener != null) {
     backScaleListener.onBackScale();
    }
    break;
   default:
    break;
   }
   super.handleMessage(msg);
  }
 }; 

 public void setTouchEventListener(TouchEventListener touchEventListener) {
  this.touchEventListener = touchEventListener;
 } 

 public void setBackScaleListener(BackScaleListener backScaleListener) {
  this.backScaleListener = backScaleListener;
 } 

 /** Touch事件监听 */
 public interface TouchEventListener {
  public void onTouchEvent(MotionEvent event);
 }
 /** 回弹事件监听 */
 public interface BackScaleListener {
  public void onBackScale();
 }
} 

调用的Activity：

package com.example.dragimagescale; 

import com.example.dragimagescale.DragScaleImageView.BackScaleListener;
import com.example.dragimagescale.DragScaleImageView.TouchEventListener; 

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent; 

public class MainActivity extends Activity { 

 DragScaleImageView mDragScaleImageView; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main); 

  mDragScaleImageView = (DragScaleImageView) findViewById(R.id.dragScaleImageView);
  /** 自定义ImageView的宽高，若不设置则按图片宽高压缩至屏幕宽度 */
//  mDragScaleImageView.setImageWidthAndHeight(720, 300);
  // Touch事件监听
  mDragScaleImageView.setTouchEventListener(new TouchEventListener() { 

   @Override
   public void onTouchEvent(MotionEvent event) {
    // TODO Auto-generated method stub
    // do something here
   }
  });
  // 回弹事件监听
  mDragScaleImageView.setBackScaleListener(new BackScaleListener() { 

   @Override
   public void onBackScale() {
    // TODO Auto-generated method stub
    // do something here
   }
  });
 } 

} 

xml 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:dragscaleimageview="http://schemas.android.com/apk/res/com.example.dragimagescale"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#ffffff" > 

 <com.example.dragimagescale.DragScaleImageView
  android:id="@+id/dragScaleImageView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  dragscaleimageview:scale_image="@drawable/image"
  >
 </com.example.dragimagescale.DragScaleImageView> 

</RelativeLayout>

下载：源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。