Image Zoom Issue with Universal Image Loader and View Pager

Question

I'd like to use ImageViewZoom with Universal Image Loader in ImagePagerActivity.

I am able to zoom the image, Swipe to the next image. But i am facing problem when image is in Zoom position.

if an image is zoomed and i am at center position, if i want to see the right side part of the same image and swipe left it is going to the next image. Please help me in doing this.

here is my XML code:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="1dip" >

  <it.sephiroth.android.library.imagezoom.ImageViewTouch
     android:layout_weight="1"
     android:id="@+id/image"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:scaleType="fitCenter" />

  <ProgressBar
    android:id="@+id/loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:visibility="gone" />

</FrameLayout>

EDIT:

Thank you NOSTRA, Now i am able to control the zoom and slide with the below code. But the problem with Multi touch zoom. I am not able to zoom with two fingers.

Here is my previous code(working fine with two finger):

public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {


        @Override
        public boolean onScale( ScaleGestureDetector detector ) {
            Log.d( LOG_TAG, "onScale" );
            float span = detector.getCurrentSpan() - detector.getPreviousSpan();
            float targetScale = mCurrentScaleFactor * detector.getScaleFactor();
            if ( mScaleEnabled ) {
                targetScale = Math.min( getMaxZoom(), Math.max( targetScale, getMinZoom()-0.1f ) );
                zoomTo( targetScale, detector.getFocusX(), detector.getFocusY() );
                mCurrentScaleFactor = Math.min( getMaxZoom(), Math.max( targetScale, getMinZoom()-1.0f ) );
                mDoubleTapDirection = 1;
                invalidate();
                return true;
            }
            return false;
        }
    }

And here is the Modified one:

public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            externalScaleListener.onScaleBegin();
                return super.onScaleBegin(detector);
        }
        @Override
        public void onScaleEnd(ScaleGestureDetector detector) {
            externalScaleListener.onScaleEnd(mCurrentScaleFactor);
        }
    }

Answer 1

First you must be able to listen scaling of image. ImageViewTouch doesn't support this feature (e.g gesture-imageview support it) so you should implement it yourself.

Change ImageViewTouch.java like this:

public class ImageViewTouch extends ImageViewTouchBase {

    ...

    private OnPageScaleListener externalScaleListener;

    public void setOnScaleListener(OnPageScaleListener onScaleListener) {
        this.externalScaleListener = onScaleListener;
    }

    public interface OnPageScaleListener {
        void onScaleBegin();

        void onScaleEnd(float scale);
    }

    @Override
    protected void onZoom(float scale) {
        super.onZoom(scale);
        if (!mScaleDetector.isInProgress()) {
            mCurrentScaleFactor = scale;
            externalScaleListener.onScaleEnd(scale);
        }
    }

    public class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            externalScaleListener.onScaleBegin();
                return super.onScaleBegin(detector);
        }

        ...

        @Override
        public void onScaleEnd(ScaleGestureDetector detector) {
            externalScaleListener.onScaleEnd(mCurrentScaleFactor);
        }
    }

    ...
}

Then use next implementation of ViewPager in your application:

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * {@link ViewPager} which can be deactivated (ignore touch events)
 * 
 * @author Sergey Tarasevich
 * @created 19.07.2012
 */
public class DeactivableViewPager extends ViewPager {

    private boolean activated = true;

    public DeactivableViewPager(Context context) {
        super(context);
    }

    public DeactivableViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void activate() {
        activated = true;
    }

    public void deactivate() {
        activated = false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        if (activated) {
            try {
                return super.onInterceptTouchEvent(event);
            } catch (Exception e) { // sometimes happens
                return true;
            }
        } else {
        return false;
    }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        try {
            return super.onTouchEvent(event);
        } catch (Exception e) {
            return true;
        }
    }
}

Then in your ViewPager's adapter you should set next scale listener for your ImageViewTouch:

ImageViewTouch imageView = ...;
imageView.setOnScaleListener(new OnPageScaleListener() {
    @Override
    public void onScaleBegin() {
        viewPager.deactivate();
    }

    @Override
    public void onScaleEnd(float scale) {
        if (scale > 1.0) {
            viewPager.deactivate();
        } else {
            viewPager.activate();
        }
    }
});

imageLoader.displayImage(url, imageView, ...);

And don't forget set big values for maxImage***ForMemoryCache in ImageLoader's configuration so UIL won't downscale original images during decoding to Bitmaps:

ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext())
        ...
        .memoryCacheExtraOptions(3000, 3000)
        ...
        .build();

Answer 2

I was having trouble with pre-zoomed images in viewPager, but now its alright and solved the problem.

You have to search the ImageViewTouchBase class for this line:

protected DisplayType mScaleType = DisplayType.NONE;

then change it to:

protected DisplayType mScaleType = DisplayType.FIT_TO_SCREEN;

By default, DisplayType is set to NONE, its simple, just use FIT_TO_SCREEN and your images will be in the default size when sliding in viewPager.

Cheers

---

You can set those properties to make image fit to screen always

<it.sephiroth.android.library.imagezoom.ImageViewTouch
    android:id="@+id/iv_pager_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descr_image"
    android:scaleType="matrix" />