How to limit image pan boundary in Android imageView

Question

I have an imageView with multitouch roughly based on this tutorial. One of the commenters there put together a semi-dirty method of limiting the image drag to the boundaries of the image, so that the image edge cannot be dragged beyond its edge. This method sorta works, but not entirely. It only limits drag of two edges.

Does anyone know a less messy and actually functional method for limiting image drag?

This is a highly important concept for android app development that is not adequately addressed....

I was thinking of the following ideas:

1) setScaleType(scaleType.fitXY) when zoom = 1.0F (i.e. min zoom), and drag only enabled when zoom > 1.0f

2) when zoom > 1.0f, setScaleType(scaleType.MATRIX), then you determine image bounds and screen dimensions, and in some way that is too smart for me, using an if statement you only allow drag when the image edge is not on the screen. I don't know how to declare that, is the thing.

anyways, for completeness, here is the limit pan code from that link. This seems to be the most popular suggestion on stackoverflow, but I think we can do better:

// limit pan
matrix.getValues(matrixValues);
float currentY = matrixValues[Matrix.MTRANS_Y];
float currentX = matrixValues[Matrix.MTRANS_X];
float currentScale = matrixValues[Matrix.MSCALE_X];
float currentHeight = height * currentScale;
float currentWidth = width * currentScale;
float dx = event.getX() - start.x;
float dy = event.getY() - start.y;
float newX = currentX+dx;
float newY = currentY+dy; 

RectF drawingRect = new RectF(newX, newY, newX+currentWidth, newY+currentHeight);
float diffUp = Math.min(viewRect.bottom-drawingRect.bottom, viewRect.top-drawingRect.top);
float diffDown = Math.max(viewRect.bottom-drawingRect.bottom, viewRect.top-drawingRect.top);
float diffLeft = Math.min(viewRect.left-drawingRect.left, viewRect.right-drawingRect.right);
float diffRight = Math.max(viewRect.left-drawingRect.left, viewRect.right-drawingRect.right);
if(diffUp > 0 ){
dy +=diffUp; 
}
if(diffDown < 0){
dy +=diffDown;
} 
if( diffLeft> 0){ 
dx += diffLeft;
}
if(diffRight < 0){
dx += diffRight;
}
matrix.postTranslate(dx, dy);

Answer 1

private void limitDrag(Matrix m, ImageView view) {


    float[] values = new float[9];
    m.getValues(values);
    float transX = values[Matrix.MTRANS_X];
    float transY = values[Matrix.MTRANS_Y];
    float scaleX = values[Matrix.MSCALE_X];
    float scaleY = values[Matrix.MSCALE_Y];

    Rect bounds = view.getDrawable().getBounds();
    int viewWidth = getResources().getDisplayMetrics().widthPixels;
    int viewHeight = getResources().getDisplayMetrics().heightPixels;



    if(viewHeight<=480)
    {

        _y_up=0;
    }
    if(viewHeight>480&&viewHeight<980)
    {

        _y_up=140;
    }

    int width = bounds.right - bounds.left;
    int height = bounds.bottom - bounds.top;
    int __width=width;
    int __height=height;
    width = viewWidth / 2;
    height = viewHeight / 2;


    //height = 200 ;
    float minX = (-width) ;//* scaleX;
    float minY = (-height) ;//* scaleY;


    if ((transX) > (viewWidth)) {

        //_x_left

        transX = viewWidth;
    } else if (transX < minX) {


        transX = minX;
    }


    if ((-transX) > (viewWidth)) {
             // _x_right
        transX = -(viewWidth);
    } else if (-transX < minX) {

        transX = -(minX+30);
    }



    if ((transY) > (viewHeight)) {
    //  _y_up
        transY =( viewHeight);


    } else if (transY < minY) {

        transY = (minY+_y_up);
    }

    if ((-transY) > (viewHeight)) {
    //  _y_down
        transY = -(viewHeight);

    } else if (-transY < minY) {

        transY = -(minY+170);
    }

    values[Matrix.MTRANS_X] = transX;
    values[Matrix.MTRANS_Y] = transY;
    m.setValues(values);
}

call this above your view.setImageMatrix(matrix) ;

Answer 2

I realize this is rather old now, but try this. imageWidth and imageHeight are unscaled values.

private void limitDrag(Matrix m, ImageView view, int imageWidth, int imageHeight) {
    float[] values = new float[9];
    m.getValues(values);
    float[] orig = new float[] {0,0, imageWidth, imageHeight};
    float[] trans = new float[4];
    m.mapPoints(trans, orig);

    float transLeft = trans[0];
    float transTop = trans[1];
    float transRight = trans[2];
    float transBottom = trans[3];
    float transWidth = transRight - transLeft;
    float transHeight = transBottom - transTop;

    float xOffset = 0;
    if (transWidth > view.getWidth()) {
        if (transLeft > 0) {
            xOffset = -transLeft;
        } else if (transRight < view.getWidth()) {
            xOffset = view.getWidth() - transRight;
        }
    } else {
        if (transLeft < 0) {
            xOffset = -transLeft;
        } else if (transRight > view.getWidth()) {
            xOffset = -(transRight - view.getWidth());
        }
    }

    float yOffset = 0;
    if (transHeight > view.getHeight()) {
        if (transTop > 0) {
            yOffset = -transTop;
        } else if (transBottom < view.getHeight()) {
            yOffset = view.getHeight() - transBottom;
        }
    } else {
        if (transTop < 0) {
            yOffset = -transTop;
        } else if (transBottom > view.getHeight()) {
            yOffset = -(transBottom - view.getHeight());
        }
    }

    float transX = values[Matrix.MTRANS_X];
    float transY = values[Matrix.MTRANS_Y];

    values[Matrix.MTRANS_X] = transX + xOffset;
    values[Matrix.MTRANS_Y] = transY + yOffset;
    m.setValues(values);
}