Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pinch Zoom ListView Android

I'm trying to implement a pinch to zoom in a listview on Android and I'm facing a problem when I click and drag the zoomed list view. First, here's the code:

public class ScaleListView extends ListView {

private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;
private float x = 0;
private float y = 0;
private float startx = 0;
private float starty = 0;
private boolean canClick = true;
private float xtranslation = 0;

public ScaleListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
        startx = ev.getX();
        starty = ev.getY();
    }

    if (ev.getPointerCount() > 1) {
        y = ev.getY();
        x = ev.getX();
    } else if (ev.getAction() == MotionEvent.ACTION_UP) {
        canClick = (ev.getX() - startx) == 0 && (ev.getY() - starty) == 0 && mScaleFactor == 1;
    } else if(ev.getAction() == MotionEvent.ACTION_MOVE){
        xtranslation = ev.getX() - startx;
    }       
    mScaleDetector.onTouchEvent(ev);
    return super.onTouchEvent(ev);
}   
@Override
public void onDraw(Canvas canvas) {
    canvas.scale(mScaleFactor, mScaleFactor, x , y);
    canvas.translate(xtranslation, 0);
    super.onDraw(canvas);
}
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        canClick = false;
        mScaleFactor *= detector.getScaleFactor();

        // Don't let the object get too small or too large.
        mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f));

        if (mScaleFactor <= 1) {
            mScaleFactor = 1;
            canClick = true;
        }

        xPos = ScaleListView.this.getWidth() - detector.getFocusX();

        ScaleListView.this.invalidate();
        return true;
    }
}   
public boolean canClick(){
    return canClick;
}

The problem is with the translation. It goes infinite, I can drag it horizontally and take the list view off the viewport. So I can't face how to put an edge to the translation... Thanks for any help.

like image 778
Augusto Avatar asked Jan 14 '13 19:01

Augusto


2 Answers

I just put together a working class for this. Let me know if it works for you. https://github.com/Xjasz/AndroidZoomableViewGroup

like image 131
Xjasz Avatar answered Sep 21 '22 11:09

Xjasz


follwing code restricts my textview to screens edges.. Hope this will help you in your listview ..I had done this code on ACTION:Move

layoutParams.leftMargin = X - _xDelta;
                    layoutParams.topMargin = Y - _yDelta;
                    if (layoutParams.leftMargin < 0) {
                        layoutParams.leftMargin = 20;
                    } else if (layoutParams.leftMargin > mainimage.getWidth()) {
                        layoutParams.leftMargin = mainimage.getWidth() - 20;
                    }
                    if (layoutParams.topMargin < 0) {
                        layoutParams.topMargin = 20;
                    } else if (layoutParams.topMargin > mainimage.getHeight() - 100) {
                        text.setText(text2.getText().toString());
                        layoutParams.topMargin = mainimage.getHeight() - 90
                                - text.getHeight();
                        // layoutParams.leftMargin = 20;
                    }

                    text.setX(layoutParams.leftMargin);
                    text.setY(layoutParams.topMargin);

                    v.setLayoutParams(text.getLayoutParams());
like image 26
vaibhav Avatar answered Sep 18 '22 11:09

vaibhav