ZoomControls en Android con ejemplo

En Android, Zoom Control es una clase que tiene un conjunto de métodos que se utilizan para controlar la funcionalidad de zoom. Tiene dos botones que se utilizan para controlar la función de zoom (es decir, acercar y alejar). La clase de control de zoom ha quedado obsoleta en la versión 29 de la API . Las funcionalidades que ofrece la clase ZoomControls se manejan mejor a través de la vista personalizada y los diseños personalizados que los widgets de controles de zoom dedicados.

Métodos importantes de los controles de zoom

• Digamos que ZoomControls sea la referencia de la clase ZoomControl que se utiliza para llamar a los diferentes métodos de la clase ZoomControls.

ZoomControl zoomControls = (ZoomControls) findViewById(R.id.simpleZoomControl);

• show(): este método se usa para mostrar los controles de zoom en la interfaz de usuario de la aplicación.

// mostrará los controles de zoom

zoomControls.mostrar() 

• hide(): este método se utiliza para ocultar los controles de zoom en la interfaz de usuario de la aplicación.

// ocultará los controles de zoom

zoomControls.hide()

• setOnZoomInClickListener(OnClickListenerlistener): este método se invoca cuando se presiona el botón Acercar. Se utiliza para personalizar la interfaz de usuario que se mostrará cuando se presione el botón de acercamiento.

zoomControls.setOnZoomInClickListener(nueva Vista.OnClickListener() {

@Anular

public void onClick(Ver v) {

// agrega el código que se ejecutará cuando  

// el botón de acercamiento ha sido presionado

}

});

• setOnZoomOutClickListener(OnClickListenerlistener): este método se invoca cuando se presiona Zoom Out. También funciona de la misma manera que el método setOnZoomInClickListener(), pero minimiza, es decir, converge la interfaz de usuario.

zoomControls.setOnZoomOutClickListener(nueva Vista.OnClickListener() {

@Anular

public void onClick(Ver v) {

// agrega el código que se ejecutará cuando  

// el botón de alejamiento ha sido presionado

}

});

• setIsZoomInEnabled(boolean isEnabled): Es uno de los métodos de Controles de zoom que se utiliza para habilitar o deshabilitar la funcionalidad de acercamiento.

// Habilitará el botón ZoomIn

zoomControls.setIsZoomInEnabled (verdadero)

// deshabilitará el botón de acercamiento

zoomControls.setIsZoomInEnabled (falso)

• setIsZoomOutEnabled(boolean isEnabled): También es uno de los métodos de Zoom Controls, que se utiliza para habilitar o deshabilitar la funcionalidad de alejamiento.

// habilitará el botón ZoomOut

zoomControls.setIsZoomOutEnabled (verdadero)

// desactivará el botón ZoomOut

zoomControls.setIsZoomOutEnabled (falso)

• setZoomSpeed ​​(velocidad larga): Esto se usa para establecer la velocidad de zoom del zoom que se está haciendo con los controles de zoom

Atributos importantes de los controles de zoom

• id: este atributo se utiliza para dar a los controles de zoom una identidad única.

<Controles de zoom android:id=”@+id/zoom_controls/>

• fondo: Esto se utiliza para dar el color de fondo a los controles de zoom.

<Controles de zoom

android:id=”@+id/zoom_controls

android:fondo=”#fffff”/>

• relleno: Esto se utiliza para dar relleno a los lados de los controles de zoom.

<Controles de zoom

android:id=”@+id/zoom_controls

android:relleno=”20dp”/>

Ejemplo

kotlin

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 Kotlin como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

activity_main.xml activity_main.xml Se agregan comentarios dentro del código para comprender el código con más detalle.

<?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">
  
    <!--Adding the image view-->
    <ImageView
        android:id="@+id/image_View"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/indiamap" />
  
    <!--Adding the Zoom Controls 
        within the relative layout-->
    <ZoomControls
        android:id="@+id/zoom_controls"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp" />
      
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity

MainActivity a MainActivity.kt MainActivity.java

// Kotlin code to implement the zoom controls
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // onTouch listener function when the image is clicked
        image_View.setOnTouchListener { v, m -> // Perform tasks here
            zoom_controls.show()
            false
        }
  
        // This function will be automatically called out,when
        // zoom in button is being pressed
        zoom_controls.setOnZoomInClickListener(
                View.OnClickListener {
                    val x: Float = image_View.getScaleX()
                    val y: Float = image_View.getScaleY()
  
                    // setting the new scale
                    image_View.setScaleX((x + 0.5f) as Float)
                    image_View.setScaleY((y + 0.5f) as Float)
                    zoom_controls.hide()
                }
        )
  
        // This function will be called when
        // zoom out button is pressed
        zoom_controls.setOnZoomOutClickListener(
                View.OnClickListener {
                    val x: Float = image_View.getScaleX()
                    val y: Float = image_View.getScaleY()
                    if (x == 1f && y == 1f) {
                        image_View.setScaleX(x as Float)
                        image_View.setScaleY(y as Float)
                        zoom_controls.hide()
                    } else {
                        // setting the new scale
                        image_View.setScaleX((x - 0.5f) as Float)
                        image_View.setScaleY((y - 0.5f) as Float)
                        // hiding the zoom controls
                        zoom_controls.hide()
                    }
                }
        )
    }
}

// Java code to implement the zoom controls
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.ZoomControls;
  
public class MainActivity extends AppCompatActivity {
  
    ImageView imageView;
    ZoomControls zoomControls;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        imageView=findViewById(R.id.image_View);
        zoomControls=findViewById(R.id.zoom_controls);
        
        zoomControls.setBackgroundColor(Color.BLACK);
        zoomControls.show();
  
      // onTouch listener function  when the image is clicked  
      imageView.setOnTouchListener(
                new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View view, MotionEvent motionEvent) {
                        zoomControls.show();
                        return false;
                    }
                }
        );
  
        // This function will be automatically called out,when
        // zoom in button is being pressed
        zoomControls.setOnZoomInClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        float x=imageView.getScaleX();
                        float y=imageView.getScaleY();
                        
                        // setting the new scale
                        imageView.setScaleX((float)(x+0.5f));
                        imageView.setScaleY((float)(y+0.5f));
                        zoomControls.hide();
                    }
                }
        );
  
        // This function will be called when
        // zoom out button is pressed
        zoomControls.setOnZoomOutClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        float x=imageView.getScaleX();
                        float y=imageView.getScaleY();
                        if(x==1 && y==1)
                        {
                            // the scale will remain same,since
                            // it is maximum possible zoom out
                            imageView.setScaleX((float)(x));
                            imageView.setScaleY((float)(y));
                            zoomControls.hide();
                        }
                        else
                        {
                            // setting the new scale
                            imageView.setScaleX((float)(x-0.5f));
                            imageView.setScaleY((float)(y-0.5f));
                            // hiding the zoom controls
                            zoomControls.hide();
                        }
                    }
                }
        );
    }
}

Producción