Friday, April 10, 2020

My Quick Find Gallery (Part 4 - Show Image with Zoom, Drag and Slide Features)

11) Show Image with features of Zoom, Drag and Slide
Subtasks:
i) Get the set of images and selected image position from Parent Activity and show selected image in ImageView.
activity_show_photo.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ShowPhoto">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="8dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

ShowPhoto.java
ImageView selectedImage;
ArrayList<String> searchFilesPath;
ArrayList<String> searchFilesName;
int selectedImagePosition;
@Override
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_photo);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        selectedImage = (ImageView) findViewById(R.id.imageView);
        try {
            Intent intent = getIntent(); // get Intent which we set from Previous Activity
            selectedImagePosition = intent.getIntExtra("selectedImagePosition",0);
            searchFilesPath=intent.getStringArrayListExtra("searchFilesPath");
            searchFilesName=intent.getStringArrayListExtra("searchFilesName");
          //from file path
          Bitmap myBitmap = BitmapFactory.decodeFile(searchFilesPath.get(selectedImagePosition));
            selectedImage.setImageBitmap(myBitmap);
            getSupportActionBar().setTitle(searchFilesName.get(selectedImagePosition));
        }
        catch(Exception e) {
            Toast.makeText(this, e.toString(), Toast.LENGTH_LONG).show();
        }
}
ii) setOnTouchListener to ImageView for Zoom, Drag and Slide Features.
ShowPhoto.java
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_photo);
selectedImage = (ImageView) findViewById(R.id.imageView);
selectedImage.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
                ImageView view = (ImageView) v;
                view.bringToFront();
                viewTransformation(view, event);
                return true;
            }
        });
}
//====================================================================
   //ImageView Zoom-in and Zoom-Out
  //ZOOM (two finger) / ROTATION (two finger) / DRAG (Single finger)
//====================================================================
    float[] lastEvent = null;
    float d = 0f;
    float newRot = 0f;
    private boolean isZoomAndRotate;
    private boolean isOutSide;
    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;
    private PointF start = new PointF();
    private PointF mid = new PointF();
    float oldDist = 1f;
    private float xCoOrdinate, yCoOrdinate;

    private int isPreviousMode = NONE;

    private void viewTransformation(View view, MotionEvent event) {

        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                // executed after the user touch on the screen
                xCoOrdinate = view.getX() - event.getRawX();
                yCoOrdinate = view.getY() - event.getRawY();
                start.set(event.getX(), event.getY());
                isOutSide = false;
                mode = DRAG;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) {
                    midPoint(mid, event);
                    mode = ZOOM;
                }
                lastEvent = new float[4];
                lastEvent[0] = event.getX(0);
                lastEvent[1] = event.getX(1);
                lastEvent[2] = event.getY(0);
                lastEvent[3] = event.getY(1);
                //d = rotation(event);
                break;
            case MotionEvent.ACTION_UP:
                // executed after the user release the touch on the screen
                isZoomAndRotate = false;
                if (mode == DRAG) {
                    float x = event.getX();
                    float y = event.getY();
                    if (isPreviousMode != ZOOM) {
                        if (start.x - x > 1) { //using start.x-x>1, not start.x>x because start.x>x executes in case of tapping also ()
                            selectedImagePosition = selectedImagePosition + 1;
                            if (selectedImagePosition <= maxImagePosition) {
selectedImage.setImageBitmap(BitmapFactory.decodeFile(searchFilesPath.get(selectedImagePosition)));
getSupportActionBar().setTitle(searchFilesName.get(selectedImagePosition));
                                isPreviousMode = NONE;
                            } else
                                selectedImagePosition = maxImagePosition;//when reach to last picture and thenafter move the finger again and again then selectedImagePosition values go to very high one by one therefore put the last picture index
                        } else if (x - start.x > 1) {
                            selectedImagePosition = selectedImagePosition - 1;
                            if (selectedImagePosition >= 0) {
selectedImage.setImageBitmap(BitmapFactory.decodeFile(searchFilesPath.get(selectedImagePosition)));
getSupportActionBar().setTitle(searchFilesName.get(selectedImagePosition));
                                isPreviousMode = NONE;
                            } else
                                selectedImagePosition = 0;
                        }
                    }
                }
            case MotionEvent.ACTION_OUTSIDE:
                isOutSide = true;
                mode = NONE;
                lastEvent = null;
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                lastEvent = null;
                break;
            case MotionEvent.ACTION_MOVE:
                // executed when user move the finger on the screen
                if (!isOutSide) {
                    if (mode == DRAG) {
                        isZoomAndRotate = false;
                        if(isPreviousMode == ZOOM)
                            view.animate().x(event.getRawX() + xCoOrdinate).y(event.getRawY() + yCoOrdinate).setDuration(0).start();
                    }
                    if (mode == ZOOM && event.getPointerCount() == 2) {
                        float newDist1 = spacing(event);
                        if (newDist1 > 10f) {
                            float scale = newDist1 / oldDist * view.getScaleX();
                            view.setScaleX(scale);
                            view.setScaleY(scale);
                            isPreviousMode = ZOOM;
                        }
                        if (lastEvent != null) {
                            //newRot = rotation(event);
                            //view.setRotation((float) (view.getRotation() + (newRot - d)));
                        }
                    }
                }
                break;
        }
    }
    private float rotation(MotionEvent event) {
        double delta_x = (event.getX(0) - event.getX(1));
        double delta_y = (event.getY(0) - event.getY(1));
        double radians = Math.atan2(delta_y, delta_x);
        return (float) Math.toDegrees(radians);
    }
    private float spacing(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (int) Math.sqrt(x * x + y * y);
    }
    private void midPoint(PointF point, MotionEvent event) {
        float x = event.getX(0) + event.getX(1);
        float y = event.getY(0) + event.getY(1);
        point.set(x / 2, y / 2);
    }

No comments:

Post a Comment