701
技術社區[雲棲]
讓Android自帶的Gallery實現多點縮放，拖動和邊界回彈效果，效果流暢
https://www.havenliu.com/android/668.html
公司項目要開發一個Android看漫畫的軟件。看了效果，需要滑動翻頁，多點縮放，拖動等。但看每個效果在android上實現都不難，但要全部組合在一起實現就比較麻煩，研究了兩天，動手寫了幾個效果對比，最終還是選擇了Gallery來做。但係統自帶的Gallery組件不支持對點縮放和拖動【它默認的拖動是翻頁，我需要的移動定位圖片】，並且當快速滑動時，Gallery是多張連續翻頁，而我隻需要每次翻頁一張。查了Android部分源碼。覺得重新Gallery和ImageView來實現。結果還是比較理想的。性能還是不錯的，無論是拖動、翻頁還是對點縮放都非常流暢。把大致思路放出來共享下，拋磚引玉，如果大家有更好的改進方法，可以共同討論。文章末尾有完整的Demo源代碼，童鞋們看仔細了，就不要再給我留言或發郵件問我要源碼了【PS：以前寫的文章在末尾都放了源碼，但估計很多人都沒耐心完整的看完，就發郵件來問我要源碼，搞的我屁股都洗白白了，準備上床睡覺，又打開電腦回Email】。
下麵是重寫的Gallery的代碼。注釋基本都寫上了。
MyGallery.java:
/**
* MyGallery.java
* @version 1.0
* @author Haven https://www.havenliu.com
* @createTime 2011-12-9 下午03:42:53
* android.widget.Gallery的子函數。此類很重要。建議仔細看
*/
package com.havenliu.demo;
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.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;
@Override
public 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 image
imageView.zoomTo(originalScale * scale, x + event.getX(1), y + event.getY(1));
}
}
}
}
return false;
}
});
}
@Override
public 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 float[9];
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 <= Main.screenWidth && (int) height <= Main.screenHeight)// 如果圖片當前大小<屏幕大小，直接處理滑屏事件 { super.onScroll(e1, e2, distanceX, distanceY); } else { left = v[Matrix.MTRANS_X]; right = left + width; Rect r = new Rect(); imageView.getGlobalVisibleRect(r); if (distanceX > 0)// 向左滑動
{
if (r.left > 0) {// 判斷當前ImageView是否顯示完全
super.onScroll(e1, e2, distanceX, distanceY);
} else if (right < Main.screenWidth) {
super.onScroll(e1, e2, distanceX, distanceY);
} else {
imageView.postTranslate(-distanceX, -distanceY);
}
} else if (distanceX < 0)// 向右滑動
{
if (r.right < Main.screenWidth) { super.onScroll(e1, e2, distanceX, distanceY); } else if (left > 0) {
super.onScroll(e1, e2, distanceX, distanceY);
} else {
imageView.postTranslate(-distanceX, -distanceY);
}
}
}
} else {
super.onScroll(e1, e2, distanceX, distanceY);
}
return false;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
return false;
}
@Override
public 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 <= Main.screenWidth && (int) height <= Main.screenHeight)// 如果圖片當前大小<屏幕大小，判斷邊界 { break; } float v[] = new float[9]; Matrix m = imageView.getImageMatrix(); m.getValues(v); float top = v[Matrix.MTRANS_Y]; float bottom = top + height; if (top > 0) {
imageView.postTranslateDur(-top, 200f);
}
Log.i("manga", "bottom:" + bottom);
if (bottom < Main.screenHeight) { imageView.postTranslateDur(Main.screenHeight - bottom, 200f); } } break; } return super.onTouchEvent(event); } private class MySimpleGesture extends SimpleOnGestureListener { // 按兩下的第二下Touch down時觸發 public boolean onDoubleTap(MotionEvent e) { View view = MyGallery.this.getSelectedView(); if (view instanceof MyImageView) { imageView = (MyImageView) view; if (imageView.getScale() > imageView.getScaleRate()) {
imageView.zoomTo(imageView.getScaleRate(), Main.screenWidth / 2, Main.screenHeight / 2, 200f);
// imageView.layoutToCenter();
} else {
imageView.zoomTo(1.0f, Main.screenWidth / 2, Main.screenHeight / 2, 200f);
}
} else {
}
// return super.onDoubleTap(e);
return true;
}
}
}
MyImageView.java:
/**
* MyImageView.java
* @version 1.0
* @author Haven https://www.havenliu.com
* @createTime 2011-12-9 下午03:12:30
* 此類代碼是根據android係統自帶的ImageViewTouchBase代碼修改
*/
package com.havenliu.demo;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.widget.ImageView;
public class MyImageView extends ImageView {
@SuppressWarnings("unused")
private static final String TAG = "ImageViewTouchBase";
// This is the base transformation which is used to show the image
// initially. The current computation for this shows the image in
// it's entirety, letterboxing as needed. One could choose to
// show the image as cropped instead.
//
// This matrix is recomputed when we go from the thumbnail image to
// the full size image.
protected Matrix mBaseMatrix = new Matrix();
// This is the supplementary transformation which reflects what
// the user has done in terms of zooming and panning.
//
// This matrix remains the same when we go from the thumbnail image
// to the full size image.
protected Matrix mSuppMatrix = new Matrix();
// This is the final matrix which is computed as the concatentation
// of the base matrix and the supplementary matrix.
private final Matrix mDisplayMatrix = new Matrix();
// Temporary buffer used for getting the values out of a matrix.
private final float[] mMatrixValues = new float[9];
// 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;// 圖片適應屏幕的縮放比例
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 = Main.screenWidth / (float) imageWidth;
float scaleHeight = Main.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;
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
event.startTracking();
return true;
}
return super.onKeyDown(keyCode, event);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.isTracking() && !event.isCanceled()) {
if (getScale() > 1.0f) {
// If we're 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();
@Override
public void setImageBitmap(Bitmap bitmap) {
super.setImageBitmap(bitmap);
image = bitmap;
// 計算適應屏幕的比例
arithScaleRate();
//縮放到屏幕大小
zoomTo(scaleRate,Main.screenWidth / 2f, Main.screenHeight / 2f);
//居中
layoutToCenter();
// imageView.zoomTo(scaleRate, Main.screenWidth / 2, Main.screenHeight / 2
// center(true, true);
}
// Center as much as possible in one or both axis. Centering is
// defined as follows: if the image is scaled down below the
// view's dimensions then center it (literally). If the image
// is scaled larger than the view and is translated out of view
// then translate it back into view (i.e. eliminate black bars).
protected void center(boolean horizontal, boolean vertical) {
// if (mBitmapDisplayed.getBitmap() == null) {
// return;
// }
if (image == null) {
return;
}
Matrix m = getImageViewMatrix();
RectF rect = new RectF(0, 0, image.getWidth(), image.getHeight());
// RectF rect = new RectF(0, 0, imageWidth*getScale(), imageHeight*getScale());
m.mapRect(rect);
float height = rect.height();
float width = rect.width();
float deltaX = 0, deltaY = 0;
if (vertical) {
int viewHeight = getHeight();
if (height < viewHeight) { deltaY = (viewHeight - height) / 2 - rect.top; } else if (rect.top > 0) {
deltaY = -rect.top;
} else if (rect.bottom < viewHeight) {
deltaY = getHeight() - rect.bottom;
}
}
if (horizontal) {
int viewWidth = getWidth();
if (width < viewWidth) { deltaX = (viewWidth - width) / 2 - rect.left; } else if (rect.left > 0) {
deltaX = -rect.left;
} else if (rect.right < viewWidth) { deltaX = viewWidth - rect.right; } } postTranslate(deltaX, deltaY); setImageMatrix(getImageViewMatrix()); } private void init() { setScaleType(ImageView.ScaleType.MATRIX); } /** * 設置圖片居中顯示 */ public void layoutToCenter() { //正在顯示的圖片實際寬高 float width = imageWidth*getScale(); float height = imageHeight*getScale(); //空白區域寬高 float fill_width = Main.screenWidth - width; float fill_height = Main.screenHeight - height; //需要移動的距離 float tran_width = 0f; float tran_height = 0f; if(fill_width>0)
tran_width = fill_width/2;
if(fill_height>0)
tran_height = fill_height/2;
postTranslate(tran_width, tran_height);
setImageMatrix(getImageViewMatrix());
}
protected float getValue(Matrix matrix, int whichValue) {
matrix.getValues(mMatrixValues);
mMinZoom =( Main.screenWidth/2f)/imageWidth;
return mMatrixValues[whichValue];
}
// Get the scale factor out of the matrix.
protected 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 matrix.
protected 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 < durationMs) { mHandler.post(this); } } }); } protected void zoomTo(float scale) { float cx = getWidth() / 2F; float cy = getHeight() / 2F; zoomTo(scale, cx, cy); } protected void zoomToPoint(float scale, float pointX, float pointY) { float cx = getWidth() / 2F; float cy = getHeight() / 2F; panBy(cx - pointX, cy - pointY); zoomTo(scale, cx, cy); } protected void zoomIn() { zoomIn(SCALE_RATE); } protected void zoomOut() { zoomOut(SCALE_RATE); } protected void zoomIn(float rate) { if (getScale() >= mMaxZoom) {
return; // Don't 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, cy);
setImageMatrix(getImageViewMatrix());
}
protected void zoomOut(float rate) {
if (image == null) {
return;
}
float cx = getWidth() / 2F;
float cy = getHeight() / 2F;
// Zoom out to at most 1x.
Matrix tmp = new Matrix(mSuppMatrix);
tmp.postScale(1F / rate, 1F / rate, cx, cy);
if (getScale(tmp) < 1F) {
mSuppMatrix.setScale(1F, 1F, cx, cy);
} else {
mSuppMatrix.postScale(1F / rate, 1F / rate, cx, cy);
}
setImageMatrix(getImageViewMatrix());
center(true, true);
}
public void postTranslate(float dx, float dy) {
mSuppMatrix.postTranslate(dx, dy);
setImageMatrix(getImageViewMatrix());
}
float _dy=0.0f;
protected void postTranslateDur( final float dy, final float durationMs) {
_dy=0.0f;
final float incrementPerMs = dy / durationMs;
final long startTime = System.currentTimeMillis();
mHandler.post(new Runnable() {
public void run() {
long now = System.currentTimeMillis();
float currentMs = Math.min(durationMs, now - startTime);
postTranslate(0, incrementPerMs*currentMs-_dy);
_dy=incrementPerMs*currentMs;
if (currentMs < durationMs) {
mHandler.post(this);
}
}
});
}
protected void panBy(float dx, float dy) {
postTranslate(dx, dy);
setImageMatrix(getImageViewMatrix());
}
}
源碼：狂擊這裏
最後更新：2017-04-03 18:51:45