最近做一个相册浏览器.doc

最近做一个相册浏览器，类似于Android系统自带的那种，可以实现缩放。找了很多帖子，没有想要的那种结果，要么只能拖动，要么只能缩放，要综合两种效果的却没有。经过自己的钻研，重写了ImageViewTouchBase，并实现自己的类来继承Gallery，在该类里边实现缩放事件，然后在xml文件里边加载这个类。终于出来了自己想要的结果，下面与大家分享一下。先看几张截图：图一：原图 图二：两张图片切换的动画 图三：通过手指实现图片放大 布局文件代码： 两个主要的java类：Gallery代码package com.lyc.pic;import android.content.Context;import android.graphics.Matrix;import android.graphics.Rect;import android.util.AttributeSet;import android.util.Log;import android.view.GestureDetector;import android.view.KeyEvent;import android.view.MotionEvent;import android.view.View;import android.view.GestureDetector.SimpleOnGestureListener;import android.widget.Gallery;public class MyGallery extends Gallery private GestureDetector gestureScanner; private MyImageView imageView;public MyGallery(Context context) super(context);public MyGallery(Context context, AttributeSet attrs, int defStyle) super(context, attrs, defStyle);public MyGallery(Context context, AttributeSet attrs) super(context, attrs);gestureScanner = new GestureDetector(new MySimpleGesture();this.setOnTouchListener(new OnTouchListener() float baseValue;float originalScale;/重写onTouch方法实现缩放Overridepublic boolean onTouch(View v, MotionEvent event) View view = MyGallery.this.getSelectedView();if (view instanceof MyImageView) imageView = (MyImageView) view;if (event.getAction() = MotionEvent.ACTION_DOWN) baseValue = 0;originalScale = imageView.getScale();if (event.getAction() = MotionEvent.ACTION_MOVE) /处理拖动if (event.getPointerCount() = 2) float x = event.getX(0) - event.getX(1);float y = event.getY(0) - event.getY(1);float value = (float) Math.sqrt(x * x + y * y);/ 计算两点的距离/ System.out.println(value: + value);if (baseValue = 0) baseValue = value; else float scale = value / baseValue;/ 当前两点间的距离除以手指落下时两点间的距离就是需要缩放的比例。/ scale the imageimageView.zoomTo(originalScale * scale, x + event.getX(1), y + event.getY(1);return false;);Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) View view = MyGallery.this.getSelectedView();if (view instanceof MyImageView) imageView = (MyImageView) view;float v = new float9;Matrix m = imageView.getImageMatrix();m.getValues(v);/ 图片实时的上下左右坐标float left, right;/ 图片的实时宽，高float width, height;width = imageView.getScale() * imageView.getImageWidth();height = imageView.getScale() * imageView.getImageHeight();/ 下面逻辑为移动图片和滑动gallery换屏的逻辑。如果没对整个框架了解的非常清晰，勿动以下代码if (int) width = MianActivity.screenWidth & (int) height = MianActivity.screenHeight)/ 如果图片当前大小 0)/ 向左滑动if (r.left 0) / 判断当前ImageView是否显示完全super.onScroll(e1, e2, distanceX, distanceY); else if (right MianActivity.screenWidth) Log.i(screenWidth, MianActivity.screenWidth1: + MianActivity.screenWidth);super.onScroll(e1, e2, distanceX, distanceY); else imageView.postTranslate(-distanceX, -distanceY); else if (distanceX 0)/ 向右滑动if (r.right 0) super.onScroll(e1, e2, distanceX, distanceY); else imageView.postTranslate(-distanceX, -distanceY);/ if (distanceX 0)/ 向左滑动/ / if (r.left 0) / 判断当前ImageView是否显示完全/ super.onScroll(e1, e2, distanceX, distanceY);/ else if (right = MianActivity.screenWidth) / super.onScroll(e1, e2, distanceX, distanceY);/ else / imageView.postTranslate(-distanceX, -distanceY);/ / else if (distanceX e1.getX();Overridepublic boolean onTouchEvent(MotionEvent event) gestureScanner.onTouchEvent(event);switch (event.getAction() case MotionEvent.ACTION_UP:/ 判断上下边界是否越界View view = MyGallery.this.getSelectedView();if (view instanceof MyImageView) imageView = (MyImageView) view;float width = imageView.getScale() * imageView.getImageWidth();float height = imageView.getScale() * imageView.getImageHeight();if (int) width = MianActivity.screenWidth & (int) height = MianActivity.screenHeight)/ 如果图片当前大小 0) imageView.postTranslateDur(-top, 200f);Log.i(lyc, bottom: + bottom);if (bottom imageView.getScaleRate() imageView.zoomTo(imageView.getScaleRate(), MianActivity.screenWidth / 2, MianActivity.screenHeight / 2, 200f);/ imageView.layoutToCenter(); else imageView.zoomTo(1.0f, MianActivity.screenWidth / 2, MianActivity.screenHeight / 2, 200f); else / return super.onDoubleTap(e);return true;根据android系统自带的ImageViewTouchBase代码修改的代码：package com.lyc.pic;import java.io.InputStream;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.RectF;import android.os.Handler;import android.util.AttributeSet;import android.util.Log;import android.view.KeyEvent;import android.widget.ImageView;public class MyImageView extends ImageView SuppressWarnings(unused)private static final String TAG = ImageViewTouchBase;protected Matrix mBaseMatrix = new Matrix();protected Matrix mSuppMatrix = new Matrix();private final Matrix mDisplayMatrix = new Matrix();private final float mMatrixValues = new float9;/ The current bitmap being displayed./ protected final RotateBitmap mBitmapDisplayed = new RotateBitmap(null);protected Bitmap image = null;int mThisWidth = -1, mThisHeight = -1;float mMaxZoom = 2.0f;/ 最大缩放比例float mMinZoom ;/ 最小缩放比例private int imageWidth;/ 图片的原始宽度private int imageHeight;/ 图片的原始高度private float scaleRate;/ 图片适应屏幕的缩放比例protected void onDraw(Canvas canvas) /正在显示的图片实际宽高float width = imageWidth*getScale();float height = imageHeight*getScale();if (width MianActivity.screenWidth) / 如果图宽大于屏宽，就不用水平居中center(false, true); else center(true, true);super.onDraw(canvas);public MyImageView(Context context, int imageWidth, int imageHeight) super(context);this.imageHeight = imageHeight;this.imageWidth = imageWidth;init();public MyImageView(Context context, AttributeSet attrs, int imageWidth, int imageHeight) super(context, attrs);this.imageHeight = imageHeight;this.imageWidth = imageWidth;init();private void arithScaleRate() float scaleWidth = MianActivity.screenWidth / (float) imageWidth;float scaleHeight = MianActivity.screenHeight / (float) imageHeight;scaleRate = Math.min(scaleWidth, scaleHeight);public float getScaleRate() return scaleRate;public int getImageWidth() return imageWidth;public void setImageWidth(int imageWidth) this.imageWidth = imageWidth;public int getImageHeight() return imageHeight;public void setImageHeight(int imageHeight) this.imageHeight = imageHeight;Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) if (keyCode = KeyEvent.KEYCODE_BACK & event.getRepeatCount() = 0) event.startTracking();return true;return super.onKeyDown(keyCode, event);Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) if (keyCode = KeyEvent.KEYCODE_BACK & event.isTracking() & !event.isCanceled() if (getScale() 1.0f) / If were zoomed in, pressing Back jumps out to show the/ entire image, otherwise Back returns the user to the gallery.zoomTo(1.0f);return true;return super.onKeyUp(keyCode, event);protected Handler mHandler = new Handler();Overridepublic void setImageBitmap(Bitmap bitmap) super.setImageBitmap(bitmap);image = bitmap;/ 计算适应屏幕的比例arithScaleRate();/缩放到屏幕大小zoomTo(scaleRate,MianActivity.screenWidth / 2f, MianActivity.screenHeight / 2f);/居中layoutToCenter();protected void center(boolean horizontal, boolean vertical) if (image = null) return;Matrix m = getImageViewMatrix();RectF rect = new RectF(0, 0, image.getWidth(), image.getHeight();m.mapRect(rect);float height = rect.height();float width = rect.width();float deltaX = 0, deltaY = 0;if (vertical) int viewHeight = getHeight();if (height 0) deltaY = -rect.top; else if (rect.bottom viewHeight) deltaY = getHeight() - rect.bottom;if (horizontal) int viewWidth = getWidth();if (width 0) deltaX = -rect.left; else if (rect.right 0)tran_width = fill_width/2;if(fill_height0)tran_height = fill_height/2;postTranslate(tran_width, tran_height);setImageMatrix(getImageViewMatrix();protected float getValue(Matrix matrix, int whichValue) matrix.getValues(mMatrixValues);mMinZoom =( MianActivity.screenWidth/2f)/imageWidth;return mMatrixValueswhichValue;/ Get the scale factor out of the tected float getScale(Matrix matrix) return getValue(matrix, Matrix.MSCALE_X);protected float getScale() return getScale(mSuppMatrix);/ Combine the base matrix and the supp matrix to make the final tected Matrix getImageViewMatrix() / The final matrix is computed as the concatentation of the base matrix/ and the supplementary matrix.mDisplayMatrix.set(mBaseMatrix);mDisplayMatrix.postConcat(mSuppMatrix);return mDisplayMatrix;static final float SCALE_RATE = 1.25F;/ Sets the maximum zoom, which is a scale relative to the base matrix. It/ is calculated to show the image at 400% zoom regardless of screen or/ image orientation. If in the future we decode the full 3 megapixel image,/ rather than the current 1024x768, this should be changed down to 200%.protected float maxZoom() if (image = null) return 1F;float fw = (float) image.getWidth() / (float) mThisWidth;float fh = (float) image.getHeight() / (float) mThisHeight;float max = Math.max(fw, fh) * 4;return max;protected void zoomTo(float scale, float centerX, float centerY) if (scale mMaxZoom) scale = mMaxZoom; else if (scale mMinZoom) scale = mMinZoom;float oldScale = getScale();float deltaScale = scale / oldScale;mSuppMatrix.postScale(deltaScale, deltaScale, centerX, centerY);setImageMatrix(getImageViewMatrix();center(true, true);protected void zoomTo(final float scale, final float centerX, final float centerY, final float durationMs) final float incrementPerMs = (scale - getScale() / durationMs;final float oldScale = getScale();final long startTime = System.currentTimeMillis();mHandler.post(new Runnable() public void run() long now = System.currentTimeMillis();float currentMs = Math.min(durationMs, now - startTime);float target = oldScale + (incrementPerMs * currentMs);zoomTo(target, centerX, centerY);if (currentMs = mMaxZoom) return; / Dont let the user zoom into the molecular level. else if (getScale() = mMinZoom) return;if (image = null) return;float cx = getWidth() / 2F;float cy = getHeight() / 2F;mSuppMatrix.postScale(rate, rate, cx, c