（二）弥补图片自由缩放出现的间隙

      在上一篇文章中，初步实现了自定义ImageView的多点触控。但是从最终效果来看，却发现自由缩放时，图片与屏幕出现了空白间隙，这当然是让人十分厌恶的。在这篇文章中，就来解决这个问题。如果你还没读过上一篇文章，可以点击下面的链接：

http://www.cnblogs.com/fuly550871915/p/4939629.html

 

      先贴出上一篇文章所实现的最终效果图吧，如下：

      从上图中，可以看到，图片缩放后，与屏幕之间形成了很大的空白间隙。现在来解决这个问题，主要是两个方面：

（1）图片自由缩放后，它的中心点不应该移动，即依旧是屏幕的中心点。
（2）图片自由缩放后，不应该与屏幕有空白间隙，主要是指宽度上的间隙。

     

一、分析

      下面就从这两个方面着手进行分析。那么缩放后，与屏幕的宽高相比较，有几种情况呢？很简单，只有四种，缩放后的宽比屏幕的宽要大，缩放的宽比屏幕的宽要小，缩放后的高度比屏幕的高要大，缩放后的高比屏幕的高要下。其实仔细想想，因为我们前面写代码时，最下缩放比例都要求宽度为屏幕的宽，所以缩放后的宽度是不可能比屏幕宽的，不过为了完整，我们写上也无妨。以缩放后的宽比屏幕的宽要大为例，仔细分析，看下面一张图片：

 

     如果缩放后，图片为图示A的状态，此时其宽度大于屏幕宽度，与屏幕右侧出现了间隙，那么它应该往右移动，而移动的距离就是：屏幕宽度与右坐标的差值。同理，如果缩放后为B的状态，则图片应该左移，移动的距离应该是：0与图片左坐标的差值。同样的道理，如果图片缩放后比屏幕高，你应该也会分析了。就是将宽度改为了高度而已。

    再看一张图片：

      缩放后，A，B，C，D四种情况已经在上面讨论过，这样子只要缩放后出现上面四种情况，我们对其进行相应移动，图片的中心点就会依旧与原来的图片中心点重合，即与屏幕中心点重合。那么如果是E那种情况呢？针对情况E，再画一张图。如下：

      从图上可以看出，显然此时需要移动的距离是，x方向就是黄线的长度，可以这样子计算：屏幕宽度/2 - 图片右坐标+图片缩放后的宽度/2。在y方向上，同理，只是将宽度改为高度即可。

     好了，通过上面的分析，所有情况下应该移动的算法，我们都清楚了。下面就可以将它们写进代码中了。移动嘛，利用的依旧是Matrix.postTranslate方法了。

 

二、代码

      还剩下一个问题，就是怎么获得图片根据矩阵变换后的新的坐标呢？这个问题，代码中有答案。修改ZoomImageView中的代码，如下：

package com.example.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.OnScaleGestureListener;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class ZoomImageView extends ImageView implements OnGlobalLayoutListener, 
OnScaleGestureListener, OnTouchListener
{
    private boolean mOnce = false;//是否执行了一次
    
    /**
     * 初始缩放的比例
     */
    private float initScale;
    /**
     * 缩放比例
     */
    private float midScale;
    /**
     * 可放大的最大比例
     */
    private float maxScale;
    /**
     * 缩放矩阵
     */
    private Matrix scaleMatrix;
    
    /**
     * 缩放的手势监控类
     */
    private ScaleGestureDetector mScaleGestureDetector;
    

    public ZoomImageView(Context context)
    {
        this(context,null);
    }
    public ZoomImageView(Context context, AttributeSet attrs) 
    {
        this(context, attrs,0);

    }
    public ZoomImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        
        scaleMatrix = new Matrix();
        
        setScaleType(ScaleType.MATRIX);
        
        mScaleGestureDetector = new ScaleGestureDetector(context, this);
        //触摸回调
        setOnTouchListener(this);
        
    }
    
    /**
     * 该方法在view与window绑定时被调用，且只会被调用一次，其在view的onDraw方法之前调用
     */
    protected void onAttachedToWindow()
    {
        super.onAttachedToWindow();
        //注册监听器
        getViewTreeObserver().addOnGlobalLayoutListener(this);
    }
    
    /**
     * 该方法在view被销毁时被调用
     */
    @SuppressLint("NewApi") protected void onDetachedFromWindow() 
    {
        super.onDetachedFromWindow();
        //取消监听器
        getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }
    
    /**
     * 当一个view的布局加载完成或者布局发生改变时，OnGlobalLayoutListener会监听到，调用该方法
     * 因此该方法可能会被多次调用，需要在合适的地方注册和取消监听器
     */
    public void onGlobalLayout() 
    {
        if(!mOnce)
        {
            //获得当前view的Drawable
            Drawable d = getDrawable();
            
            if(d == null)
            {
                return;
            }
            
            //获得Drawable的宽和高
            int dw = d.getIntrinsicWidth();
            int dh = d.getIntrinsicHeight();
            
            //获取当前view的宽和高
            int width = getWidth();
            int height = getHeight();
            
            //缩放的比例,scale可能是缩小的比例也可能是放大的比例，看它的值是大于1还是小于1
            float scale = 1.0f;
            
            //如果仅仅是图片宽度比view宽度大，则应该将图片按宽度缩小
            if(dw>width&&dh<height)
            {
                scale = width*1.0f/dw;
            }
            //如果图片和高度都比view的大，则应该按最小的比例缩小图片
            if(dw>width&&dh>height)
            {
                scale = Math.min(width*1.0f/dw, height*1.0f/dh);
            }
            //如果图片宽度和高度都比view的要小，则应该按最小的比例放大图片
            if(dw<width&&dh<height)
            {
                scale = Math.min(width*1.0f/dw, height*1.0f/dh);
            }
            //如果仅仅是高度比view的大，则按照高度缩小图片即可
            if(dw<width&&dh>height)
            {
                scale = height*1.0f/dh;
            }
            
            //初始化缩放的比例
            initScale = scale;
            midScale = initScale*2;
            maxScale = initScale*4;
            
            //移动图片到达view的中心
            int dx = width/2 - dw/2;
            int dy = height/2 - dh/2;
            scaleMatrix.postTranslate(dx, dy);
            
            //缩放图片
            scaleMatrix.postScale(initScale, initScale, width/2, height/2);    
            
            setImageMatrix(scaleMatrix);
            mOnce = true;
        }
        
    }
    /**
     * 获取当前已经缩放的比例
     * @return  因为x方向和y方向比例相同，所以只返回x方向的缩放比例即可
     */
    private float getDrawableScale()
    {
        
        float[] values = new float[9];
        scaleMatrix.getValues(values);
        
        return values[Matrix.MSCALE_X];
        
    }

    /**
     * 缩放手势进行时调用该方法
     * 
     * 缩放范围：initScale~maxScale
     */
    public boolean onScale(ScaleGestureDetector detector)
    {
        
        if(getDrawable() == null)
        {
            return true;//如果没有图片，下面的代码没有必要运行
        }
        
        float scale = getDrawableScale();
        //获取当前缩放因子
        float scaleFactor = detector.getScaleFactor();
        
        if((scale<maxScale&&scaleFactor>1.0f)||(scale>initScale&&scaleFactor<1.0f))
        {
            //如果缩小的范围比允许的最小范围还要小，就重置缩放因子为当前的状态的因子
            if(scale*scaleFactor<initScale&&scaleFactor<1.0f)
            {
                scaleFactor = initScale/scale;
            }
            //如果缩小的范围比允许的最小范围还要小，就重置缩放因子为当前的状态的因子
            if(scale*scaleFactor>maxScale&&scaleFactor>1.0f)
            {
                scaleFactor = maxScale/scale;
            }
            
//            scaleMatrix.postScale(scaleFactor, scaleFactor, getWidth()/2, getHeight()/2);
            scaleMatrix.postScale(scaleFactor, scaleFactor,detector.getFocusX(), 
                    detector.getFocusY());
            
            checkBoderAndCenter();//处理缩放后图片边界与屏幕有间隙或者不居中的问题
            
            
            setImageMatrix(scaleMatrix);//千万不要忘记设置这个，我总是忘记
        }
        return true;
    }
    /**
211      * 处理缩放后图片边界与屏幕有间隙或者不居中的问题
212      */
213     private void checkBoderAndCenter()
214     {
215        RectF rectf = getDrawableRectF();
216        
217        int width = getWidth();
218        int height = getHeight();
219        
220        float delaX =0;
221        float delaY = 0;
222        
223        if(rectf.width()>=width)
224        {
225            if(rectf.left>0)
226            {
227              delaX = - rectf.left;  
228            }
229            
230            if(rectf.right<width)
231            {
232                delaX = width - rectf.right;
233            }   
234        }
235        
236        if(rectf.height()>=height)
237        {
238            if(rectf.top>0)
239            {
240                delaY = -rectf.top;
241            }
242            if(rectf.bottom<height)
243            {
244                delaY = height - rectf.bottom;
245            }
246        }
247        
248        if(rectf.width()<width)
249        {
250            delaX = width/2 - rectf.right+ rectf.width()/2;
251        }
252        
253        if(rectf.height()<height)
254        {
255            delaY =  height/2 - rectf.bottom+ rectf.height()/2;
256        }
257        
258        scaleMatrix.postTranslate(delaX, delaY);
259     }
260     /**
261      * 获取图片根据矩阵变换后的四个角的坐标，即left,top,right,bottom
262      * @return 
263      */
264     private RectF getDrawableRectF()
265     {
266         Matrix matrix = scaleMatrix;
267         RectF rectf = new RectF();
268         Drawable d = getDrawable();
269         if(d != null)
270         {
271             
272             rectf.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
273         }
274         
275         matrix.mapRect(rectf);
276         return  rectf;
277     }
    /**
     * 缩放手势开始时调用该方法
     */
    public boolean onScaleBegin(ScaleGestureDetector detector) 
    {    
        //返回为true，则缩放手势事件往下进行，否则到此为止，即不会执行onScale和onScaleEnd方法
        return true;
    }
    /**
     * 缩放手势完成后调用该方法
     */
    public void onScaleEnd(ScaleGestureDetector detector)
    {
        
        
    }

    /**
     * 监听触摸事件
     */
    public boolean onTouch(View v, MotionEvent event)
    {
    
        if(mScaleGestureDetector != null)
        {
            //将触摸事件传递给手势缩放这个类
            mScaleGestureDetector.onTouchEvent(event);
        }
        return true;
    }

    
  

}

 

          红色部分是我们增加的核心代码。第203行，我们增加了checkBoderAndCenter方法用来处理缩放后出现间隙空白的问题。而在getDrawableRectF方法中，通过一个Rectf拿到图片缩放后的新的坐标，这个方法需要牢牢掌握。其他的代码，都是按照上面我们分析的逻辑来编写的，相信你一定能看的懂了。注意第248行到第251行的代码可要可不要，因为我们最小的缩放比例就要求宽度必须等于屏幕宽度，因此不可能比屏幕宽度小，做这个判断没意义。好了，要修改的就这么多了。现在运行下程序，看看是否真的解决问题了呢？效果如下：

 

      依旧是在真机上录制的gif，效果还是不错的，完美解决了这个出现空隙的问题。

三、总结

      获得图片缩放后的坐标的方法，必须要掌握。如下：

/**
     * 获取图片根据矩阵变换后的四个角的坐标，即left,top,right,bottom
     * @return 
     */
    private RectF getDrawableRectF()
    {
        Matrix matrix = scaleMatrix;
        RectF rectf = new RectF();
        Drawable d = getDrawable();
        if(d != null)
        {
            
            rectf.set(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
        }
        
        matrix.mapRect(rectf);
        return  rectf;
    }

 

      自由缩放算是告一段落了，下面我们要实现的是图片的自由移动。保存好代码，快进入下一节吧：《（三）多点触控之自由移动缩放后的图片》