Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to zoom simultaneously on two ImageViews?

I want to tap&zoom simultaneously two ImageViews at the same time. In other words, I would like to zoom the left view and see the exact same effect in the other ImageView without any lag.

Is there are library that already does it? I've looked around a lot without any success :(

Thanks

like image 358
Filnik Avatar asked Dec 14 '22 05:12

Filnik


2 Answers

Actually it's pretty simple with library you are using:

Layout activity_main:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingTop="30dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/photo1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1" />

    <ImageView
        android:id="@+id/photo2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1" />

</LinearLayout>

And code inside activity

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ImageView pic1 = (ImageView) findViewById(R.id.photo1);
    ImageView pic2 = (ImageView) findViewById(R.id.photo2);

    Drawable bitmap = getResources().getDrawable(R.mipmap.ic_launcher);
    pic1.setImageDrawable(bitmap);
    pic2.setImageDrawable(bitmap);

    PhotoViewAttacher photoViewAttacher1 = new PhotoViewAttacher(pic1);
    final PhotoViewAttacher photoViewAttacher2 = new PhotoViewAttacher(pic2);
    photoViewAttacher1.setOnScaleChangeListener(new PhotoViewAttacher.OnScaleChangeListener() {
        @Override
        public void onScaleChange(float v, float v1, float v2) {
            photoViewAttacher2.onScale(v, v1, v2);
        }
    });
}

Result:

enter image description here

like image 125
Divers Avatar answered Jan 05 '23 12:01

Divers


To actually make it work (without flying... if you could do it with flying would be great) I have to override PhotoViewAttacher methods and link them toghether. Actually I didn't want only the scale option to be relaunched, but the drag too. I did it this way:

private boolean DEBUG = true;
private boolean actionL = false;
private boolean actionR = false;
private boolean scalingL = false;
private boolean scalingR = false;

//[...]

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    photoViewAttacherL = new PhotoViewAttacher(photoL){
        @Override
        public void onDrag(float dx, float dy) {
            if (!scalingL && !actionL) {
                actionL = true;
                if (DEBUG) Dbg.d("DRAG", "x: " + dx + " y: " + dy);
                photoViewAttacherR.onDrag(dx, dy);
                super.onDrag(dx, dy);
                actionL = false;
            }
        }

        @Override
        public void onFling(float startX, float startY, float velocityX, float velocityY) {
        }

        @Override
        public boolean onTouch(View v, MotionEvent ev) {
            if (ev.getAction() == MotionEvent.ACTION_UP){
                scalingL = false;
                scalingR = false;
            }
            return super.onTouch(v, ev);
        }

        @Override
        public void onScale(float scaleFactor, float focusX, float focusY) {
            if (!actionL) {
                actionL = true;
                if (DEBUG)
                    Dbg.d("SCALE", "factor: " + scaleFactor + " x: " + focusX + " y: " + focusY);
                scalingL = true;
                photoViewAttacherR.onScale(scaleFactor, focusX, focusY);
                super.onScale(scaleFactor, focusX, focusY);
                actionL = false;
            }
        }
    };

    photoViewAttacherR = new PhotoViewAttacher(photoR){
        @Override
        public void onDrag(float dx, float dy) {
            if (!scalingR && !actionR) {
                actionR = true;
                if (DEBUG) Dbg.d("DRAG", "x: " + dx + " y: " + dy);
                photoViewAttacherL.onDrag(dx, dy);
                super.onDrag(dx, dy);
                actionR = false;
            }
        }

        @Override
        public void onFling(float startX, float startY, float velocityX, float velocityY) {
        }

        @Override
        public boolean onTouch(View v, MotionEvent ev) {
            if (ev.getAction() == MotionEvent.ACTION_UP){
                scalingL = false;
                scalingR = false;
            }
            return super.onTouch(v, ev);
        }

        @Override
        public void onScale(float scaleFactor, float focusX, float focusY) {
            if (!actionR) {
                actionR = true;
                if (DEBUG)
                    Dbg.d("SCALE", "factor: " + scaleFactor + " x: " + focusX + " y: " + focusY);
                scalingR = true;
                photoViewAttacherL.onScale(scaleFactor, focusX, focusY);
                super.onScale(scaleFactor, focusX, focusY);
                actionR = false;
            }
        }
    };

//[...]
}
like image 30
Filnik Avatar answered Jan 05 '23 11:01

Filnik