先上图:
很多时候 我们会有这么一个需求:
展示一组图片 每个Item的图片 可以*拉伸 滑动 焦点不冲突
网上有很多实现方法 通过自定义Gallery和ImageView来实现
个人不是很推荐 在这里推荐有ViewPager加ZoomImageView
ViewPager就不过多解释 主要是ZoomImageView
上代码:
public class ZoomImageView extends ImageView implements OnTouchListener, OnGestureListener{ private int WIDTH; private int HEIGHT; private int mStatusHeight; private static final String TAG = ZoomImageView.class.getSimpleName(); // 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 reHonagAnGalleryActivitys 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 = 4.0f; float mMinZoom = 0.1f; private int imageWidth; private int imageHeight; private float scaleRate; public ZoomImageView(Context context) { super(context); init(); } public ZoomImageView(Context context, int imageWidth, int imageHeight) { super(context); this.imageHeight = imageHeight; this.imageWidth = imageWidth; init(); } public ZoomImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void arithScaleRate() { float scaleWidth = WIDTH / (float) imageWidth; float scaleHeight = HEIGHT / (float) imageHeight; scaleRate = Math.min(scaleWidth, scaleHeight); if (scaleRate > 1) { scaleRate = 1f; } } 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; } protected Handler mHandler = new Handler(); @Override public void setImageResource(int resId) { Bitmap bit = BitmapFactory.decodeResource(getResources(), resId); setImageBitmap(bit); } @Override public void setImageBitmap(Bitmap bitmap) { super.setImageBitmap(bitmap); this.imageHeight = bitmap.getHeight(); this.imageWidth = bitmap.getWidth(); image = bitmap; requestImage(); } public void requestImage() { arithScaleRate(); zoomTo(scaleRate, WIDTH / 2f, WIDTH / 2f); layoutToCenter(); } // 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()); } public void setStatusHeight(int height) { HEIGHT -= height; } private void init() { // except the height of the top bar DisplayMetrics dm = getResources().getDisplayMetrics(); WIDTH = dm.widthPixels; HEIGHT = dm.heightPixels; // HEIGHT -= getResources().getDimension(R.dimen.top_bar_height); setScaleType(ImageView.ScaleType.MATRIX); setOnTouchListener(this); mDetector = new GestureDetector(getContext(), this); } public void layoutToCenter() { float width = imageWidth * getScale(); float height = imageHeight * getScale(); float fill_width = WIDTH - width; float fill_height = HEIGHT - 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; float v[] = new float[9]; Matrix m = getImageMatrix(); m.getValues(v); float left = v[Matrix.MTRANS_X]; float top = v[Matrix.MTRANS_Y]; tran_width -= left; tran_height -= top; postTranslate(tran_width, tran_height); // setImageMatrix(getImageViewMatrix()); } protected float getValue(Matrix matrix, int whichValue) { matrix.getValues(mMatrixValues); // mMinZoom = (BrowsePictureActivity.screenWidth / 2f) / imageWidth; mMinZoom = 0; 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) { zoomTo(scale, centerX, centerY, true); } protected void zoomTo(float scale, float centerX, float centerY, boolean limit) { if (limit) { 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() + mMinZoom; 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 zoomBigToSmall(final float scale, final float centerX, final float centerY, final float durationMs) { final float incrementPerMs = (scale - getScale()) / durationMs; final float oldScale = getScale() + mMaxZoom; 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()); } private float mdy = 0.0f; protected void postTransVerticalDuration(final float dy, final float durationMs) { final float incrementPerMs = dy / durationMs; final long startTime = System.currentTimeMillis(); mdy = 0.0f; mHandler.post(new Runnable() { public void run() { long now = System.currentTimeMillis(); float currentMs = Math.min(durationMs, now - startTime); postTranslate(0, incrementPerMs * currentMs - mdy); mdy = incrementPerMs * currentMs; if (currentMs < durationMs) { mHandler.post(this); } } }); } private float mdx = 0.0f; protected void postTransHorizontalDuration(final float dx, final float durationMs) { final float incrementPerMs = dx / durationMs; final long startTime = System.currentTimeMillis(); mdx = 0.0f; mHandler.post(new Runnable() { public void run() { long now = System.currentTimeMillis(); float currentMs = Math.min(durationMs, now - startTime); postTranslate(incrementPerMs * currentMs - mdx, 0); mdx = incrementPerMs * currentMs; if (currentMs < durationMs) { mHandler.post(this); } } }); } protected void panBy(float dx, float dy) { postTranslate(dx, dy); setImageMatrix(getImageViewMatrix()); } private float mDeltaX, mDeltaY; private float sx, sy; private float width, height; private float values[] = new float[9]; private float baseValue; private float originalScale; private final int NONE = 0; private final int DRAG = 1; private final int ZOOM = 2; private int mMod = 0; @Override public boolean onTouch(View v, MotionEvent event) { if (mDetector != null) { mDetector.onTouchEvent(event); } final ZoomImageView imageView = this; final int sWidth = WIDTH; final int sHeight = HEIGHT; width = imageView.getScale() * imageView.getImageWidth(); height = imageView.getScale() * imageView.getImageHeight(); Matrix matrix = imageView.getImageMatrix(); matrix.getValues(values); float x = event.getX(); float y = event.getY(); switch (event.getAction() & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: mMod = DRAG; baseValue = 0; originalScale = imageView.getScale(); mDeltaX = 0; mDeltaY = 0; sx = x; sy = y; break; case MotionEvent.ACTION_POINTER_DOWN: mMod = ZOOM; break; case MotionEvent.ACTION_MOVE: if (event.getPointerCount() == 2) { mMod = ZOOM; } float deltaX = sx - x; float deltaY = sy - y; sx = x; sy = y; if (deltaX != 0.0f) { mDeltaX = deltaX; } if (deltaY != 0.0f) { mDeltaY = deltaY; } switch (mMod) { case DRAG: final float left = values[Matrix.MTRANS_X]; final float right = left + width; if(right < sWidth && Math.abs(right - sWidth) >= 0.0001f && right < width) { v.getParent().requestDisallowInterceptTouchEvent(false); } else if(right > width) { v.getParent().requestDisallowInterceptTouchEvent(false); } else { v.getParent().requestDisallowInterceptTouchEvent(true); } if (width < sWidth) { deltaX = 0.0f; mDeltaX = deltaX; } if (height < sHeight) { deltaY = 0.0f; mDeltaY = deltaY; } imageView.postTranslate(-deltaX, -deltaY); break; case ZOOM: if (event.getPointerCount() < 2) { return true; } float dx = event.getX(0) - event.getX(1); float dy = event.getY(0) - event.getY(1); float value = FloatMath.sqrt(dx * dx + dy * dy); if (baseValue == 0) { baseValue = value; } else { float scale = value / baseValue; // scale the image imageView.zoomTo(originalScale * scale, (event.getX(0) + event.getX(1)) / 2, (event.getY(0) + event.getY(1)) / 2, false); } break; default: } break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: final float left = values[Matrix.MTRANS_X]; final float right = left + width; final float top = values[Matrix.MTRANS_Y]; final float bottom = top + height; switch (mMod) { case DRAG: final float startX = mDeltaX; final float startY = mDeltaY; if (startX != 0) { if (right < sWidth) { // ((ViewPager) v.getParent()).requestDisallowInterceptTouchEvent(false); postTransHorizontalDuration(sWidth - right, 200.0f); } if (left >= 0) { postTransHorizontalDuration(-left, 200.0f); } } if (startY != 0) { if (bottom < sHeight) { postTransVerticalDuration(sHeight - bottom, 200.0f); } if (top > 0) { postTransVerticalDuration(-top, 200.0f); } } break; case ZOOM: final float sr = getScaleRate(); final float scale = getScale(); mDoubleClick = false; if (sr > scale) { imageView.zoomTo(sr, sWidth / 2, sHeight / 2, 200.0f); return true; } else if (mMaxZoom < scale) { imageView.zoomBigToSmall(sr, sWidth / 2, sHeight / 2, 300.0f); return true; } break; } mMod = NONE; break; default: } return true; } private boolean mDoubleClick; private GestureDetector mDetector; private OnSimpleListener listener; public void doubleClick() { float scale = getScale(); if (!mDoubleClick) { zoomTo(1.0f); mDoubleClick = true; } else if (scale == 1.0f) { zoomTo(2.0f); } else if (scale == 2.0f) { zoomTo(4.0f); } else if (scale == 4.0f) { zoomTo(1.0f); } } @Override public boolean onDown(MotionEvent e) { // TODO Auto-generated method stub return false; } @Override public void onShowPress(MotionEvent e) { // TODO Auto-generated method stub } @Override public boolean onSingleTapUp(MotionEvent e) { // TODO Auto-generated method stub if(listener != null) { listener.setOnSimpleClickListenr(); } return true; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // TODO Auto-generated method stub return false; } @Override public void onLongPress(MotionEvent e) { // TODO Auto-generated method stub } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { // TODO Auto-generated method stub return false; } public interface OnSimpleListener { void setOnSimpleClickListenr(); } public void setOnSimpleClickListenr(OnSimpleListener listener) { this.listener = listener; } }
为了不和ViewPager的滑动冲突 主要是在action_move里面加了一个判断:
final float left = values[Matrix.MTRANS_X]; final float right = left + width; if(right < sWidth && Math.abs(right - sWidth) >= 0.0001f && right < width) { v.getParent().requestDisallowInterceptTouchEvent(false); } else if(right > width) { v.getParent().requestDisallowInterceptTouchEvent(false); } else { v.getParent().requestDisallowInterceptTouchEvent(true); }
需要源码的M我~~~