Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zoom the ViewPager ImageView?

I am not able to Zoom the ImageView on the ViewPager.

my main Activity

 public class ViewPagerMain extends AppCompatActivity {

        ScaleGestureDetector scaleGestureDetector;
        ImageView imageView;
        Matrix matrix;
        ViewPager viewPager;
        private ViewPagerArrowIndicator viewPagerArrowIndicator;
        Drawable rightarrow, leftarrow;
        Button buttonnext, buttonprev;


        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_viewpager);
            buttonnext = (Button) findViewById(R.id.nexxt);
            buttonprev = (Button) findViewById(R.id.prevv);


            viewPager = (ViewPager) findViewById(R.id.view_pager);
            //  viewPagerArrowIndicator = (ViewPagerArrowIndicator) findViewById(R.id.viewPagerArrowIndicator);
            imageView = (ImageView) findViewById(R.id.imageView);
            CustomPagerAdapter customPagerAdapter = new CustomPagerAdapter(this);
            viewPager.setAdapter(customPagerAdapter);
            //  viewPagerArrowIndicator.bind(viewPager);
            //  viewPagerArrowIndicator.setArrowIndicatorRes(R.drawable.ic_arrow_left, R.drawable.ic_arrow_right);
            //  rightarrow = getResources().getDrawable(R.drawable.ic_arrow_right);
            // rightarrow.setColorFilter(getResources().getColor(R.color.RED), PorterDuff.Mode.SRC_ATOP);
            // leftarrow = getResources().getDrawable(R.drawable.ic_arrow_left);
            // leftarrow.setColorFilter(getResources().getColor(R.color.RED), PorterDuff.Mode.SRC_ATOP);


            matrix = new Matrix();
            scaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener());


            buttonnext.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int currentItem = viewPager.getCurrentItem();
                    viewPager.setCurrentItem(currentItem + 1);
                }
            });
            buttonprev.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int currentItem = viewPager.getCurrentItem();
                    viewPager.setCurrentItem(currentItem - 1);
                }
            });


        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            scaleGestureDetector.onTouchEvent(event);
            return true;
        }

        private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {

            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                float SF = detector.getScaleFactor();
                SF = Math.max(0.1f, Math.min(SF, 0.5f));
                matrix.setScale(SF, SF);
                imageView.setImageMatrix(matrix);
                return true;
            }
        }

    }

my PagerAdapter Class

public class CustomPagerAdapter extends PagerAdapter {
    Context mContext;
    LayoutInflater mLayoutInflater;
    int[] mResources = {
            R.mipmap.page7,
            R.mipmap.page8,
            R.mipmap.page9,
            R.mipmap.page10,
            R.mipmap.page11,
            R.mipmap.page12,
            R.mipmap.page13,
            R.mipmap.page14,
            R.mipmap.page15,
            R.mipmap.page16,
            R.mipmap.page17,
            R.mipmap.page18
    };



    public CustomPagerAdapter(Context context) {
        mContext = context;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }


    @Override
    public int getCount() {
        return mResources.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = mLayoutInflater.inflate(R.layout.activity_pager_items, container, false);
        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageView.setImageResource(mResources[position]);
        container.addView(itemView);
        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);
    }
}

my TouchViewPagerImageView class for Zooming

public class TouchViewPagerImageView extends ImageView {

    Matrix matrix = new Matrix();

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;
    //static  NonSwipeableViewPager PagerLeft;
// Remember some things for zooming
    PointF last = new PointF();
    PointF start = new PointF();
    float minScale = 1f;
    float maxScale = 3f;
    float[] m;
    static boolean b = false, c = false;
    float redundantXSpace, redundantYSpace;

    float width, height;
    static final int CLICK = 3;
    float saveScale = 1f;
    float right, bottom, origWidth, origHeight, bmWidth, bmHeight;

    ScaleGestureDetector mScaleDetector;

    Context context;
    ViewGroup vp;

    public TouchViewPagerImageView(Context context) {
        super(context);
        sharedConstructing(context);
    }

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

    public void setChild(ViewGroup vp) {
        this.vp = vp;
    }

    private void sharedConstructing(Context context) {
        super.setClickable(true);
        this.context = context;
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        matrix.setTranslate(1f, 1f);
        m = new float[9];
        setImageMatrix(matrix);
        setScaleType(ScaleType.MATRIX);
        setOnTouchListener(new OnTouchListener() {
            @SuppressWarnings("deprecation")
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                mScaleDetector.onTouchEvent(event);
                matrix.getValues(m);
                float x = m[Matrix.MTRANS_X];
                float y = m[Matrix.MTRANS_Y];
            /*Log.v("log_tag",  event.getX()+" matrix "
                    + x);*/
                PointF curr = new PointF(event.getX(), event.getY());
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        TouchViewPagerImageView.b = false;
                        Log.v("event", "ACTION_DOWN");
                        last.set(event.getX(), event.getY());
                        start.set(last);
                        mode = DRAG;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        if (mode == DRAG) {
                            float deltaX = curr.x - last.x;
                            float deltaY = curr.y - last.y;
                            float scaleWidth = Math.round(origWidth * saveScale);
                            float scaleHeight = Math.round(origHeight * saveScale);
                            if (scaleWidth < width) {
                                deltaX = 0;
                                if (y + deltaY > 0) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "ACTION_MOVE  scaleWidth < width   y + deltaY > 0");
                                    deltaY = -y;
                                } else if (y + deltaY < -bottom) {
                                    TouchViewPagerImageView.b = false;
                                    Log.v("event", "else ACTION_MOVE  scaleWidth < width   y + deltaY < -bottom");
                                    deltaY = -(y + bottom);
                                } else {
                                    TouchViewPagerImageView.b = false;
                                }
                            } else if (scaleHeight < height) {
                                deltaY = 0;
                                if (x + deltaX > 0) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "ACTION_MOVE  scaleWidth < height x + deltaX > 0");
                                    deltaX = -x;
                                } else if (x + deltaX < -right) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "ACTION_MOVE  scaleWidth < height x + deltaX < -right");
                                    deltaX = -(x + right);
                                } else {
                                    TouchViewPagerImageView.b = false;
                                }
                            } else {
                                if (x + deltaX > 0) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "scaleWidth > width");
                                    deltaX = -x;
                                } else if (x + deltaX < -right) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "else scaleWidth > width");
                                    deltaX = -(x + right);
                                } else {
                                    TouchViewPagerImageView.b = true;
                                }
                                if (y + deltaY > 0) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "y + deltaY");
                                    deltaY = -y;
                                } else if (y + deltaY < -bottom) {
                                    TouchViewPagerImageView.b = true;
                                    Log.v("event", "y + deltaY < -bottom");
                                    deltaY = -(y + bottom);
                                } else {
                                    TouchViewPagerImageView.b = false;
                                }
                            }
                    /*Log.v("log_tag",height + " matrix "
                            + (int) getHeightFromMatrix(matrix, TouchImageView.this));*/
                            matrix.postTranslate(deltaX, deltaY);
                            last.set(curr.x, curr.y);
                        }
                        break;

                    case MotionEvent.ACTION_UP:
                        Log.v("event", "ACTION_UP");
                        TouchViewPagerImageView.b = true;
                        mode = NONE;
                        int xDiff = (int) Math.abs(curr.x - start.x);
                        int yDiff = (int) Math.abs(curr.y - start.y);
                        if (xDiff < CLICK && yDiff < CLICK) {
                            Log.v("event", "ACTION_UP  xDiff < CLICK && yDiff < CLICK");
                            performClick();
                        }
                        break;

                    case MotionEvent.ACTION_POINTER_UP:
                        //TouchImageView.b = false;
                        Log.v("event", "ACTION_POINTER_UP");
                        mode = NONE;
                        break;
                    case MotionEvent.ACTION_POINTER_3_DOWN:
                        Log.v("event", "ACTION_HOVER_MOVE");
                        break;
                }
            /*getLayoutParams().height = (int) getWidthFromMatrix(matrix,
                    TouchImageView.this);
            getLayoutParams().width = (int) getHeightFromMatrix(matrix,
                    TouchImageView.this);*/
                setImageMatrix(matrix);
                invalidate();
                return true;
            }
        });
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);
        if (bm != null) {
            bmWidth = bm.getWidth();
            bmHeight = bm.getHeight();
        }
    }

    public void setMaxZoom(float x) {
        maxScale = x;
    }

    private class ScaleListener extends
            ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            mode = ZOOM;
            return true;
        }

        @SuppressLint("NewApi")
        @TargetApi(8)
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            float mScaleFactor = (float) Math.min(
                    Math.max(.95f, detector.getScaleFactor()), 1.05);
            float origScale = saveScale;
            saveScale *= mScaleFactor;
            if (saveScale > maxScale) {
                saveScale = maxScale;
                mScaleFactor = maxScale / origScale;
            } else if (saveScale < minScale) {
                saveScale = minScale;
                mScaleFactor = minScale / origScale;
            }
            right = width * saveScale - width
                    - (2 * redundantXSpace * saveScale);
            bottom = height * saveScale - height
                    - (2 * redundantYSpace * saveScale);
            if (origWidth * saveScale <= width
                    || origHeight * saveScale <= height) {
                matrix.postScale(mScaleFactor, mScaleFactor, width / 2,
                        height / 2);
                if (mScaleFactor < 1) {
                    matrix.getValues(m);
                    float x = m[Matrix.MTRANS_X];
                    float y = m[Matrix.MTRANS_Y];
                    if (mScaleFactor < 1) {
                        if (Math.round(origWidth * saveScale) < width) {
                            if (y < -bottom)
                                matrix.postTranslate(0, -(y + bottom));
                            else if (y > 0)
                                matrix.postTranslate(0, -y);
                        } else {
                            if (x < -right)
                                matrix.postTranslate(-(x + right), 0);
                            else if (x > 0)
                                matrix.postTranslate(-x, 0);
                        }
                    }
                }
            } else {
                matrix.postScale(mScaleFactor, mScaleFactor,
                        detector.getFocusX(), detector.getFocusY());
                matrix.getValues(m);
                float x = m[Matrix.MTRANS_X];
                float y = m[Matrix.MTRANS_Y];
                if (mScaleFactor < 1) {
                    if (x < -right)
                        matrix.postTranslate(-(x + right), 0);
                    else if (x > 0)
                        matrix.postTranslate(-x, 0);
                    if (y < -bottom)
                        matrix.postTranslate(0, -(y + bottom));
                    else if (y > 0)
                        matrix.postTranslate(0, -y);
                }
            }
            return true;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = MeasureSpec.getSize(widthMeasureSpec);
        height = MeasureSpec.getSize(heightMeasureSpec);
        // Fit to screen.
        float scale;
        float scaleX = (float) width / (float) bmWidth;
        float scaleY = (float) height / (float) bmHeight;
        scale = Math.min(scaleX, scaleY);
        matrix.setScale(scale, scale);
        setImageMatrix(matrix);
        saveScale = 1f;

        // Center the image
        redundantYSpace = (float) height - (scale * (float) bmHeight);
        redundantXSpace = (float) width - (scale * (float) bmWidth);
        redundantYSpace /= (float) 2;
        redundantXSpace /= (float) 2;

        matrix.postTranslate(redundantXSpace, redundantYSpace);

        origWidth = width - 2 * redundantXSpace;
        origHeight = height - 2 * redundantYSpace;
        right = width * saveScale - width - (2 * redundantXSpace * saveScale);
        bottom = height * saveScale - height
                - (2 * redundantYSpace * saveScale);
        setImageMatrix(matrix);
    }

/*public static void setPager(NonSwipeableViewPager pagerLeft) {
    PagerLeft = pagerLeft;
}*/


}

my viewpager xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />


</RelativeLayout>

where do i have to implement the TouchViewPagerImageView class???

like image 629
seon Avatar asked Feb 05 '23 08:02

seon


1 Answers

try this :

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <yourpackage_name.TouchViewPagerImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />
</RelativeLayout>

in your my_viewpager xml

also in your adapter class:

  @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TouchViewPagerImageView imgDisplay;

        mLayoutInflater = (LayoutInflater) mContext 
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = mLayoutInflater.inflate(R.layout.activity_pager_items, container,
                false);

        imgDisplay = (TouchViewPagerIMageView) itemView.findViewById(R.id.imageView);
        imgDisplay.setImageResource(mResources(position));
        ((ViewPager) container).addView(itemView);
        return itemView;
    }

problem with your TouchViewPagerIMageView class

use this code:

    public class TouchViewPagerIMageView extends ImageView {

    Matrix matrix;

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;

    // Remember some things for zooming
    PointF last = new PointF();
    PointF start = new PointF();
    float minScale = 1f;
    float maxScale = 3f;
    float[] m;

    int viewWidth, viewHeight;
    static final int CLICK = 3;
    float saveScale = 1f;
    protected float origWidth, origHeight;
    int oldMeasuredWidth, oldMeasuredHeight;

    ScaleGestureDetector mScaleDetector;

    Context context;

    public TouchImageView(Context context) {
        super(context);
        sharedConstructing(context);
    }

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

    private void sharedConstructing(Context context) {
        super.setClickable(true);
        this.context = context;
        mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        matrix = new Matrix();
        m = new float[9];
        setImageMatrix(matrix);
        setScaleType(ScaleType.MATRIX);

        setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                mScaleDetector.onTouchEvent(event);
                PointF curr = new PointF(event.getX(), event.getY());

                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    last.set(curr);
                    start.set(last);
                    mode = DRAG;
                    break;

                case MotionEvent.ACTION_MOVE:
                    if (mode == DRAG) {
                        float deltaX = curr.x - last.x;
                        float deltaY = curr.y - last.y;
                        float fixTransX = getFixDragTrans(deltaX, viewWidth,
                                origWidth * saveScale);
                        float fixTransY = getFixDragTrans(deltaY, viewHeight,
                                origHeight * saveScale);
                        matrix.postTranslate(fixTransX, fixTransY);
                        fixTrans();
                        last.set(curr.x, curr.y);
                    }
                    break;

                case MotionEvent.ACTION_UP:
                    mode = NONE;
                    int xDiff = (int) Math.abs(curr.x - start.x);
                    int yDiff = (int) Math.abs(curr.y - start.y);
                    if (xDiff < CLICK && yDiff < CLICK)
                        performClick();
                    break;

                case MotionEvent.ACTION_POINTER_UP:
                    mode = NONE;
                    break;
                }

                setImageMatrix(matrix);
                invalidate();
                return true; // indicate event was handled
            }

        });
    }

    public void setMaxZoom(float x) {
        maxScale = x;
    }

    private class ScaleListener extends
            ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScaleBegin(ScaleGestureDetector detector) {
            mode = ZOOM;
            return true;
        }

        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            float mScaleFactor = detector.getScaleFactor();
            float origScale = saveScale;
            saveScale *= mScaleFactor;
            if (saveScale > maxScale) {
                saveScale = maxScale;
                mScaleFactor = maxScale / origScale;
            } else if (saveScale < minScale) {
                saveScale = minScale;
                mScaleFactor = minScale / origScale;
            }

            if (origWidth * saveScale <= viewWidth
                    || origHeight * saveScale <= viewHeight)
                matrix.postScale(mScaleFactor, mScaleFactor, viewWidth / 2,
                        viewHeight / 2);
            else
                matrix.postScale(mScaleFactor, mScaleFactor,
                        detector.getFocusX(), detector.getFocusY());

            fixTrans();
            return true;
        }
    }

    void fixTrans() {
        matrix.getValues(m);
        float transX = m[Matrix.MTRANS_X];
        float transY = m[Matrix.MTRANS_Y];

        float fixTransX = getFixTrans(transX, viewWidth, origWidth * saveScale);
        float fixTransY = getFixTrans(transY, viewHeight, origHeight
                * saveScale);

        if (fixTransX != 0 || fixTransY != 0)
            matrix.postTranslate(fixTransX, fixTransY);
    }

    float getFixTrans(float trans, float viewSize, float contentSize) {
        float minTrans, maxTrans;

        if (contentSize <= viewSize) {
            minTrans = 0;
            maxTrans = viewSize - contentSize;
        } else {
            minTrans = viewSize - contentSize;
            maxTrans = 0;
        }

        if (trans < minTrans)
            return -trans + minTrans;
        if (trans > maxTrans)
            return -trans + maxTrans;
        return 0;
    }

    float getFixDragTrans(float delta, float viewSize, float contentSize) {
        if (contentSize <= viewSize) {
            return 0;
        }
        return delta;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewWidth = MeasureSpec.getSize(widthMeasureSpec);
        viewHeight = MeasureSpec.getSize(heightMeasureSpec);

        //
        // Rescales image on rotation
        //
        if (oldMeasuredHeight == viewWidth && oldMeasuredHeight == viewHeight
                || viewWidth == 0 || viewHeight == 0)
            return;
        oldMeasuredHeight = viewHeight;
        oldMeasuredWidth = viewWidth;

        if (saveScale == 1) {
            // Fit to screen.
            float scale;

            Drawable drawable = getDrawable();
            if (drawable == null || drawable.getIntrinsicWidth() == 0
                    || drawable.getIntrinsicHeight() == 0)
                return;
            int bmWidth = drawable.getIntrinsicWidth();
            int bmHeight = drawable.getIntrinsicHeight();

            Log.d("bmSize", "bmWidth: " + bmWidth + " bmHeight : " + bmHeight);

            float scaleX = (float) viewWidth / (float) bmWidth;
            float scaleY = (float) viewHeight / (float) bmHeight;
            scale = Math.min(scaleX, scaleY);
            matrix.setScale(scale, scale);

            //Center the image
            float redundantYSpace = (float) viewHeight - (scale * (float) bmHeight);
            float redundantXSpace = (float) viewWidth - (scale * (float) bmWidth);
            redundantYSpace /= (float) 2;
            redundantXSpace /= (float) 2;

            matrix.postTranslate(redundantXSpace, redundantYSpace);

            origWidth = viewWidth - 2 * redundantXSpace;
            origHeight = viewHeight - 2 * redundantYSpace;
            setImageMatrix(matrix);
        }
        fixTrans();
    }
}
like image 59
rafsanahmad007 Avatar answered Feb 15 '23 12:02

rafsanahmad007