Vista de desplazamiento de zoom en Android

En este artículo, vamos a implementar el zoom en ScrollView. La mayoría de las veces, cuando creamos una vista de desplazamiento, contiene una gran cantidad de datos y si queremos ver algún contenido sobre el zoom, podemos implementar esta función. Esta característica puede ser útil cuando estamos haciendo scroll en una App y que contiene datos usando RecyclerView. Allí podemos implementar esta función para ver los datos dentro de RecyclerView al hacer zoom. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el  lenguaje Java  . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#1B5E20">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Zoom Scroll View"
            android:textSize="32sp" />
          
    </ScrollView>
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.java

A continuación se muestra el código para la implementación de esta función.

// implementation of this feature
mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleGestureDetector.SimpleOnScaleGestureListener(){
            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                // firstly we will get the scale factor by which we want to zoom
                float scale = 1 - detector.getScaleFactor();
                float prevScale = mScale;
                mScale += scale;
                
                // we can maximise our focus to 10f only
                if (mScale > 10f)
                    mScale = 10f;
              
                ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1f / prevScale, 1f / mScale, detector.getFocusX(), detector.getFocusY());
                
                // duration of animation will be 0.It will not change by self after that  
                scaleAnimation.setDuration(0);
               
                scaleAnimation.setFillAfter(true);
              
                // initialising the scrollview
                ScrollView layout = (ScrollView) findViewById(R.id.scrollView);
                
                // we are setting it as animation
                layout.startAnimation(scaleAnimation);
                return true;
       }
  });

A continuación se muestra el código completo del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.animation.ScaleAnimation;
import android.widget.ScrollView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private float mScale = 1f;
    private ScaleGestureDetector mScaleGestureDetector;
    GestureDetector gestureDetector;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initialising the values
        gestureDetector = new GestureDetector(this, new GestureListener());
        mScaleGestureDetector = new ScaleGestureDetector(this, new ScaleGestureDetector.SimpleOnScaleGestureListener() {
            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                
                // firstly we will get the scale factor
                float scale = 1 - detector.getScaleFactor();
                float prevScale = mScale;
                mScale += scale;
                  
                // we can maximise our focus to 10f only
                if (mScale > 10f)
                    mScale = 10f;
  
                ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1f / prevScale, 1f / mScale, detector.getFocusX(), detector.getFocusY());
                  
                // duration of animation will be 0.It will 
                // not change by self after that
                scaleAnimation.setDuration(0);
                scaleAnimation.setFillAfter(true);
                 
                // initialising the scrollview
                ScrollView layout = (ScrollView) findViewById(R.id.scrollView);
                  
                // we are setting it as animation
                layout.startAnimation(scaleAnimation);
                return true;
            }
        });
    }
  
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        super.dispatchTouchEvent(event);
          
        // special types of touch screen events such as pinch ,
        // double tap, scrolls , long presses and flinch,
        // onTouch event is called if found any of these
        mScaleGestureDetector.onTouchEvent(event);
        gestureDetector.onTouchEvent(event);
        return gestureDetector.onTouchEvent(event);
    }
  
    private class GestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }
  
        @Override
        public boolean onDoubleTap(MotionEvent e) {
            return true;
        }
    }
}

Producción: