Implementing a Gallery with pinch zoom

Question

I have a gallery of images and I'm trying to enable pinch zoom on it. Separately, they work just fine. The problem is, I can't for the life of me bind the two of them together! I tried to bind the ImageZoomView in the ImageAdapter, to no avail. Should I try doing it when the user clicks the image? Does anyone have any other ideas? This is the code in ImageAdapter.class that returns the gallery elements:

    public View getView(int position, View convertView, ViewGroup parent) {

    ImageView i = new ImageView(mContext);
    Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(),mImageIds[position]);
    i.setLayoutParams(new Gallery.LayoutParams(300, 450));
    i.setScaleType(ImageView.ScaleType.FIT_XY);
    i.setBackgroundResource(mGalleryItemBackground);
    i.setImageBitmap(bitmap);
    return i;
}

And this is how I handle it in MainActivity.class:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gallery);

        Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));

        Log.i("blah","e ok");

        g.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    //            mBitmap = ImageAdapter.mImageIds[position];



 //               mZoomView = (ImageZoomView)findViewById(R.id.zoomview);
 //               mZoomView.setZoomState(mZoomControl.getZoomState());
 //               mZoomView.setImage(mBitmap);


 //               Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
            }
        });

As you can see, I tried something, but my app always crashes. :( Any help here would be appreciated.

score 2 · Accepted Answer · answered May 11 '11 at 08:47

2

You should create the ImageZoomView in the getView method, assuming the ImageZoomView is a widget of your own subclassing the ImageView widget.

answered May 11 '11 at 08:47

Vincent Mimoun-Prat

28,208
16
81
124

I tried using ImageZoomView instead of ImageView, but it crashed. :( – Lathspell May 11 '11 at 09:17
Then put the crash report in your question – Vincent Mimoun-Prat May 11 '11 at 09:27
Ok, I managed to use ImageZoomView instead of the simple ImageView. The pinch zoom works perfectly, but now, even though I can see the gallery frame in the background, I can't use swipe to move through all the pictures. *bangs head against wall* – Lathspell May 11 '11 at 09:52
You should be having a separate gallery and main image view as in http://mobiforge.com/designing/story/understanding-user-interface-android-part-3-more-views – Vincent Mimoun-Prat May 11 '11 at 10:17
I wish I could do that, but I have to implement the pinch zoom directly on top of the gallery :( – Lathspell May 11 '11 at 11:29
I ended up going with your idea; it isn't exactly what they wanted, but at least it works. Thanks. – Lathspell May 13 '11 at 14:12

score 1 · Answer 2 · answered Sep 05 '11 at 18:16

They way I have handled it is by subclassing gallery and overriding OnScroll, OnFling and OnTouch feeding the events to scaledetector and sending them on to the super-class when im on the edge of the pictures and translating the picture when im not. Bear in mind this is still work in progress but it's the closest thing I have to a working solution at this moment.

Aka it works but it's "quirky".

private class ScaleListener extends
        ScaleGestureDetector.SimpleOnScaleGestureListener {

    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        mScaleFactor = detector.getScaleFactor();
        mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f));
        Log.d(TAG, "" + mScaleFactor);
        scale(mScaleFactor, detector.getFocusX(), detector.getFocusY());
        return true;
    }
}

And

 public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (matrix == null)
                matrix = new Matrix();
            matrix.set(getSelectedImageView().getImageMatrix());
        } else if (event.getAction() == MotionEvent.ACTION_UP
                && event.getPointerCount() == 0) {
            scrolling = 0;
        }

        mScaleDetector.onTouchEvent(event);
        mGestureDetector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }

And

public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
        float distanceY) {
    if (mScaleDetector.isInProgress()) {
        scrolling = 0;
        return true;
    } else if (isAtRightEdge() && distanceX > 1) {
        matrix.postTranslate(0, -distanceY);
        getSelectedImageView().setImageMatrix(matrix);
        scrolling += distanceX;
        return super.onScroll(e1, e2, distanceX, distanceY);
    } else if (isAtLeftEdge() && distanceX < -1) {
        matrix.postTranslate(0, -distanceY);
        getSelectedImageView().setImageMatrix(matrix);
        scrolling += distanceX;
        return super.onScroll(e1, e2, distanceX, distanceY);
    } else {
        if (scrolling < 0.1 && scrolling > -0.1) {
            matrix.postTranslate(-distanceX, -distanceY);
            getSelectedImageView().setImageMatrix(matrix);
            return false;
        } else {
            matrix.postTranslate(0, -distanceY);
            getSelectedImageView().setImageMatrix(matrix);
            scrolling += distanceX;
            return super.onScroll(e1, e2, distanceX, distanceY);
        }
    }
}

Implementing a Gallery with pinch zoom

2 Answers2