How to swipe zoomed image using ImageViews and PageAdapter

Question

I am trying to create an image viewer which can load images from given URLs.The code below implement the User Interface.

My intention is to let user Zoom the image and move to next image with a Swipe event.But the problem is that when i zoom and then swipe , instead of showing the remaining portion , it moves to the next image.

I tried using requestDisallowInterceptTouchEvent in TouchImageView's(https://github.com/MikeOrtiz/TouchImageView) onTouchListener .After this the remaining portion could show but now i cannot go to the next page. I was wondering how this can be achieved as the event can only go to either TouchView or PageAdapter

public class PageActivity extends Activity {
private int numPages = 33;
private TouchImageView[] imageViews = new TouchImageView[numPages];

private String URL = "http://www.smbc-comics.com/comics/200905";


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ViewPager viewPager = new ViewPager(this);

    for (int i = 0; i < numPages; i++) {
        imageViews[i] = new TouchImageView(this);
        imageViews[i].setBackgroundResource(R.drawable.banke);
        imageViews[i].setMaxZoom(4f);
    }

    setContentView(viewPager);
    ImagePagerAdapter adapter = new ImagePagerAdapter();
    viewPager.setAdapter(adapter);
    viewPager.setOffscreenPageLimit(2);
}

@SuppressWarnings("unused")
private class ImagePagerAdapter extends PagerAdapter {
    @Override
    public int getCount() {
        return numPages;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((TouchImageView) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Context context = PageActivity.this;

        String pageURL = URL;

        if (imageViews[position].getDrawable() == null) {
          ImageFetcher  imagefetcher = new ImageFetcher();
            imagefetcher.execute(
                    pageURL + String.format("%02d", position+1) + ".gif",
                    String.valueOf(position));
        }


        ((ViewPager) container).addView(imageViews[position], 0);
        return imageViews[position];
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        ((ViewPager) container).removeView((TouchImageView) object);
        imageViews[position].setImageDrawable(null);

    }

}
public class ImageFetcher extends AsyncTask<String, Integer, Drawable> {
    int fillthisPos;

    public Drawable doInBackground(String... urls) {
        try {
            InputStream is = (InputStream) new URL(urls[0]).getContent();
            fillthisPos = Integer.parseInt(urls[1]);
            Drawable d = Drawable.createFromStream(is, "src name");
            return d;
        } catch (Exception e) {
            return null;
        }
    }

    @Override
    protected void onPostExecute(Drawable result) {
        super.onPostExecute(result);
        imageViews[fillthisPos].setImageDrawable(result);
        result = null;
    }

}

}

Answer 1

You can add following code in TouchImageView class:

public boolean isZoomed () {
    return (normalizedScale > minScale);
}

private void onSwipeEvent(MotionEvent event) {
    boolean zoomed = this.isZoomed();

    if (!zoomed && (swipeLen > 0)) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            swipeStartPos = (int) event.getRawX();
        }
        else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            int distance = ((int) event.getRawX()) - swipeStartPos;
            int swipeVector = SWIPE_RIGHT;
            if (distance < 0) swipeVector = SWIPE_LEFT;

            if (Math.abs(distance) > swipeLen) {
                onSwipeHandler.onSwipe(swipeVector);

                swipeStartPos = (int) event.getRawX();
                this.setScaleX(1f);
            }
            else {
                int swipeStDist = swipeLen - Math.round(((swipeLen / 100) * 50));
                if (Math.abs(distance) > swipeStDist) {
                    this.setScaleX(0.98f);
                }
            }
        }
        else if (event.getAction() == MotionEvent.ACTION_UP) {
            swipeStartPos = (int) event.getRawX();
            this.setScaleX(1f);
        }
    }
}

public static int SWIPE_LEFT = 0;
public static int SWIPE_RIGHT = 1;
    public int swipeStartPos = 0;
public onSwipeListener onSwipeHandler = new onSwipeListener() {
    public void onSwipe(int vector) {}
};
public static int swipeLen = 0;

public void setOnSwipeListener(onSwipeListener c, int swipeLength) {
    onSwipeHandler = c;
    swipeLen = swipeLength;
}
public interface onSwipeListener {
    public void onSwipe(int vector);
}

And also in TouchImageView below line 636 add onSwipeEvent(event) like this:

        ......
            setImageMatrix(matrix);
            onSwipeEvent(event);
            //
            // indicate event was handled
            //
            return true;
        ...........

After this from you code you can add swipe event listener, like this:

imageView.setOnSwipeListener(new TouchImageView.onSwipeListener() {
    @Override
    public void onSwipe(int vector) {
        if (vector == TouchImageView.SWIPE_LEFT) {
            Log.d("swipe", "swipe left!");
        }
        else if (vector == TouchImageView.SWIPE_RIGHT) {
            Log.d("swipe", "swipe right!");
        }
    }
}, 200);  //length of swiping - 200 dip

This onSwipeListener ignore onswipe where image is zoomed+. It work for me.