Android : Zoom by center pinch

Question

So, I have ScrollView, HorizantalScrollView and BoardView for TicTacToe game.

When user zooms, while i redraw scale into categories of cells through ScalegestureDetector zoom pinch is allocated on top, left of the screen, not at the centre of pinches, how can I allocate it to the center?

here is my project in github: https://github.com/boyfox/TestTicTac.git

Project used com.android.support:appcompat-v7

Anybody have a solution to this problem?

Answer 1

I think that you will want to move to an implementation closer to the Android Dragging and Scaling examples (and to the similar question here).

This is the start of what you need. You can pan the view as before and now scale the view at the center of the pinch gesture. It is your base BoardView with logic to draw points on clicks from here. It should be pretty easy to draw your custom X and O icons instead of circles.

BoardView.java

public class BoardView extends View {

    private static final int JUST_SCALED_DURATION = 100;
    private static final int MAX_TOUCH_DURATION = 1000;
    private static final int MAX_TOUCH_DISTANCE = 10;
    private boolean stayedWithinTouchDistance;
    private float firstTouchX, firstTouchY;
    private long firstTouchTime, lastScaleTime;

    private float posX, posY, lastTouchX, lastTouchY;
    private ScaleGestureDetector scaleDetector;
    private float minScaleFactor = 0.1f;
    private float maxScaleFactor = 5.0f;
    private float scaleFactor = 1.0f;
    private float cellSize = 50.0f;
    private int numCells = 50;

    private ArrayList<Point> points;
    private Paint linePaint, pointPaint;

    public BoardView(Context context) {
        this(context, null, 0);
    }

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

    public BoardView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        points = new ArrayList<>();
        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setColor(-65536);
        linePaint.setStrokeWidth(1.0f);
        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setColor(-65536);
        pointPaint.setStrokeWidth(1.0f);
        posX = linePaint.getStrokeWidth();
        posY = linePaint.getStrokeWidth();
        scaleDetector = new ScaleGestureDetector(context, new ScaleListener());
    }

    private static float distancePx(float x1, float y1, float x2, float y2) {
        float dx = x1 - x2;
        float dy = y1 - y2;
        return (float) Math.sqrt(dx * dx + dy * dy);
    }

    private float distanceDp(float distancePx) {
        return distancePx / getResources().getDisplayMetrics().density;
    }

    private Point coerceToGrid(Point point) {
        point.x = (int) ((((int) (point.x / cellSize)) * cellSize) + (cellSize / 2));
        point.y = (int) ((((int) (point.y / cellSize)) * cellSize) + (cellSize / 2));
        return point;
    }

    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        scaleDetector.onTouchEvent(event);
        final int action = MotionEventCompat.getActionMasked(event);
        if (action == MotionEvent.ACTION_DOWN) {
            stayedWithinTouchDistance = true;
            firstTouchX = lastTouchX = event.getRawX();
            firstTouchY = lastTouchY = event.getRawY();
            firstTouchTime = System.currentTimeMillis();
        } else if (action == MotionEvent.ACTION_MOVE) {
            float thisTouchX = event.getRawX();
            float thisTouchY = event.getRawY();

            boolean justScaled = System.currentTimeMillis() - lastScaleTime < JUST_SCALED_DURATION;
            float distancePx = distancePx(firstTouchX, firstTouchY, thisTouchX, thisTouchY);
            stayedWithinTouchDistance = stayedWithinTouchDistance &&
                    distanceDp(distancePx) < MAX_TOUCH_DISTANCE;

            if (!stayedWithinTouchDistance && !scaleDetector.isInProgress() && !justScaled) {
                posX += thisTouchX - lastTouchX;
                posY += thisTouchY - lastTouchY;
                invalidate();
            }

            lastTouchX = thisTouchX;
            lastTouchY = thisTouchY;
        } else if (action == MotionEvent.ACTION_UP) {
            long touchDuration = System.currentTimeMillis() - firstTouchTime;
            if (touchDuration < MAX_TOUCH_DURATION && stayedWithinTouchDistance) {
                int[] location = {0, 0};
                getLocationOnScreen(location);
                float x = ((lastTouchX - posX - location[0]) / scaleFactor);
                float y = ((lastTouchY - posY - location[1]) / scaleFactor);
                points.add(coerceToGrid(new Point((int) x, (int) y)));
                invalidate();
            }
        }
        return true;
    }

    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            lastScaleTime = System.currentTimeMillis();
            float scale = detector.getScaleFactor();
            scaleFactor = Math.max(minScaleFactor, Math.min(scaleFactor * scale, maxScaleFactor));
            if (scaleFactor > minScaleFactor && scaleFactor < maxScaleFactor) {
                float centerX = detector.getFocusX();
                float centerY = detector.getFocusY();
                float diffX = centerX - posX;
                float diffY = centerY - posY;
                diffX = diffX * scale - diffX;
                diffY = diffY * scale - diffY;
                posX -= diffX;
                posY -= diffY;
                invalidate();
                return true;
            }
            return false;
        }
    }

    private float getScaledCellSize() {
        return scaleFactor * cellSize;
    }

    private float getScaledBoardSize() {
        return numCells * getScaledCellSize();
    }

    private void drawBoard(Canvas canvas) {
        for (int i = 0; i <= numCells; i++) {
            float total = getScaledBoardSize();
            float offset = getScaledCellSize() * i;
            canvas.drawLine(offset, 0, offset, total, linePaint);
            canvas.drawLine(0, offset, total, offset, linePaint);
        }
    }

    private void drawPoints(Canvas canvas) {
        for (Point point : points) {
            float x = point.x * scaleFactor;
            float y = point.y * scaleFactor;
            float r = getScaledCellSize() / 4;
            canvas.drawCircle(x, y, r, pointPaint);
        }
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float total = getScaledBoardSize();
        float edge = linePaint.getStrokeWidth();
        posX = Math.max(Math.min(edge, getWidth() - total - edge), Math.min(edge, posX));
        posY = Math.max(Math.min(edge, getHeight() - total - edge), Math.min(edge, posY));

        canvas.save();
        canvas.translate(posX, posY);
        drawBoard(canvas);
        drawPoints(canvas);
        canvas.restore();
    }

}

activity_main.xml

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

    <com.example.client.BoardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>