ViewPager圖片預覽之圖片的放大縮小，移動，切換（第三課）連載

標籤：

第三課（第三步）：支援以手指觸控的任意點為中心開始縮放

關鍵區段是在縮放的時候不斷進行邊界檢測，防止放大後縮小後出現白邊：

/** * 在縮放的時候進行邊界控制範圍位置控制 */private void checkBorderAndCenterWhenScale() {// TODO Auto-generated method stubRectF rect = getMatrixRectF();float deltaX = 0;float deltaY = 0;float width = getWidth();float height = getHeight();//縮放時進行邊界檢測，放在出現白邊if(rect.width() >= width){if(rect.left > 0){//處理左邊的空白deltaX = -rect.left;}if(rect.right < width){//處理右邊的空白deltaX = (int) (width - rect.right);}}if(rect.height() >= height){if(rect.top > 0){deltaY = -rect.top;}if(rect.bottom < height){deltaY = height - rect.bottom;}}//如果寬度或高度小於控制項的寬或高，則讓其置中if(rect.width() < width){deltaX = width/2f -rect.right + rect.width()/2f;}if(rect.height() < height){deltaY = height /2f -rect.bottom + rect.height()/2f;}mScaleMatrix.postTranslate(deltaX, deltaY);}

全部代碼：

package com.example.viewpagerimage;import android.content.Context;import android.graphics.Matrix;import android.graphics.RectF;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.ScaleGestureDetector;import android.view.ScaleGestureDetector.OnScaleGestureListener;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewTreeObserver.OnGlobalLayoutListener;import android.widget.ImageView;//實現監聽器OnGlobalLayoutListener，監聽圖片是否載入完成public class MyImageView extends ImageView implements OnGlobalLayoutListener, OnScaleGestureListener,OnTouchListener{private boolean mOnce;//判斷是否初始化private float mInitScale;//初始化時縮放的值private float mMidScale;//雙擊放大到達的值private float mMaxScale;//放大的最大值private ScaleGestureDetector mScaleGestureDetector;//捕獲使用者多指觸控縮放的比例private Matrix mScaleMatrix;public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//initmScaleMatrix = new Matrix();setScaleType(ScaleType.MATRIX);mScaleGestureDetector = new ScaleGestureDetector(context, this);setOnTouchListener(this);//當圖片載入時，圖片可能很大，也可能很小，需要讓圖片自適應螢幕大小，當圖片太大時自動縮小到螢幕大小，當圖片太小時放大到螢幕大小。}public MyImageView(Context context, AttributeSet attrs) {this(context, attrs,0);// TODO Auto-generated constructor stub}public MyImageView(Context context) {this(context,null);// TODO Auto-generated constructor stub}@Overrideprotected void onAttachedToWindow() {// TODO Auto-generated method stubsuper.onAttachedToWindow();//當View 顯示在螢幕上時調用getViewTreeObserver().addOnGlobalLayoutListener(this);//註冊介面}@SuppressWarnings("deprecation")@Overrideprotected void onDetachedFromWindow() {// TODO Auto-generated method stubsuper.onDetachedFromWindow();//當View從螢幕上移除時調用getViewTreeObserver().removeGlobalOnLayoutListener(this);//移除介面}/** * 擷取ImageView載入完成的圖片 */@Overridepublic void onGlobalLayout() {// 全域的布局完成後調用if(!mOnce){//得到控制項的寬和高int width = getWidth();int height = getHeight();//得到我們的圖片以及寬和高Drawable d = getDrawable();if(d == null)return;int dw = d.getIntrinsicWidth();int dh = d.getIntrinsicHeight();float scale = 1.0f;//縮放值//如果圖片的寬度大於控制項高度，但是寬度小於控制項的寬度，將其縮小if(dw > width && dh < height){scale = width*1.0f/dw;}else if(dh > height && dw < width){scale = height*1.0f /dh;}else if(dw > width && dh > height){scale = Math.min(width*1.0f/dw, height*1.0f/dh);}else if(dw < width && dh < height){scale = Math.min(width *1.0f/dw, height*1.0f/dh);}/* * 得到初始化時縮放的比例 * */mInitScale = scale;mMaxScale = mInitScale * 4;mMidScale = mInitScale * 2;//將圖片移動到當前控制項的中心int dx = getWidth()/2 - dw /2;int dy = getHeight()/2 - dh/2;mScaleMatrix.postTranslate(dx, dy);//平移mScaleMatrix.postScale(mInitScale, mInitScale,width/2,height/2);//縮放,後面兩個參數是縮放的中心點setImageMatrix(mScaleMatrix);mOnce = true;}}/** * 擷取當前圖片的縮放值 * @return */public float getScale(){float[] values = new float[9];mScaleMatrix.getValues(values);return values[Matrix.MSCALE_X];}//縮放的區間，initScale maxScale@Overridepublic boolean onScale(ScaleGestureDetector detector) {// TODO Auto-generated method stubfloat scale = getScale();float scaleFactor = detector.getScaleFactor();//得到縮放的值if(getDrawable() == null){return true;}//縮放範圍的控制if((scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f)){if(scale * scaleFactor < mInitScale){scaleFactor = mInitScale / scale;//當手指縮放小於最小值時 ，預設顯示最小的比例}if(scale * scaleFactor > mMaxScale){//當手指縮放大于于最大值時 ，預設顯示最大的比例scale = mMaxScale/scale;}//縮放,縮放中心是手指觸控的地方mScaleMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(),detector.getFocusY());checkBorderAndCenterWhenScale();setImageMatrix(mScaleMatrix);}return true;//設定完成返回true保證事件能夠進行}/** * 獲得圖片放大縮小以後的寬和高以及l r t b * @return */private RectF getMatrixRectF(){Matrix matrix = mScaleMatrix;RectF recF = new RectF();Drawable d = getDrawable();if(d != null){recF.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());matrix.mapRect(recF);}return recF;}/** * 在縮放的時候進行邊界控制範圍位置控制 */private void checkBorderAndCenterWhenScale() {// TODO Auto-generated method stubRectF rect = getMatrixRectF();float deltaX = 0;float deltaY = 0;float width = getWidth();float height = getHeight();//縮放時進行邊界檢測，放在出現白邊if(rect.width() >= width){if(rect.left > 0){//處理左邊的空白deltaX = -rect.left;}if(rect.right < width){//處理右邊的空白deltaX = (int) (width - rect.right);}}if(rect.height() >= height){if(rect.top > 0){deltaY = -rect.top;}if(rect.bottom < height){deltaY = height - rect.bottom;}}//如果寬度或高度小於控制項的寬或高，則讓其置中if(rect.width() < width){deltaX = width/2f -rect.right + rect.width()/2f;}if(rect.height() < height){deltaY = height /2f -rect.bottom + rect.height()/2f;}mScaleMatrix.postTranslate(deltaX, deltaY);}@Overridepublic boolean onScaleBegin(ScaleGestureDetector detector) {// TODO Auto-generated method stubreturn true;//必須返回true}@Overridepublic void onScaleEnd(ScaleGestureDetector detector) {// TODO Auto-generated method stub}@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubmScaleGestureDetector.onTouchEvent(event);//把event傳遞給mscaleGestureDetector處理return true;//必須返true}}

：左邊是原圖，右邊是放大右上方的圖

ViewPager圖片預覽之圖片的放大縮小，移動，切換（第三課）連載