How to zoom list item from center of pinch

I am working on a simple book reader app for Android. I have used the listview for this.

What I am doing is loading the remote images from server into my Listview (Using the picasso library) and is working fine.

I also wanted to zoom functionality in my Reader, well I used ZoomListView class to achieve this.

public class ZoomListView extends ListView {
private static final int INVALID_POINTER_ID = -1;
private int mActivePointerId = INVALID_POINTER_ID;
private ScaleGestureDetector mScaleDetector;

private float mScaleFactor = 1.f;
private float maxWidth = 0.0f;
private float maxHeight = 0.0f;
private float mLastTouchX;
private float mLastTouchY;
private float mPosX;
private float mPosY;
private float width;
private float height;

public ZoomListView(Context context) {
    super(context);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

public ZoomListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

public ZoomListView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mScaleDetector = new ScaleGestureDetector(getContext(),
            new ScaleListener());
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    width = MeasureSpec.getSize(widthMeasureSpec);
    height = MeasureSpec.getSize(heightMeasureSpec);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent ev) {
    super.onTouchEvent(ev);
    final int action = ev.getAction();
    mScaleDetector.onTouchEvent(ev);
    switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN: {
        final float x = ev.getX();
        final float y = ev.getY();

        mLastTouchX = x;
        mLastTouchY = y;

        mActivePointerId = ev.getPointerId(0);
        break;
    }

    case MotionEvent.ACTION_MOVE: {
        final int pointerIndex = ev.findPointerIndex(mActivePointerId);
        final float x = ev.getX(pointerIndex);
        final float y = ev.getY(pointerIndex);
        final float dx = x - mLastTouchX;
        final float dy = y - mLastTouchY;

        mPosX += dx;
        mPosY += dy;

        if (mPosX > 0.0f)
            mPosX = 0.0f;
        else if (mPosX < maxWidth)
            mPosX = maxWidth;

        if (mPosY > 0.0f)
            mPosY = 0.0f;
        else if (mPosY < maxHeight)
            mPosY = maxHeight;

        mLastTouchX = x;
        mLastTouchY = y;

        invalidate();
        break;
    }

    case MotionEvent.ACTION_UP: {
        mActivePointerId = INVALID_POINTER_ID;
        break;
    }

    case MotionEvent.ACTION_CANCEL: {
        mActivePointerId = INVALID_POINTER_ID;
        break;
    }

    case MotionEvent.ACTION_POINTER_UP: {
        final int pointerIndex = (action & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
        final int pointerId = ev.getPointerId(pointerIndex);
        if (pointerId == mActivePointerId) {
            final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
            mLastTouchX = ev.getX(newPointerIndex);
            mLastTouchY = ev.getY(newPointerIndex);
            mActivePointerId = ev.getPointerId(newPointerIndex);
        }
        break;
    }
    }

    return true;
}

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    canvas.translate(mPosX, mPosY);
    canvas.scale(mScaleFactor, mScaleFactor);
    canvas.restore();
}

@Override
protected void dispatchDraw(@NonNull Canvas canvas) {
    canvas.save(Canvas.MATRIX_SAVE_FLAG);
    if (mScaleFactor == 1.0f) {
        mPosX = 0.0f;
        mPosY = 0.0f;
    }
    canvas.translate(mPosX, mPosY);
    canvas.scale(mScaleFactor, mScaleFactor);
    super.dispatchDraw(canvas);
    canvas.restore();
    invalidate();
}

private class ScaleListener extends
        ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        mScaleFactor *= detector.getScaleFactor();
        mScaleFactor = Math.max(1.0f, Math.min(mScaleFactor, 4.0f));
        maxWidth = width - (width * mScaleFactor);
        maxHeight = height - (height * mScaleFactor);
        invalidate();
        return true;
    }
}

}

Here is my XML layout (I have showed only the ZoomListView):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="top"
    android:visibility="visible" >

    <libraries.ZoomListView
        android:id="@+id/lstv_book_reader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="0dp"
        android:paddingTop="0dp" >
    </libraries.ZoomListView>
</RelativeLayout>
</RelativeLayout>

This enabled me to zoom my book reader. My book reader looks like

Problem: I am getting issue in my pinch zoom. When I am pinching the zoom is starting from top left of the listview.

Let me describe with images

1 Pinch

2 Current Output

Note: This Zoomed the listview from topleft corner

3 Recommended Output

回答1:

Approach one:

To zoom from the center of list,get the zoom center by calling detector.getFocusX(); and detector.getFocusY();.Now use this center in your scaling logic.

Change your onScale() implementation-something like below:

    mPosX = detector.getFocusX();
    mPosY = detector.getFocusY();

Approach two (which I am currently using):

Put your view in scroll view.
Resize your view.
Calculate how much the center has moved.(Take the diff of detector.getFocusX() and detector.getFocusY() before and after the resizing)
use parent.scrollBy(dx,dy) to recenter the view.

If it helps-this is some part from my centering code.

    if (isZoomOnGoing && mPreviousWidth != 0 && Math.abs(mCenterDiff) > 0) {
            float ratioBeforeAdjustment = mCurrentZoomFocus / (float) (mTotalWidth - mCurrentZoomFocus);//
            float ratioDiff = reducePrecision(mStartZoomRatio) - reducePrecision(ratioBeforeAdjustment);
            float x1 = mStartZoomRatio * mTotalWidth / (1.0f + mStartZoomRatio);
            float y1 = mTotalWidth - x1;
            float currentRatio = x1 / y1;//
            int currentScrollBy = (int) (x1 - mCurrentZoomFocus);
            int scrollDiff = 0;
            if (mPreviousScrollBy != 0 && Math.abs(ratioDiff) > 1) {
                scrollDiff = currentScrollBy - mPreviousScrollBy;
            }
            //    if (scrollDiff>5) {//To avoid flickering//TODO do we need this
            parent.scrollBy(currentScrollBy, 0);
//            } else {
//                Log.d(TAG, "drawActualGraph skipping scroll because scrollDiff <5 ");
//            }
            mPreviousScrollBy = currentScrollBy;

回答2:

it means you want to change the default property that is zoom (scaling) always starts from (0,0) that is:

_____________
|0,0 x       |
|y           |
|            |   Suppose this the device screen
|            |
|            |
______________

And you want to scale it from:

_____________
|            |
|            |
|            |   Suppose this the device screen
|          y |
|       X 0,0|
______________

So to achieve this: Change you code from this:

canvas.scale(mScaleFactor, mScaleFactor);

to this:

canvas.scale(mScaleFactor, -mScaleFactor);

also see this question which relates with your question: Android: Drawing to canvas, way to make bottom left correspond to (0,0)? I have i you got your solution from this example and code snippet.

回答3:

Try to use getPivotX() and getPivotY(). By def they are 0 , 0 that's why it starts scaling from top left corner.
Try to get pivots from where it's touched and change your
canvas.scale(...) to
canvas.scale(mScaleFactor, mScaleFactor, pivotx, pivoty);