Как увеличить список элементов из центра пинча
Я работаю над простым приложением для чтения книг для Android. Я использовал список для этого.
То, что я делаю, это загрузка удаленных изображений с сервера в мой список (использование библиотеки picasso) и работает нормально.
Я также хотел увеличить функциональность в своем Reader, так что для этого я использовал класс ZoomListView.
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):
<?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>
Это позволило мне увеличить число моих читателей. Мой читатель книг выглядит как
![введите описание изображения здесь]()
Проблема:
Я получаю проблему в моем увеличенном зуме. Когда я зажимаю зум, начинаем с левого верхнего края списка.
Позвольте мне описать изображения
1 Pinch
![введите описание изображения здесь]()
2 Токовый выход
Примечание. Это увеличено для просмотра списка из тупого угла.
![введите описание изображения здесь]()
3 Рекомендуемый выход
![введите описание изображения здесь]()
Ответы
Ответ 1
Подходите к одному:
Чтобы увеличить масштаб от центра списка, получите центр масштабирования, вызвав detector.getFocusX();
и detector.getFocusY();
. Теперь используйте этот центр в своей логике масштабирования.
Измените реализацию onScale()
, как показано ниже:
mPosX = detector.getFocusX();
mPosY = detector.getFocusY();
Подход двух (которые я использую в настоящее время):
- Поместите свое представление в режим прокрутки.
- Измените размер вашего представления.
- Рассчитайте, насколько перемещен центр. (Возьмите diff detect.getFocusX() и detector.getFocusY() до и после изменения размера)
- используйте parent.scrollBy(dx, dy) для повторного просмотра представления.
Если это помогает - это часть моего централизованного кода.
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 пропускает прокрутку, потому что scrollDiff < 5" );
// } mPreviousScrollBy = currentScrollBy;
Ответ 2
это означает, что вы хотите изменить свойство по умолчанию, которое является масштабированием (масштабирование), всегда начинается с (0,0), а именно:
_____________
|0,0 x |
|y |
| | Suppose this the device screen
| |
| |
______________
И вы хотите масштабировать его:
_____________
| |
| |
| | Suppose this the device screen
| y |
| X 0,0|
______________
Чтобы достичь этого:
Измените код:
canvas.scale(mScaleFactor, mScaleFactor);
:
canvas.scale(mScaleFactor, -mScaleFactor);
также см. этот вопрос, который относится к вашему вопросу:
Android: рисование на холсте, способ сделать нижние левые соответствуют (0,0)?
У меня есть ваше решение из этого примера и фрагмента кода.
Ответ 3
Попробуйте использовать getPivotX() и getPivotY(). По def они равны 0, 0, поэтому он начинает масштабирование в верхнем левом углу.
Попробуйте получить опорные точки от того места, где он коснулся, и измените ваш canvas.scale(...)
на canvas.scale(mScaleFactor, mScaleFactor, pivotx, pivoty);