Index / Android / PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

Autor jc mouse martes, agosto 7, 2018

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360° que puede desplazarse utilizando el giroscopio del dispositivo, todo esto de una manera sencilla y con muy poco código de por medio.

El proyecto se encuentra bajo licencia MIT.

Necesitamos:

IDE Android Studio
Permisos: No necesita
Una imagen JPG de 360 o 180 grados
5 minutos de tu valioso tiempo
Dispositivo físico de preferencia

Manos a la obra

Paso 1. El Proyecto base

Creamos un proyecto base en Android Studio de tipo Empty Activity y su layout por defecto

Paso 2. Dependencias

Abrimos el archivo build.gradle (Module app) y agregamos la siguiente dependencia:

implementation 'com.gjiazhe:PanoramaImageView:1.0'

Paso 3. La imagen

Podemos hacer uso de imágenes panorámicas en diferentes ángulos que van de 0 a PI/2 ya que PanoramaImageView nos permite indicar el grado de rotación de la imagen así como como el sentido de desplazamiento del mismo ya sea horizontal o vertical.

En este ejemplo utilizaremos una imagen de Japón (Fuente: Internet), dado q las imágenes panorámicas se toman a gran resolución y tamaño, estas ocupan mucho espacio en memoria, razón por la cual deberemos reducir estas de acuerdo a las capacidades de nuestro dispositivo.

Utilizando nuestro editor de imágenes favorito reducimos nuestra imagen japon360.jpg a un tamaño de 1391×300 pixeles

Para guardar imagen, clic derecho -> guardar enlace como…

Esta imagen [japon360.jpg] debes colocarla en la carpeta drawable

Paso 4. Layout

Abrimos nuestro archivo activity_main.xml en modo texto y agregamos:

    <com.gjiazhe.panoramaimageview.PanoramaImageView
        android:id="@+id/panorama_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/japon"
        app:piv_enablePanoramaMode="true"
        app:piv_show_scrollbar="true"
        app:piv_invertScrollDirection="false" />

Podemos destacar los atributos:

piv_enablePanoramaMode: Habilita el efecto panoramico
piv_show_scrollbar: Muestra el scrollbar o barra de desplazamiento
piv_invertScrollDirection: Invierte la dirección de desplazamiento

estos atributos también están disponibles en código java:

panoramaImageView.setEnablePanoramaMode(true);
panoramaImageView.setEnableScrollbar(true);
panoramaImageView.setInvertScrollDirection(false);

Paso 5. Código Java

En nuestro Activity o Fragment debemos registrar GyroscopeObserver en onResume () y recordar anular el registro en onPause (). En el onCreate, inicializamos PanoramaImageView de la siguiente manera:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.gjiazhe.panoramaimageview.GyroscopeObserver;
import com.gjiazhe.panoramaimageview.PanoramaImageView;

public class MainActivity extends AppCompatActivity {

    private GyroscopeObserver gyroscopeObserver;

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

        // Initialize GyroscopeObserver.
        gyroscopeObserver = new GyroscopeObserver();
        // Set the maximum radian the device should rotate to show image's bounds.
        // It should be set between 0 and ?/2.
        // The default value is ?/9.
        gyroscopeObserver.setMaxRotateRadian(Math.PI/2);
        PanoramaImageView panoramaImageView = (PanoramaImageView) findViewById(R.id.panorama_image_view);
        // Set GyroscopeObserver for PanoramaImageView.
        panoramaImageView.setGyroscopeObserver(gyroscopeObserver);

    }

    @Override
    protected void onResume() {
        super.onResume();
        // Register GyroscopeObserver.
        gyroscopeObserver.register(this);
    }

    @Override
    protected void onPause() {
        super.onPause();
        // Unregister GyroscopeObserver.
        gyroscopeObserver.unregister();
    }

}

Adicionalmente si queremos interactuar con nuestro imagen panorámica, podemos hacer uso de un listener.

panoramaImageView.setOnPanoramaScrollListener(new PanoramaImageView.OnPanoramaScrollListener() {
    @Override
    public void onScrolled(PanoramaImageView view, float offsetProgress) {
        // Do something here.
        // The offsetProgress range from -1 to 1, indicating the image scrolls
        // from left(top) to right(bottom).
    }
});