Android App中实现可以双击放大和缩小图片功能的实例
先来看一个很简单的核心图片缩放方法:
public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "scaleWidth:"+ scaleWidth +", scaleHeight:"+ scaleHeight); return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); }
注意要比例设置正确否则可能会内存溢出,比如曾经使用图片缩放时遇到这么个问题:
java.lang.IllegalArgumentException: bitmap size exceeds 32bits
后来一行行查代码,发现原来是 scale 的比例计算错误,将原图给放大了 20 多倍,导致内存溢出所致,重新修改比例值后就正常了。
好了,下面真正来看一下这个实现了放大和原大两个级别的缩放的模块。
功能有:
- 以触摸点为中心放大(这个是网上其他的代码没有的)
- 边界控制(这个是网上其他的代码没有的)
- 双击放大或缩小(主要考虑到电阻屏)
- 多点触摸放大和缩小
这个模块已经通过了测试,并且用户也使用有一段时间了,是属于比较稳定的了。
下面贴上代码及使用方法(没有写测试项目,大家见谅):
ImageControl 类似一个用户自定义的ImageView控件。用法将在下面的代码中贴出。
import android.content.Context; import android.graphics.Bitmap; import android.graphics.Matrix; import android.util.AttributeSet; import android.util.FloatMath; import android.view.MotionEvent; import android.widget.ImageView; public class ImageControl extends ImageView { public ImageControl(Context context) { super(context); // TODO Auto-generated constructor stub } public ImageControl(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public ImageControl(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub } // ImageView img; Matrix imgMatrix = null; // 定义图片的变换矩阵 static final int DOUBLE_CLICK_TIME_SPACE = 300; // 双击时间间隔 static final int DOUBLE_POINT_DISTANCE = 10; // 两点放大两点间最小间距 static final int NONE = 0; static final int DRAG = 1; // 拖动操作 static final int ZOOM = 2; // 放大缩小操作 private int mode = NONE; // 当前模式 float bigScale = 3f; // 默认放大倍数 Boolean isBig = false; // 是否是放大状态 long lastClickTime = 0; // 单击时间 float startDistance; // 多点触摸两点距离 float endDistance; // 多点触摸两点距离 float topHeight; // 状态栏高度和标题栏高度 Bitmap primaryBitmap = null; float contentW; // 屏幕内容区宽度 float contentH; // 屏幕内容区高度 float primaryW; // 原图宽度 float primaryH; // 原图高度 float scale; // 适合屏幕缩放倍数 Boolean isMoveX = true; // 是否允许在X轴拖动 Boolean isMoveY = true; // 是否允许在Y轴拖动 float startX; float startY; float endX; float endY; float subX; float subY; float limitX1; float limitX2; float limitY1; float limitY2; ICustomMethod mCustomMethod = null; /** * 初始化图片 * * @param bitmap * 要显示的图片 * @param contentW * 内容区域宽度 * @param contentH * 内容区域高度 * @param topHeight * 状态栏高度和标题栏高度之和 */ public void imageInit(Bitmap bitmap, int contentW, int contentH, int topHeight, ICustomMethod iCustomMethod) { this.primaryBitmap = bitmap; this.contentW = contentW; this.contentH = contentH; this.topHeight = topHeight; mCustomMethod = iCustomMethod; primaryW = primaryBitmap.getWidth(); primaryH = primaryBitmap.getHeight(); float scaleX = (float) contentW / primaryW; float scaleY = (float) contentH / primaryH; scale = scaleX < scaleY ? scaleX : scaleY; if (scale < 1 && 1 / scale < bigScale) { bigScale = (float) (1 / scale + 0.5); } imgMatrix = new Matrix(); subX = (contentW - primaryW * scale) / 2; subY = (contentH - primaryH * scale) / 2; this.setImageBitmap(primaryBitmap); this.setScaleType(ScaleType.MATRIX); imgMatrix.postScale(scale, scale); imgMatrix.postTranslate(subX, subY); this.setImageMatrix(imgMatrix); } /** * 按下操作 * * @param event */ public void mouseDown(MotionEvent event) { mode = NONE; startX = event.getRawX(); startY = event.getRawY(); if (event.getPointerCount() == 1) { // 如果两次点击时间间隔小于一定值,则默认为双击事件 if (event.getEventTime() - lastClickTime < DOUBLE_CLICK_TIME_SPACE) { changeSize(startX, startY); } else if (isBig) { mode = DRAG; } } lastClickTime = event.getEventTime(); } /** * 非第一个点按下操作 * * @param event */ public void mousePointDown(MotionEvent event) { startDistance = getDistance(event); if (startDistance > DOUBLE_POINT_DISTANCE) { mode = ZOOM; } else { mode = NONE; } } /** * 移动操作 * * @param event */ public void mouseMove(MotionEvent event) { if ((mode == DRAG) && (isMoveX || isMoveY)) { float[] XY = getTranslateXY(imgMatrix); float transX = 0; float transY = 0; if (isMoveX) { endX = event.getRawX(); transX = endX - startX; if ((XY[0] + transX) <= limitX1) { transX = limitX1 - XY[0]; } if ((XY[0] + transX) >= limitX2) { transX = limitX2 - XY[0]; } } if (isMoveY) { endY = event.getRawY(); transY = endY - startY; if ((XY[1] + transY) <= limitY1) { transY = limitY1 - XY[1]; } if ((XY[1] + transY) >= limitY2) { transY = limitY2 - XY[1]; } } imgMatrix.postTranslate(transX, transY); startX = endX; startY = endY; this.setImageMatrix(imgMatrix); } else if (mode == ZOOM && event.getPointerCount() > 1) { endDistance = getDistance(event); float dif = endDistance - startDistance; if (Math.abs(endDistance - startDistance) > DOUBLE_POINT_DISTANCE) { if (isBig) { if (dif < 0) { changeSize(0, 0); mode = NONE; } } else if (dif > 0) { float x = event.getX(0) / 2 + event.getX(1) / 2; float y = event.getY(0) / 2 + event.getY(1) / 2; changeSize(x, y); mode = NONE; } } } } /** * 鼠标抬起事件 */ public void mouseUp() { mode = NONE; } /** * 图片放大缩小 * * @param x * 点击点X坐标 * @param y * 点击点Y坐标 */ private void changeSize(float x, float y) { if (isBig) { // 如果处于最大状态,则还原 imgMatrix.reset(); imgMatrix.postScale(scale, scale); imgMatrix.postTranslate(subX, subY); isBig = false; } else { imgMatrix.postScale(bigScale, bigScale); // 在原有矩阵后乘放大倍数 float transX = -((bigScale - 1) * x); float transY = -((bigScale - 1) * (y - topHeight)); // (bigScale-1)(y-statusBarHeight-subY)+2*subY; float currentWidth = primaryW * scale * bigScale; // 放大后图片大小 float currentHeight = primaryH * scale * bigScale; // 如果图片放大后超出屏幕范围处理 if (currentHeight > contentH) { limitY1 = -(currentHeight - contentH); // 平移限制 limitY2 = 0; isMoveY = true; // 允许在Y轴上拖动 float currentSubY = bigScale * subY; // 当前平移距离 // 平移后,内容区域上部有空白处理办法 if (-transY < currentSubY) { transY = -currentSubY; } // 平移后,内容区域下部有空白处理办法 if (currentSubY + transY < limitY1) { transY = -(currentHeight + currentSubY - contentH); } } else { // 如果图片放大后没有超出屏幕范围处理,则不允许拖动 isMoveY = false; } if (currentWidth > contentW) { limitX1 = -(currentWidth - contentW); limitX2 = 0; isMoveX = true; float currentSubX = bigScale * subX; if (-transX < currentSubX) { transX = -currentSubX; } if (currentSubX + transX < limitX1) { transX = -(currentWidth + currentSubX - contentW); } } else { isMoveX = false; } imgMatrix.postTranslate(transX, transY); isBig = true; } this.setImageMatrix(imgMatrix); if (mCustomMethod != null) { mCustomMethod.customMethod(isBig); } } /** * 获取变换矩阵中X轴偏移量和Y轴偏移量 * * @param matrix * 变换矩阵 * @return */ private float[] getTranslateXY(Matrix matrix) { float[] values = new float[9]; matrix.getValues(values); float[] floats = new float[2]; floats[0] = values[Matrix.MTRANS_X]; floats[1] = values[Matrix.MTRANS_Y]; return floats; } /** * 获取两点间的距离 * * @param event * @return */ private float getDistance(MotionEvent event) { float x = event.getX(0) - event.getX(1); float y = event.getY(0) - event.getY(1); return FloatMath.sqrt(x * x + y * y); } /** * @author Administrator 用户自定义方法 */ public interface ICustomMethod { public void customMethod(Boolean currentStatus); } }
ImageVewActivity 这个用于测试的Activity
import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import ejiang.boiler.ImageControl.ICustomMethod; import ejiang.boiler.R.id; public class ImageViewActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.common_image_view); findView(); } public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); init(); } ImageControl imgControl; LinearLayout llTitle; TextView tvTitle; private void findView() { imgControl = (ImageControl) findViewById(id.common_imageview_imageControl1); llTitle = (LinearLayout) findViewById(id.common_imageview_llTitle); tvTitle = (TextView) findViewById(id.common_imageview_title); } private void init() { tvTitle.setText("图片测试"); // 这里可以为imgcontrol的图片路径动态赋值 // ............ Bitmap bmp; if (imgControl.getDrawingCache() != null) { bmp = Bitmap.createBitmap(imgControl.getDrawingCache()); } else { bmp = ((BitmapDrawable) imgControl.getDrawable()).getBitmap(); } Rect frame = new Rect(); getWindow().getDecorView().getWindowVisibleDisplayFrame(frame); int statusBarHeight = frame.top; int screenW = this.getWindowManager().getDefaultDisplay().getWidth(); int screenH = this.getWindowManager().getDefaultDisplay().getHeight() - statusBarHeight; if (bmp != null) { imgControl.imageInit(bmp, screenW, screenH, statusBarHeight, new ICustomMethod() { @Override public void customMethod(Boolean currentStatus) { // 当图片处于放大或缩小状态时,控制标题是否显示 if (currentStatus) { llTitle.setVisibility(View.GONE); } else { llTitle.setVisibility(View.VISIBLE); } } }); } else { Toast.makeText(ImageViewActivity.this, "图片加载失败,请稍候再试!", Toast.LENGTH_SHORT) .show(); } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: imgControl.mouseDown(event); break; /** * 非第一个点按下 */ case MotionEvent.ACTION_POINTER_DOWN: imgControl.mousePointDown(event); break; case MotionEvent.ACTION_MOVE: imgControl.mouseMove(event); break; case MotionEvent.ACTION_UP: imgControl.mouseUp(); break; } return super.onTouchEvent(event); } }
在上面的代码中,需要注意两点。一Activity中要重写onTouchEvent方法,将触摸事件传递到ImageControl,这点类似于WPF中的路由事件机制。二初始化imgControl即imgControl.imageInit,注意其中的参数。最后一个参数类似于C#中的委托,我这里使用接口来实现,在放大缩小的切换时要执行的操作都卸载这个方法中。
common_image_view.xml 布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ejiang.boiler.ImageControl android:id="@+id/common_imageview_imageControl1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/ic_launcher" /> <LinearLayout android:id="@+id/common_imageview_llTitle" style="@style/reportTitle1" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > <TextView android:id="@+id/common_imageview_title" style="@style/title2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="报告" /> </LinearLayout> </RelativeLayout>
上一篇:Android应用开发中模拟按下HOME键的效果(实现代码)
栏 目:Android代码
本文标题:Android App中实现可以双击放大和缩小图片功能的实例
本文地址:http://www.codeinn.net/misctech/190647.html