如何从捏中心放大列表项 [英] How to zoom list item from center of pinch

问题描述

我正在为Android简单的电子书阅读器应用程序。我已经使用了列表视图这一点。

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.

我也想在我的阅读器缩放功能，以及我曾经ZoomListView类来实现这一点。

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;
    }
}

}

下面是我的XML布局，的注：我只有表现出ZoomListView 的

Here is my XML layout, Note: 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.

让我描述的图像

1捏

2电流输出

的注：此缩放从左上边角列表视图的

3推荐的输出

我希望我已经成功地解释我的问题。

I hope I have succeeded in explaining my question.

请帮我在这方面

推荐答案

办法之一：

要从列表中央放大，通过调用拿到变焦中心 detector.getFocusX（）; 和 detector.getFocusY（）; < /$c$c>.Now在缩放逻辑使用这个中心。

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.

更改 onScale（）实现类似如下：

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

方法有两个（我目前使用）：

• 放入滚动视图您的视图。


• 调整您的视图。


• 计算多少该中心已移动。（调整大小之前和之后采取detector.getFocusX（）和detector.getFocusY（）的差异）


• 使用parent.scrollBy（DX，DY）以重新定位的看法。

如果它有助于 - 这是一些部分从我的定心code。

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);

//}其他{
// Log.d（TAGdrawActualGraph跳过涡旋因为scrollDiff小于5）;
//}
            米previousScrollBy = currentScrollBy;

// } else { // Log.d(TAG, "drawActualGraph skipping scroll because scrollDiff <5 "); // } mPreviousScrollBy = currentScrollBy;

这篇关于如何从捏中心放大列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！